xujiecloud-vue/src/views/modules/auth/authRule.vue

<template>
  <div>
    <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList">
      <el-form-item :label="'BU'">
        <el-select v-model="searchData.bu" placeholder="请选择" clearable style="width: 130px">
          <el-option
            v-for = "i in userBuList"
            :key = "i.buNo"
            :label = "i.buDesc"
            :value = "i.buNo">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'审批规则编码'">
        <el-input v-model="searchData.ruleNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'审批规则描述'">
        <el-input v-model="searchData.ruleDesc" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'状态'">
        <el-select clearable v-model="searchData.active" style="width: 120px">
          <el-option label="启用" value="Y"></el-option>
          <el-option label="禁用" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'优先级'">
        <el-select clearable v-model="searchData.priority" style="width: 120px">
          <el-option label="1" value = 1></el-option>
          <el-option label="2" value = 2></el-option>
          <el-option label="3" value = 3></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="' '">
        <el-button @click="getDataList">查询</el-button>
        <el-button type="primary" @click="addModal">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :height="this.height - 300"
      :data="dataList"
      ref="mainTable"
      highlight-current-row
      @row-click="ruleClickRow"
      @current-change="changeCurrentRow"
      border
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="160"
        label="操作">
        <template slot-scope="scope">
          <el-link style="cursor: pointer" @click="updateModal(scope.row)">修改</el-link>
          <el-link style="cursor: pointer" @click="delModal(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 页签 -->
    <el-tabs style="margin-top: 0px; width: 100%; height: 100%;" v-model="activeTable" class="customer-tab" type="border-card" @tab-click="tabClick">
      <!-- 详情页签 -->
      <el-tab-pane label="详情" name="auth_rule_details" style="height: 225px">
        <el-form :inline="true" label-position="top" :model="ruleCurrentRow" @keyup.enter.native="getDataList">
          <el-form-item :label="'BU'">
            <el-input v-model="ruleCurrentRow.buDesc" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item :label="'审批规则编码'">
            <el-input v-model="ruleCurrentRow.ruleNo" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item :label="'审批规则描述'">
            <el-input v-model="ruleCurrentRow.ruleDesc" clearable style="width: 345px"></el-input>
          </el-form-item>
          <el-form-item :label="'状态'">
            <el-input v-model="ruleCurrentRow.active" clearable style="width: 140px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="ruleCurrentRow" @keyup.enter.native="getDataList">
          <el-form-item :label="'最低金额'">
            <el-input v-model="ruleCurrentRow.minValue" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item :label="'最高金额'">
            <el-input v-model="ruleCurrentRow.maxValue" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item :label="'优先级'">
            <el-input v-model="ruleCurrentRow.priority" clearable style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item :label="'启用日期'">
            <el-input v-model="ruleCurrentRow.phaseInDate" clearable style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item :label="'停用日期'">
            <el-input v-model="ruleCurrentRow.phaseOutDate" clearable style="width: 140px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="ruleCurrentRow" @keyup.enter.native="getDataList">
          <el-form-item :label="'备注'">
            <el-input v-model="ruleCurrentRow.remark" clearable style="width: 804px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" :model="ruleCurrentRow" @keyup.enter.native="getDataList">
          <el-form-item :label="'创建人'">
            <el-input v-model="ruleCurrentRow.createBy" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item :label="'创建时间'">
            <el-input v-model="ruleCurrentRow.createDate" clearable style="width: 242px"></el-input>
          </el-form-item>
          <el-form-item :label="'更新人'">
            <el-input v-model="ruleCurrentRow.updateBy" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item :label="'更新时间'">
            <el-input v-model="ruleCurrentRow.updateDate" clearable style="width: 243px"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 审批步骤页签 -->
      <el-tab-pane label="审批步骤" name="auth_rule_step" style="height: 100%">
        <el-button type="primary" @click="ruleStepAddModal" style="margin-top: -5px">新增</el-button>
        <el-table
          :height="this.height - 278"
          :data="ruleStepDataList"
          ref="ruleStepTable"
          highlight-current-row
          border
          style="width: 100%; margin-top: 5px">
          <el-table-column
            v-for="(item,index) in ruleStepColumnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="160"
            label="操作">
            <template slot-scope="scope">
              <el-link style="cursor: pointer" @click="ruleStepUpdateModal(scope.row)">修改</el-link>
              <el-link style="cursor: pointer" @click="ruleStepDelModal(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="modalData.title" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="600px">
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="审批规则编码" prop="ruleNo" :rules="rules.ruleNo">
          <el-input v-model="modalData.ruleNo" :disabled="modalDisableFlag" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="审批规则描述" prop="ruleDesc" :rules="rules.ruleDesc">
          <el-input v-model="modalData.ruleDesc" :disabled="modalDisableFlag" style="width: 315px"></el-input>
        </el-form-item>
        <el-form-item label="BU" prop="bu" :rules="rules.bu">
          <el-select v-model="modalData.bu" placeholder="请选择" :disabled="modalDisableFlag" style="width: 110px">
            <el-option
              v-for = "i in userBuList"
              :key = "i.buNo"
              :label = "i.buDesc"
              :value = "i.buNo">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="最低金额" prop="minValue">
          <el-input v-model="modalData.minValue" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="最高金额" prop="maxValue">
          <el-input v-model="modalData.maxValue" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="优先级" prop="priority" :rules="rules.priority">
          <el-select clearable v-model="modalData.priority" :disabled="!modalDisableFlag" style="width: 67px">
            <el-option label="1" value = 1></el-option>
            <el-option label="2" value = 2></el-option>
            <el-option label="3" value = 3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用日期" prop="phaseInDate" :rules="rules.phaseInDate">
          <el-date-picker v-model="modalData.phaseInDate" type="date" placeholder="选择日期" style="width: 110px"></el-date-picker>
        </el-form-item>
        <el-form-item label="停用日期" prop="phaseOutDate">
          <el-date-picker v-model="modalData.phaseOutDate" type="date" :disabled="!modalDisableFlag" placeholder="选择日期" style="width: 110px"></el-date-picker>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="备注">
          <el-input v-model="modalData.remark" style="width: 439px"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="active" :rules="rules.active">
          <el-select v-model="modalData.active" :disabled="!modalDisableFlag" style="width: 110px">
            <el-option label="启用" value="Y"></el-option>
            <el-option label="禁用" value="N"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;margin-top: 5px;text-align:center">
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button type="primary" @click="modalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <el-dialog :title="ruleStepModalData.title" :close-on-click-modal="false" v-drag :visible.sync="ruleStepModalFlag" width="476px">
      <el-form :inline="true" label-position="top" :model="ruleStepModalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="规则编码" prop="ruleNo">
          <el-input v-model="ruleStepModalData.ruleNo" :disabled="true" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="规则描述" prop="ruleDesc">
          <el-input v-model="ruleStepModalData.ruleDesc" :disabled="true" style="width: 315px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="ruleStepModalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="步骤号" prop="stepNo" :rules="rules.stepNo">
          <el-input v-model="ruleStepModalData.stepNo" :disabled="ruleStepModalDisableFlag" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="authTypeDb" :rules="rules.authTypeDb">
          <el-select clearable v-model="ruleStepModalData.authTypeDb" style="width: 145px" @blur="clearRuleStepModalData">
            <el-option label="审批人" value="U"></el-option>
            <el-option label="审批组" value="G"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" " prop="firstStepFlag">
          <el-checkbox v-model="ruleStepModalData.firstStepFlag" :disabled="this.ruleStepModalData.lastStepFlag === 'Y'" :true-label="'Y'" :false-label="'N'" style="width: 110px;margin-left: 35px">
            首步骤
          </el-checkbox>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="ruleStepModalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item prop="authUserNo" :rules="rules.authUserNo">
          <span slot="label" style="" v-if="this.ruleStepModalData.authTypeDb !== 'G' && this.ruleStepModalData.authTypeDb !== '审批组'">
            <a herf="#" @click="getBaseList(2003)">审批人</a>
          </span>
          <span slot="label" style="margin-left: -4px" v-if="this.ruleStepModalData.authTypeDb === 'G' || this.ruleStepModalData.authTypeDb === '审批组'">
          审批人
          </span>
          <el-input v-model="ruleStepModalData.authUserNo" :disabled="this.ruleStepModalData.authTypeDb === 'G' || this.ruleStepModalData.authTypeDb === '审批组'" @blur="authUserNoBlur" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="审批人姓名" prop="userDisplay" :rules="rules.userDisplay">
          <el-input v-model="ruleStepModalData.userDisplay" disabled style="width: 145px"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="lastStepFlag">
          <el-checkbox v-model="ruleStepModalData.lastStepFlag" :disabled="this.ruleStepModalData.firstStepFlag === 'Y'" :true-label="'Y'" :false-label="'N'" style="width: 110px;margin-left: 35px">
            末步骤
          </el-checkbox>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="ruleStepModalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item prop="authGroupNo" :rules="rules.authGroupNo">
          <span slot="label" style="" v-if="this.ruleStepModalData.authTypeDb !== 'U' && this.ruleStepModalData.authTypeDb !== '审批人'">
            <a herf="#" @click="getBaseList(218)">审批组编码</a>
          </span>
          <span slot="label" style="margin-left: -4px" v-if="this.ruleStepModalData.authTypeDb === 'U' || this.ruleStepModalData.authTypeDb === '审批人'">
          审批组编码
          </span>
          <el-input v-model="ruleStepModalData.authGroupNo" :disabled="this.ruleStepModalData.authTypeDb === 'U' || this.ruleStepModalData.authTypeDb === '审批人'" @blur="authGroupNoBlur" style="width: 110px"></el-input>
        </el-form-item>
        <el-form-item label="审批组名称" prop="groupDesc" :rules="rules.groupDesc">
          <el-input v-model="ruleStepModalData.groupDesc" disabled style="width: 315px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;margin-top: 5px;text-align:center">
        <el-button type="primary" @click="ruleStepSaveData">保存</el-button>
        <el-button type="primary" @click="ruleStepModalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>

  </div>
