|  | @@ -0,0 +1,327 @@
 | 
	
		
			
				|  |  | +<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="auditUserId" slot-scope="{row,index}">
 | 
	
		
			
				|  |  | +          <el-select
 | 
	
		
			
				|  |  | +            v-model="row.auditUserId"
 | 
	
		
			
				|  |  | +            filterable
 | 
	
		
			
				|  |  | +            multiple
 | 
	
		
			
				|  |  | +            collapse-tags
 | 
	
		
			
				|  |  | +            placeholder="审核人"
 | 
	
		
			
				|  |  | +          ></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 } from "@/api/approval/processConfig";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +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: [],
 | 
	
		
			
				|  |  | +      loading: false,
 | 
	
		
			
				|  |  | +      search: {},
 | 
	
		
			
				|  |  | +      visible: false,
 | 
	
		
			
				|  |  | +      title: '',
 | 
	
		
			
				|  |  | +      detailOption: {},
 | 
	
		
			
				|  |  | +      optionsStatue: [
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          id: 'A',
 | 
	
		
			
				|  |  | +          name: '有效'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          id: 'S',
 | 
	
		
			
				|  |  | +          name: '停用'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +      ],
 | 
	
		
			
				|  |  | +      dataForm: {
 | 
	
		
			
				|  |  | +        status: 'A',
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      dataRule: {},
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  created() {
 | 
	
		
			
				|  |  | +    this.option = option
 | 
	
		
			
				|  |  | +    this.detailOption = detailOption
 | 
	
		
			
				|  |  | +    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
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 编辑
 | 
	
		
			
				|  |  | +    editOpen(row) {
 | 
	
		
			
				|  |  | +      console.log(row)
 | 
	
		
			
				|  |  | +      detailData({id: row.id}).then(res => {
 | 
	
		
			
				|  |  | +        console.log(res)
 | 
	
		
			
				|  |  | +        this.dataForm = res.data.data
 | 
	
		
			
				|  |  | +        this.detailData = res.data.data.auditPathsLevels
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      this.title = '修改';
 | 
	
		
			
				|  |  | +      this.visible = !this.visible
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    rowDel(row, index) {
 | 
	
		
			
				|  |  | +      this.$confirm("确定将选择数据删除?", {
 | 
	
		
			
				|  |  | +        confirmButtonText: "确定",
 | 
	
		
			
				|  |  | +        cancelButtonText: "取消",
 | 
	
		
			
				|  |  | +        type: "warning"
 | 
	
		
			
				|  |  | +      }).then(() => {
 | 
	
		
			
				|  |  | +        return removeList(row.id);
 | 
	
		
			
				|  |  | +      }).then(() => {
 | 
	
		
			
				|  |  | +        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({
 | 
	
		
			
				|  |  | +        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
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style scoped>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +</style>
 |