Smart_platform_ui/src/views/approval/processConfig/index.vue

<template>
  <div>
    <basic-container>
      <avue-crud
        ref="crud"
        :option="option"
        :data="dataList"
        v-model="form"
        :page.sync="page"
        :search.sync="search"
        :table-loading="loading"
        @on-load="onLoad"
        @search-change="searchChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @saveColumn="saveColumn"
      >
        <template slot-scope="scope" slot="status">
          <span v-if="scope.row.status == 'N'">新建</span>
          <span v-if="scope.row.status == 'A'">有效</span>
          <span v-if="scope.row.status == 'S'">停用</span>
          <span v-if="scope.row.status == 'Z'">暂存</span>
        </template>
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click.stop="addHandle"
          >创建单据</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click.stop="editOpen(scope.row)"
          >编辑
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click.stop="rowDel(scope.row, scope.index)"
          >删除
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      append-to-body
      :visible.sync="visible"
      width="80%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      v-dialog-drag
      :title="title"
    >
      <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
        <el-form-item label="审核路径名称" prop="pathName">
          <el-input v-model="dataForm.pathName" placeholder="审核路径名称"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="dataForm.status" placeholder="状态" style="width: 100%">
            <el-option
              v-for="item in optionsStatue"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护人" prop="opUserName">
          <el-input v-model="dataForm.opUserName" disabled placeholder="维护人"></el-input>
        </el-form-item>
        <el-form-item label="维护时间" prop="opDate">
          <el-input v-model="dataForm.opDate" disabled placeholder="维护时间"></el-input>
        </el-form-item>
        <el-form-item label="备注" class="full" prop="remarks">
          <el-input v-model="dataForm.remarks" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <avue-crud
        ref="dialogCrud"
        :option="detailOption"
        :data="detailData"
      >
        <template slot="levelName" slot-scope="{row,index}">
          <el-input
            v-model="row.levelName"
            clearable
            placeholder="请输入"
          ></el-input>
        </template>
        <template slot="remarks" slot-scope="{row,index}">
          <el-input
            v-model="row.remarks"
            clearable
            placeholder="请输入"
          ></el-input>
        </template>
        <template slot="iffixAuditUser" slot-scope="{row,index}">
          <el-select
            v-model="row.iffixAuditUser"
          >
            <el-option
              label="是"
              value="T"
            ></el-option>
            <el-option
              label="否"
              value="F"
            ></el-option>
          </el-select>
        </template>
        <template slot="iffinalItem" slot-scope="{row,index}">
          <el-select
            v-model="row.iffinalItem"
          >
            <el-option
              label="是"
              value="T"
            ></el-option>
            <el-option
              label="否"
              value="F"
            ></el-option>
          </el-select>
        </template>
        <template slot="userMold" slot-scope="{ row, index }">
          <el-select
            v-model="row.userMold"
            filterable
            placeholder="请选择规则"
            @change="userMoldChange(row)"
          >
            <el-option
              v-for="(item, index) in ruleData"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </template>
        <template slot="auditMoldId" slot-scope="{ row, index }">
          <el-cascader
            v-model="row.auditMoldId"
            :disabled="!row.userMold || row.userMold == 3"
            :options="row.userMold == 1? roleData: row.userMold == 2? deptData: []"
            :props="props"
            collapse-tags
            clearable
            filterable
            @change="auditChange(row)"
          ></el-cascader>
        </template>
        <template slot="auditUserId" slot-scope="{row,index}">
          <el-select
            v-model="row.auditUserId"
            filterable
            collapse-tags
            multiple
            placeholder="审核人"
          >
            <el-option v-for="(item,index) in row.userList"
                       :key="index"
                       :label="item.realName"
                       :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click.stop="addDetail"
          >新增</el-button>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="rowDetailDelete(detailData, index)"
          >移除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDia">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import option from "./config/mainList.json";
import detailOption from "./config/detail.json";
import { getList,
  modify,
  removeList,
  detailData ,userList,
  getUserApprovalList} from "@/api/approval/processConfig";
import _ from "lodash";
import {getDeptTree} from "@/api/system/dept";
import {getRoleTree} from "@/api/system/role";