</template>

<script>
import {getSiteAndBuByUserName} from "../../../api/qc/qc";
import {
  authRuleSearch, // 审批规则信息列表查询
  authRuleSave, // 审批规则信息新增
  authRuleEdit, // 审批规则信息编辑
  authRuleDelete, // 审批规则信息删除
  authRuleStepSearch, // 审批规则步骤信息列表查询
  authRuleStepSave, // 审批规则步骤信息新增
  authRuleStepEdit, // 审批规则步骤信息编辑
  authRuleStepDelete, // 审批规则步骤信息删除
} from '@/api/auth/auth'
import Chooselist from '@/views/modules/common/Chooselist_eam'
import {authBusinessSearch, authGroupSearch} from "../../../api/auth/auth";

export default {
  components: {
    Chooselist
  },
  data() {
    return {
      // 导出
      resultList: [],
      userBuList: [],
      // ======== 行高 ========
      height: 200,
      // ======== 分页 ========
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      authRuleMemberSaveDialog: false,
      activeTable: 'auth_rule_details',
      searchAuthBusinessData:{
        site: this.$store.state.user.site,
        userName: this.$store.state.user.name,
        username:'',
        userDisplay:'',
      },
      authBusinessList:[],
      isAuthBusinessList:[],
      allAuthBusinessList:[],
      allAuthBusinessSelections:[],
      isAuthBusinessSelections:[],
      // ======== 选中的当前行数据 ========
      ruleCurrentRow: {},
      rowData:{},
      // 条件查询
      searchData: {
        site: this.$store.state.user.site,
        userName: this.$store.state.user.name,
        bu: '',
        buNo: '',
        ruleNo: '',
        ruleDesc: '',
        active: '',
        priority: '',
        page: 1,
        limit: 10
      },
      modalData: {
        flag: '',
        title: '',
        bu: '',
        site: this.$store.state.user.site,
        userName: this.$store.state.user.name,
        buNo: '',
        recordType: '',
        authRuleId: '',
        ruleNo: '',
        ruleDesc: '',
        priority: '',
        phaseInDate: '',
        phaseOutDate: '',
        remark: '',
        active: '',
        createBy: '',
        updateBy: '',
        createDate: '',
        updateDate: ''
      },
      ruleStepModalData: {
        flag: '',
        title: '',
        bu: '',
        site: this.$store.state.user.site,
        userName: this.$store.state.user.name,
        buNo: '',
        authStepId: '',
        authRuleId: '',
        ruleNo: '',
        ruleDesc: '',
        stepNo: 0,
        authTypeDb: '',
        authUserNo: '',
        userDisplay: '',
        authGroupNo: '',
        groupDesc: '',
        firstStepFlag: '',
        lastStepFlag: '',
        createBy: '',
        updateBy: '',
        createDate: '',
        updateDate: ''
      },
      // ======== 数据列表 ========
      dataList: [],
      ruleStepDataList: [],
      // 展示列集
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1BU',
          tableId: "601005Table1",
          tableName: "审批规则信息表",
          columnProp: 'buDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1RuleNo',
          tableId: "601005Table1",
          tableName: "审批规则信息表",
          columnProp: 'ruleNo',
          headerAlign: "center",
          align: "center",
          columnLabel: '审批规则编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1RuleDesc',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'ruleDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '审批规则描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 180
        },
        {
          functionId: 601005,
          serialNumber: '601005Table1Active',
          tableId: '601005Table1',
          tableName: '审批规则信息表',
          columnProp: 'active',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1MinValue',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'minValue',
          headerAlign: "center",
          align: "right",
          columnLabel: '最低金额',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1MaxValue',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'maxValue',
          headerAlign: "center",
          align: "right",
          columnLabel: '最高金额',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1Remark',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'priority',
          headerAlign: "center",
          align: "center",
          columnLabel: '优先级',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1PhaseInDate',
          tableId: '601005Table1',
          tableName: '审批规则表',
          columnProp: 'phaseInDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '启用日期',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1PhaseOutDate',
          tableId: '601005Table1',
          tableName: '审批规则表',
          columnProp: 'phaseOutDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '停用日期',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1CreateDate',
          tableId: '601005Table1',
          tableName: '审批规则表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1CreateBy',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'createBy',
          headerAlign: "center",
          align: "center",
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1UpdateDate',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'updateDate',
          headerAlign: "center",
          align: "center",
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table1UpdateBy',
          tableId: "601005Table1",
          tableName: "审批规则表",
          columnProp: 'updateBy',
          headerAlign: "center",
          align: "center",
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
      ],
      ruleStepColumnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2StepNo',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'stepNo',
          headerAlign: "center",
          align: "center",
          columnLabel: '步骤号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2AuthTypeDb',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'authTypeDb',
          headerAlign: "center",
          align: "center",
          columnLabel: '类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2AuthUserNo',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'authUserNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '审批人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2UserDisplay',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'userDisplay',
          headerAlign: "center",
          align: "left",
          columnLabel: '审批人姓名',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2AuthGroupNo',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'authGroupNo',
          headerAlign: "center",
          align: "center",
          columnLabel: '审批组编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2GroupDesc',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'groupDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '审批组名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2FirstStepFlag',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'firstStepFlag',
          headerAlign: "center",
          align: "center",
          columnLabel: '首步骤',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 50
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2LastStepFlag',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'lastStepFlag',
          headerAlign: "center",
          align: "center",
          columnLabel: '末步骤',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 50
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2CreateDate',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'createDate',
          headerAlign: "center",
          align: "center",
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2CreateBy',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'createBy',
          headerAlign: "center",
          align: "left",
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2UpdateDate',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'updateDate',
          headerAlign: "center",
          align: "center",
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 601005,
          serialNumber: '601005Table2UpdateBy',
          tableId: "601005Table2",
          tableName: "审批规则步骤表",
          columnProp: 'updateBy',
          headerAlign: "center",
          align: "left",
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
    ],
      rules: {
        bu: [
          {
            required: true,
            message: ' ',
            trigger: ['blur','change']
          }
        ],
        ruleNo:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        ruleDesc:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        active:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        priority:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        phaseInDate:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        stepNo:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        authTypeDb:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        authUserNo:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        userDisplay:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        authGroupNo:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
        groupDesc:[
          {
            required: true,
            message: ' ',
            trigger: 'change'
          }
        ],
      },
      // ======== 模态框开关控制 ========
      authSearch: false,
      authSave: false,
      authUpdate: false,
      authDelete: false,
      modalFlag: false,
      ruleStepModalFlag: false,
      modalDisableFlag: false,
      ruleStepModalDisableFlag: false,
      menuId: this.$route.meta.menuId,
    };
  },
  watch: {
    searchData: {
      deep: true,
      handler: function (newV, oldV) {
        this.searchData.ruleNo = this.searchData.ruleNo.toUpperCase()
      }
    },
    modalData: {
      deep: true,
      handler: function (newV, oldV) {
        this.modalData.ruleNo = this.modalData.ruleNo.toUpperCase()
      }
    },
    ruleStepModalData: {
      deep: true,
      handler: function (newV, oldV) {
        this.ruleStepModalData.authGroupNo = this.ruleStepModalData.authGroupNo.toUpperCase()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = window.innerHeight - 180
    })
  },
  created() {
    // 获取用户的 site 和 bu
    this.getSiteAndBuByUserName();
    // 获取数据列表
    this.getDataList()
  },
  methods: {
    // 获取用户的bu
    getSiteAndBuByUserName () {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(tempData).then(({data}) => {
        if (data.code === 0) {
          this.userBuList = data.rows
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 获取基础数据列表S
    getBaseList (val,type) {
      this.tagNo = val
      this.$nextTick(() => {
        let strVal = ''
        let conSql = ''
        if (val === 2003 ) {
          strVal = this.ruleStepModalData.authUserNo
          conSql = " and br.site = '" + this.$store.state.user.site + "'"
          this.$refs.baseList.init(val, strVal, conSql)
        }
        if (val === 218 ) {
          strVal = this.ruleStepModalData.authGroupNo
          this.$refs.baseList.init(val, strVal)
        }
      })
    },

    /* 列表方法的回调 */
    getBaseData (val) {
      if (this.tagNo === 2003) {
        this.ruleStepModalData.authUserNo = val.username
        this.ruleStepModalData.userDisplay = val.user_display
      }
      if (this.tagNo === 218) {
        this.ruleStepModalData.authGroupNo = val.group_no
        this.ruleStepModalData.groupDesc = val.group_desc
      }
    },

    // 获取数据列表
    getDataList () {
      if (this.searchData.bu != null && this.searchData.bu !== '') {
        this.searchData.buNo = this.searchData.bu.split('_')[1]
      }
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      authRuleSearch(this.searchData).then(({data}) => {
        if (data.code === 0) {
          this.dataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
          // 遍历数据列表，将状态转换为中文
          this.dataList.forEach(item => {
            if (item.active === 'Y') {
              item.active = '启用'
            } else {
              item.active = '禁用'
            }
          })
          // 判断是否全部存在数据
          if (this.totalPage > 0) {
            // 设置选中行
            this.$refs.mainTable.setCurrentRow(this.dataList[0])
            // 加载当前的页签的table
            this.refreshCurrentTabTable()
            this.ruleClickRow(this.dataList[0])
          }
        }
      })
    },

    // 获取数据列表
    getRuleStepDataList () {
      authRuleStepSearch(this.ruleCurrentRow).then(({data}) => {
        if (data && data.code === 0) {
          this.ruleStepDataList = data.list
          // 设置选中行
          this.$refs.ruleStepTable.setCurrentRow(this.ruleStepDataList[0])
          for (let i = 0; i < this.ruleStepDataList.length; i++) {
            if (this.ruleStepDataList[i].authTypeDb === 'U') {
              this.ruleStepDataList[i].authTypeDb = '审批人'
            } else {
              this.ruleStepDataList[i].authTypeDb = '审批组'
            }
          }
        }
      })
    },

    addModal () {
      this.modalData = {
        flag: '1',
        title: '审批规则新增',
        bu: this.userBuList[0].buNo,
        buNo: '',
        ruleNo: '',
        ruleDesc: '',
        minValue: '',
        maxValue: '',
        priority: 1,
        phaseInDate: new Date(),
        active: 'Y',
        createBy: this.$store.state.user.name,
      }
      this.modalDisableFlag = false
      this.modalFlag = true
    },

    ruleStepAddModal () {
      this.ruleStepModalData = {
        flag: '1',
        title: '审批规则步骤新增',
        bu: this.userBuList[0].buNo,
        buNo: '',
        authRuleId: this.ruleCurrentRow.authRuleId,
        ruleNo: this.ruleCurrentRow.ruleNo,
        ruleDesc: this.ruleCurrentRow.ruleDesc,
        stepNo: 10,
        authTypeDb: 'U',
        authUserNo: '',
        userDisplay: '',
        authGroupNo: '',
        groupDesc: '',
        firstStepFlag: 'N',
        lastStepFlag: 'N',
        createBy: this.$store.state.user.name,
      }
      // 遍历数据列表，判断步骤号，每次新增步骤号+10
      let stepNoList = []
      for (let i = 0; i < this.ruleStepDataList.length; i++) {
        stepNoList.push(this.ruleStepDataList[i].stepNo)
      }
      if (stepNoList.length > 0) {
        this.ruleStepModalData.stepNo = Math.max.apply(null, stepNoList) + 10
      }
      this.ruleStepModalDisableFlag = false
      this.ruleStepModalFlag = true
    },

    /**
     * 审批规则信息编辑模态框
     * @param row
     */
    updateModal (row) {
      if (row.active) {
        if (row.active === '启用') {
          row.active = 'Y'
        } else {
          row.active = 'N'
        }
      }
      this.modalData = {
        flag: '2',
        title: '审批规则编辑',
        site: row.site,
        authRuleId: row.authRuleId,
        recordType: row.recordType,
        bu: row.site + '_' + row.buNo,
        buNo: row.buNo,
        ruleNo: row.ruleNo,
        ruleDesc: row.ruleDesc,
        minValue: row.minValue,
        maxValue: row.maxValue,
        priority: row.priority,
        phaseInDate: row.phaseInDate,
        phaseOutDate: row.phaseOutDate,
        remark: row.remark,
        active: row.active,
        createBy: row.createBy,
        createDate: row.createDate,
        updateBy: this.$store.state.user.name,
        updateDate: ''
      }
      this.modalDisableFlag = true
      this.modalFlag = true
    },

    /**
     * 审批规则步骤信息编辑模态框
     * @param row
     */
    ruleStepUpdateModal (row) {
      this.ruleStepModalData = {
        flag: '2',
        title: '审批规则步骤编辑',
        site: row.site,
        authStepId: row.authStepId,
        authRuleId: row.authRuleId,
        ruleNo: row.ruleNo,
        ruleDesc: row.ruleDesc,
        stepNo: row.stepNo,
        authTypeDb: row.authTypeDb,
        authUserNo: row.authUserNo,
        userDisplay: row.userDisplay,
        authGroupNo: row.authGroupNo,
        groupDesc: row.groupDesc,
        firstStepFlag: row.firstStepFlag,
        lastStepFlag: row.lastStepFlag,
        createBy: row.createBy,
        createDate: row.createDate,
        updateBy: this.$store.state.user.name,
        updateDate: ''
      }
      this.ruleStepModalDisableFlag = true
      this.ruleStepModalFlag = true
    },

    // ======== 新增/编辑/删除方法 ========
    /**
     * 审批规则信息新增/编辑
     */
    saveData () {
      if (this.modalData.bu === '' || this.modalData.bu == null) {
        this.$message.warning('请选择BU！')
        return
      }
      if (this.modalData.ruleNo === '' || this.modalData.ruleNo == null) {
        this.$message.warning('请填写审批规则编码！')
        return
      }
      if (this.modalData.ruleDesc === '' || this.modalData.ruleDesc == null) {
        this.$message.warning('请填写审批规则描述！')
        return
      }
      if (this.modalData.priority === '' || this.modalData.priority == null) {
        this.$message.warning('请选择优先级！')
        return
      }
      if (this.modalData.phaseInDate === '' || this.modalData.phaseInDate == null) {
        this.$message.warning('请选择启用日期！')
        return
      }
      if (this.modalData.active === '' || this.modalData.active == null) {
        this.$message.warning('请选择状态！')
        return
      }
      if (this.modalData.flag === '1') {
        this.modalData.buNo = this.modalData.bu.split('_')[1]
        this.modalData.site = this.$store.state.user.site
        authRuleSave(this.modalData).then(({data}) => {
          if (data && data.code === 0) {
            this.getDataList()
            this.modalFlag = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      } else {
        if (this.modalData.active === 'N') {
          if (this.modalData.phaseOutDate === '' || this.modalData.phaseOutDate == null) {
            this.$alert('停用日期不能为空！', '错误', {
              confirmButtonText: '确定'
            })
            return
          }
        }
        authRuleEdit(this.modalData).then(({data}) => {
          if (data && data.code === 0) {
            this.getDataList()
            this.modalFlag = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      }
    },

    /**
     * 审批规则步骤信息新增/编辑
     */
    ruleStepSaveData () {
      if (this.ruleStepModalData.stepNo === '' || this.ruleStepModalData.stepNo == null) {
        this.$message.warning('请填写步骤号！')
        return
      }
      if (this.ruleStepModalData.authTypeDb === '' || this.ruleStepModalData.authTypeDb == null) {
        this.$message.warning('请选择类型！')
        return
      }
      if (this.ruleStepModalData.authTypeDb === 'U' || this.ruleStepModalData.authTypeDb === '审批人') {
        if (this.ruleStepModalData.authUserNo === '' || this.ruleStepModalData.authUserNo == null) {
          this.$message.warning('请填写审批人！')
          return
        }
        if (this.ruleStepModalData.userDisplay === '' || this.ruleStepModalData.userDisplay == null) {
          this.$alert('该审批人不存在，请重新输入审批人用户名!', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        }
      } else {
        if (this.ruleStepModalData.authGroupNo === '' || this.ruleStepModalData.authGroupNo == null) {
          this.$message.warning('请填写审批组编码！')
          return
        }
        if (this.ruleStepModalData.groupDesc === '' || this.ruleStepModalData.groupDesc == null) {
          this.$alert('该审批组不存在，请重新输入审批组编码!', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        }
      }
      // 判断步骤号是否为整十的倍数
      if (this.ruleStepModalData.stepNo % 10 !== 0) {
        this.$alert('步骤号必须为整十的倍数（如10、20、30）！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if (this.ruleStepDataList != null && this.ruleStepDataList.length > 0) {
        for (let i = 0; i < this.ruleStepDataList.length; i++) {
          if(this.ruleStepModalData.firstStepFlag === 'Y' && this.ruleStepDataList[i].firstStepFlag === 'Y') {
            this.$alert('该审批步骤下已存在首步骤！', '提示', {
              confirmButtonText: '确定'
            })
            return
          }
          if(this.ruleStepModalData.lastStepFlag === 'Y' && this.ruleStepDataList[i].lastStepFlag === 'Y') {
            this.$alert('该审批步骤下已存在末步骤！', '提示', {
              confirmButtonText: '确定'
            })
            return
          }
        }
      }
      if (this.ruleStepModalData.firstStepFlag === 'Y') {
        this.ruleStepModalData.lastStepFlag = 'N'
      } else if (this.ruleStepModalData.lastStepFlag === 'Y') {
        this.ruleStepModalData.firstStepFlag = 'N'
      } else {
        this.ruleStepModalData.firstStepFlag = 'N'
        this.ruleStepModalData.lastStepFlag = 'N'
      }
      if (this.ruleStepModalData.flag === '1') {
        this.ruleStepModalData.buNo = this.ruleStepModalData.bu.split('_')[1]
        this.ruleStepModalData.site = this.$store.state.user.site
        authRuleStepSave(this.ruleStepModalData).then(({data}) => {
          if (data && data.code === 0) {
            this.getRuleStepDataList()
            this.ruleStepModalFlag = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      } else {
        if (this.ruleStepModalData.authTypeDb === '审批人') {
          this.ruleStepModalData.authTypeDb = 'U'
        } else {
          this.ruleStepModalData.authTypeDb = 'G'
        }
        authRuleStepEdit(this.ruleStepModalData).then(({data}) => {
          if (data && data.code === 0) {
            this.getRuleStepDataList()
            this.ruleStepModalFlag = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      }
    },

    /**
     * 审批规则信息删除
     */
    delModal (row) {
      this.$confirm(`是否删除这条审批规则信息?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        authRuleDelete(row).then(({data}) => {
          if (data && data.code === 0) {
            this.getDataList()
            this.partSelections = []
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      }).catch(() => {
      })
    },

    /**
     * 审批规则步骤信息删除
     */
    ruleStepDelModal (row) {
      this.$confirm(`是否删除这条审批规则步骤信息?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        authRuleStepDelete(row).then(({data}) => {
          if (data && data.code === 0) {
            this.getRuleStepDataList()
            this.partSelections = []
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      }).catch(() => {
      })
    },

    clearRuleStepModalData () {
      this.ruleStepModalData.authUserNo = ''
      this.ruleStepModalData.userDisplay = ''
      this.ruleStepModalData.authGroupNo = ''
      this.ruleStepModalData.groupDesc = ''
    },

    authUserNoBlur () {
      let params = {
        username: this.ruleStepModalData.authUserNo,
        site: this.$store.state.user.site,
        limit: 1,
        page: 1
      }
      authBusinessSearch(params).then(({data}) => {
        if (data.code === 0) {
          this.ruleStepModalData.userDisplay = data.page.list[0].userDisplay
        } else {
          this.$alert(data.msg, '错误', {
            confirmButtonText: '确定'
          })
        }
      })
    },

    authGroupNoBlur () {
      let params = {
        site: this.$store.state.user.site,
        groupNo: this.ruleStepModalData.authGroupNo,
        active: 'Y',
        limit: 1,
        page: 1
      }
      authGroupSearch(params).then(({data}) => {
        if (data.code === 0) {
          this.ruleStepModalData.groupDesc = data.page.list[0].groupDesc
        } else {
          this.$alert(data.msg, '错误', {
            confirmButtonText: '确定'
          })
        }
      })
    },

    // ======== 列表操作方法 ========
    /**
     * 单机选中审批规则信息
     * @param row
     */
    ruleClickRow(row) {
      this.ruleCurrentRow = JSON.parse(JSON.stringify(row))
    },

    changeCurrentRow (row, oldRow) {
      // 判断是否是获取焦点的事件
      if (row) {
        this.ruleCurrentRow = JSON.parse(JSON.stringify(row))
        //刷新当前页表
        this.refreshCurrentTabTable()
      }
    },

    // 列表表格选择替换
    tabClick (tab, event) {
      // 刷新列表数据
      this.refreshCurrentTabTable()
    },

    refreshCurrentTabTable () {
      if (this.activeTable == 'auth_rule_step') {
        this.getRuleStepDataList()
      }
    },
  }
}
</script>