vue-insagent-pc/src/views/Sys/SysManage/SysManage.vue

<template>
    <div>
        <el-row class="queryFrom">
            <el-form
              ref="queryFormRef"
             
              label-width="80px"
              size="small"
            >
              <el-row>
                <el-col :span="4">
                  <el-form-item label="系统名称">
                  
                      <el-input clearable placeholder="请输入系统名称" v-model="searchForm.systemName"></el-input>
                    
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="系统编码">
                    
                      <el-input clearable placeholder="请输入系统编码" v-model="searchForm.systemCode"></el-input>
                    
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="系统状态">
                    <el-select clearable v-model="searchForm.systemStatus" placeholder="请选择系统状态">
                        <el-option
                          
                            :label="'启用'"
                            :value="1">
                        </el-option>
                        <el-option
                          
                            :label="'禁用'"
                            :value="0">
                        </el-option>
                    </el-select>
                
                    
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="">
                    <el-button type="primary" @click="getList">查询</el-button >
                    <el-button type="primary" @click="addSys">添加</el-button>
                  </el-form-item>
                </el-col>
               
                <el-col :span="4">
                  <el-form-item label="">
                   
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-row>
        <templateTable :searchData.sync="formData" :tableConfig="tableConfig" :data="tabelList" @getList="getList"
            :pagination="pageData">
        </templateTable>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form :model="formData" :rules="formDataRules" ref="formData" label-width="100px" class="demo-formData">
                <el-form-item label="系统名称" prop="systemName">
                    <el-input clearable v-model="formData.systemName"></el-input>
                </el-form-item>
                <el-form-item label="系统编码" prop="systemCode">
                    <el-input clearable v-model="formData.systemCode"></el-input>
                </el-form-item>
                <el-form-item label="系统描述" prop="systemRemark">
                    <el-input clearable type="textarea" v-model="formData.systemRemark"></el-input>
                </el-form-item>
               
              
                <el-form-item label="系统状态" prop="systemStatus">
                    <el-switch
                        v-model="formData.systemStatus"

                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                    <!-- <el-switch v-model="formData.systemStatus"></el-switch> -->
                </el-form-item>
               
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel('formData')">取 消</el-button>
                <el-button type="primary" @click="confirm('formData')">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import templateTable from "@/components/TemplateTable/index.vue";

export default {
    components: {
    // KtButton,
    // tree,
    templateTable,
    // peopleImage,
  },
//   mixins: [mixin],
  data() {
    return {
      
        dialogVisible:false,
        dialogTitle: "",
        pageData: {
            pageNum: 1,
            pageSize: 20,
            totalSize:0
        },
        inactiveValue:0,
        activeValue:1,
        formData: {
            systemName:'',
            systemCode:'',
            systemRemark:'',
            systemStatus:0,
        },
        searchForm: {
            systemName:'',
            systemCode:'',
            systemRemark:'',
            systemStatus:'',
        },
        formDataRules: {
            systemName: [
                { required: true, message: '请输入系统名称', trigger: 'blur' },
            ],
            systemCode: [
                { required: true, message: '请输入系统编码', trigger: 'blur' },
            ],
        },

        tableConfig: {
            columns: [
                // 数据列
                { prop: "systemName", label: "系统名称", type: "text" },
                { prop: "systemCode", label: "系统编码", type: "text" },
                { prop: "systemRemark", label: "系统描述", type: "text" },
                { prop: "systemStatus", label: "系统状态", type: "statMap",
                // type: "statMap",
                    options: [
                    {
                        label: "禁用",
                        value: "0",
                    },
                    {
                        label: "启用",
                        value: "1",
                    },
                    ],
                 },
                { prop: "createTime", label: "创建时间", type: "text" },

            ],
            loading: true,
            isPaginationShow: true,
            isShowIndex: true,
            operationWidth: "100",
            optBtns: [
                {

                    type: "primary",
                    label: "编辑",
                    // type: "button",
                    // perm: "agreement:taxSource:config",
                    click: (row, index) => {
                        return this.updateSys(row);
                    },
                },
                {
                    type: "danger",
                    label: "删除",
                    // type: "button",
                    // perm: "agreement:taxSource:config",
                    click: (row, index) => {
                        return this.deleteSys(row);
                    },
                },
            ],
        },
        tabelList:[],
        originalForm: null,
        operationId:undefined
     
    };
  },
  created() {
    this.getList()
    this.originalForm={...this.formData}
  },
  mounted() {
    
  },
  watch: {
   
  },
  methods:{
    addSys(){
        this.dialogVisible = true
        this.dialogTitle = "添加系统"
        this.formData={...this.originalForm}
        this.operationId =undefined
    },
    updateSys(row){
        this.dialogVisible = true
        this.dialogTitle = "修改系统"
        this.formData.systemName=row.systemName
        this.formData.systemCode=row.systemCode
        this.formData.systemRemark=row.systemRemark
        this.formData.systemStatus=row.systemStatus*1
        this.operationId = row.id
    },
    getList(){
        this.tableConfig.loading = true
        this.$api.sys.getSysList({...this.searchForm,...this.pageData,}).then((res) => {
          
            if(res.code == 200){
                this.tableConfig.loading = false

                this.tabelList = res.data.content
                this.pageData.pageNum = res.data.pageNum;
                this.pageData.pageSize = res.data.pageSize;
                this.pageData.totalSize = res.data.totalSize;
            }else{
                    this.$message.error(res.msg)
                }
        }).catch(err=>{
            this.$message.error(err.message)
            this.tableConfig.loading = false
        })
    },
    handleClose(done) {
        done();
    },
    confirm(formName){
        // this.dialogVisible = false
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            // console.log(this.formData)
            this.$api.sys.editSys({...this.formData,id:this.operationId}).then((res) => {
                // console.log(res,666)
                if(res.code == 200){
                    this.$message.success(res.msg)
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$message.error(res.msg)
                }
            
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
    },
    cancel(formName){
        this.$refs[formName].resetFields();
        this.dialogVisible = false
    },
    deleteSys(row){
      
        this.$confirm('确认删除该系统吗？', '提示', {
            confirmButtonText: '提交',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$api.sys.deleteSys({ids:[row.id]}).then((res) => {
                if(res.code == 200){
                    this.$message.success(res.msg)
                    this.getList()
                }else{
                    this.$message.error(res.msg)
                }
            })
        }).catch(() => {

        });
        
    }

  }
}
</script>

<style>

</style>