export default {
  name: "index",
  data() {
    return {
      option: {},
      dataList: [],
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300, 400, 500]
      },
      detailData: [],
      auditUserIdDic:[],
      loading: false,
      search: {},
      visible: false,
      title: '',
      detailOption: {},
      optionsStatue: [
        {
          id: 'A',
          name: '有效'
        },
        {
          id: 'S',
          name: '停用'
        },
      ],
      dataForm: {
        status: 'A',
      },
      dataRule: {},
      tenantId: null, // 租户
      // dicData: [],
      props: {
        multiple: true,
        value: 'id',
        label: 'title',
        emitPath: false,
      },
      roleData: [],
      deptData: [],
      ruleData: [
        {value: 1, label: '角色'},
        {value: 2, label: '部门'},
        {value: 3, label: '用户'},
      ], //指定规则
    }
  },
  created() {
    this.option = option
    this.detailOption = detailOption

    getUserApprovalList().then(res =>{
      this.auditUserIdDic = res.data.data
    })

    this.tenantId = this.$store.getters.userInfo.tenant_id;
    getRoleTree(this.tenantId).then(res => {
      this.roleData = res.data.data;
    });
    getDeptTree(this.tenantId).then(res => {
      this.deptData = res.data.data;
    });

    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0){
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  methods: {
    onLoad(page, params) {
      params = {
        ...params,
        current: page.currentPage,
        size: page.pageSize,
      }
      this.loading = true
      getList(params).then(res => {
        this.dataList = res.data.data.records ? res.data.data.records : [];
      }).finally(() => {
        this.loading = false
      })
    },
    addHandle() {
      this.title = '新增';
      this.visible = !this.visible
      this.dataForm = {}
      this.detailData = []
    },
    // 编辑
    editOpen(row) {
      detailData({id: row.id}).then(res => {
        this.dataForm = res.data.data
        this.detailData = res.data.data.auditPathsLevels
        this.detailData.map(e => {
          let params = {};
          if (e.auditMoldId && e.auditMoldId.length > 0) {
            if (e.userMold === 1) {
              this.$set(params, 'roleId', e.auditMoldId)
            } else if (e.userMold === 2) {
              this.$set(params, 'deptId', e.auditMoldId)
            }
            userList(params).then(response => {
              this.$set(e, 'userList', response.data.data);
            })
          } else {
            this.$set(e, 'userList', this.auditUserIdDic);
          }
          if (e.auditMoldId) {
            e.auditMoldId = e.auditMoldId.split(',')
          }
          if (e.auditUserId) {
            e.auditUserId = e.auditUserId.split(',')
          }
        })
      })
      this.title = '修改';
      this.visible = !this.visible
    },
    rowDel(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        removeList(row.id).then(res =>{
          if(res.data.success){
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.page.currentPage = 1;
            this.onLoad(this.page);
          }
        })
      })
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    async saveColumn() {
      // const inSave = await this.saveColumnData(
      //   this.getColumnName(50),
      //   this.option
      // );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    addDetail() {
      this.detailData.push({
        userList: this.auditUserIdDic,
        levelName: null,
        auditUserId: [],
        iffixAuditUser: 'T',
        iffinalItem: 'T',
        remarks: null,
        $cellEdit: true
      })
    },
    rowDetailDelete(row, index) {
      row.splice(index, 1)
    },
    closeDia() {
      this.visible = false
    },
    dataFormSubmit() {
      if (this.detailData.length === 0) {
        this.$message.error('请维护审批级次')
        return false
      }
      for (let x in this.detailData) {
        if (this.detailData[x].iffixAuditUser === 'S') {
          if (this.detailData[x].auditUserId === null || this.detailData[x].auditUserId === '' || this.dataList[x].auditUserId.length === 0) {
            this.$message.error('请维护第' + (Number(x) + 1) + '级的审核人')
            return false
          }
        }
      }
      let params ={
        ...this.dataForm,
        auditPathsLevels: JSON.parse(JSON.stringify(this.detailData))
      }
      for (let item of params.auditPathsLevels){
        item.levelId = _.add(item.$index,1)
        delete item.id
        if (item.auditMoldId) {
          item.auditMoldId = item.auditMoldId.join(',');
        }
        if (item.auditUserId) {
          item.auditUserId = item.auditUserId.join(',');
        }
      }
      modify(params).then(res =>{
        if(res.data.success){
          this.$message.success("操作成功!")
          this.visible = false
          this.refreshChange()
        }
      })
    },
    auditChange(row) {
      let params = {};
      row.auditUserId = null;
      if (row.auditMoldId && row.auditMoldId.length > 0) {
        const data = row.auditMoldId.join(',');
        if (row.userMold === 1) {
          this.$set(params, 'roleId', data)
        } else if (row.userMold === 2) {
          this.$set(params, 'deptId', data)
        }
        userList(params).then(res => {
          this.$set(row, 'userList', res.data.data);
          // 选完角色部门默认全部带上
          this.$set(row, 'auditUserId', res.data.data.map(item => item = item.id));
        })
      } else {
        this.$set(row, 'userList', [])
      }
    },
    userMoldChange(row) {
      row.auditUserId = null;
      row.auditMoldId = null;
      this.$set(row, 'userList', row.userMold == 3? this.auditUserIdDic: []);
    },
  },
}
</script>

<style scoped>

</style>