From ded388dbe15af9086cca53be30fd76c95f3d5769 Mon Sep 17 00:00:00 2001
From: yuejiayang <146344614+YangLei105@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:09:13 +0800
Subject: [PATCH] =?UTF-8?q?2024.8.26=20=E4=B8=89=E3=80=81=E9=82=AE?=
 =?UTF-8?q?=E4=BB=B6=E5=90=8E=E5=8F=B0=E4=BB=BB=E5=8A=A1=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20=E5=9B=9B=E3=80=81=E5=AE=A1=E6=89=B9=E8=A7=84=E5=88=99?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/auth.js                 |   8 +
 src/views/modules/auth/authGroup.vue |  10 +-
 src/views/modules/auth/authRule.vue  | 847 ++++++++++++++++++++++++++-
 3 files changed, 832 insertions(+), 33 deletions(-)

diff --git a/src/api/auth/auth.js b/src/api/auth/auth.js
index f9c0903..d8d0807 100644
--- a/src/api/auth/auth.js
+++ b/src/api/auth/auth.js
@@ -17,3 +17,11 @@ export const getAuthGroupBusinessList = data => createAPI(`auth/getAuthGroupBusi
 export const addAuthGroupMemberBusiness = data => createAPI(`auth/addAuthGroupMemberBusiness`,'post',data)
 
 export const deleteAuthGroupMemberBusiness = data => createAPI(`auth/deleteAuthGroupMemberBusiness`,'post',data)
+
+export const authRuleSearch = data => createAPI(`auth/authRuleSearch`,'post',data)
+
+export const authRuleSave = data => createAPI(`auth/authRuleSave`,'post',data)
+
+export const authRuleDelete = data => createAPI(`auth/authRuleDelete`,'post',data)
+
+export const authRuleEdit = data => createAPI(`auth/authRuleEdit`,'post',data)
diff --git a/src/views/modules/auth/authGroup.vue b/src/views/modules/auth/authGroup.vue
index c5ebb08..5cb79c5 100644
--- a/src/views/modules/auth/authGroup.vue
+++ b/src/views/modules/auth/authGroup.vue
@@ -2,12 +2,12 @@
   <div class="mod-config">
     <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList">
       <el-form-item :label="'BU'">
-        <el-select v-model="searchData.buDesc" placeholder="请选择" clearable style="width: 130px">
+        <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.buDesc">
+            :value = "i.buNo">
           </el-option>
         </el-select>
       </el-form-item>
@@ -284,7 +284,8 @@ export default {
       searchData: {
         site: this.$store.state.user.site,
         userName: this.$store.state.user.name,
-        buDesc: '',
+        bu: '',
+        buNo: '',
         groupNo: '',
         groupDesc: '',
         active: '',
@@ -589,6 +590,9 @@ export default {
 
     // 获取数据列表
     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
       authGroupSearch(this.searchData).then(({data}) => {
diff --git a/src/views/modules/auth/authRule.vue b/src/views/modules/auth/authRule.vue
index 08a6fa5..f96a7f2 100644
--- a/src/views/modules/auth/authRule.vue
+++ b/src/views/modules/auth/authRule.vue
@@ -1,52 +1,839 @@
 <template>
   <div>
-    <el-form :inline="true" :model="searchData" class="demo-form-inline">
-      <el-form-item label="用户ID">
-        <el-input v-model="searchData.userId" placeholder="请输入用户ID"></el-input>
+    <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.username" placeholder="请输入用户名"></el-input>
+      <el-form-item :label="'审批规则编码'">
+        <el-input v-model="searchData.ruleNo" clearable style="width: 120px"></el-input>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleSearch">查询</el-button>
+      <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 :data="tableData" style="width: 100%">
-      <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
-      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
-      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
-      <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
+    <el-table
+      :height="this.height - 270"
+      :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-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>
   </div>
 </template>
 
 <script>
+import {getSiteAndBuByUserName} from "../../../api/qc/qc";
+import {
+  authRuleSearch, // 审批规则信息列表查询
+  authRuleSave, // 审批规则信息新增
+  authRuleEdit, // 审批规则信息编辑
+  authRuleDelete // 审批规则信息删除
+} from '@/api/auth/auth'
+
 export default {
   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: {
-        userId: '',
-        username: '',
+        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: ''
+      },
+      // ======== 数据列表 ========
+      dataList: [],
+      // 展示列集
+      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
+        },
+      ],
+      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'
+          }
+        ]
       },
-      tableData: [],
+      // ======== 模态框开关控制 ========
+      authSearch: false,
+      authSave: false,
+      authUpdate: false,
+      authDelete: false,
+      modalFlag: false,
+      modalDisableFlag: false,
+      menuId: this.$route.meta.menuId,
     };
   },
-  methods: {
-    handleSearch() {
-      // 触发查询函数，调用后端接口
-      this.fetchData();
-    },
-    fetchData() {
-      const params = {
-        userId: this.searchData.userId,
-        username: this.searchData.username,
-      };
-      this.$http.get('/api/users', { params })
-        .then(response => {
-          this.tableData = response.data;
-        });
+  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()
+      }
     },
   },
-};
+  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()
+    },
+
+    // 获取数据列表
+    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])
+          }
+        }
+      })
+    },
+
+    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
+    },
+
+    /**
+     * 审批规则信息编辑模态框
+     * @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
+    },
+
+    // ======== 新增/编辑/删除方法 ========
+    /**
+     * 审批规则信息新增/编辑
+     */
+    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: '确定'
+            })
+          }
+        })
+      }
+    },
+
+    /**
+     * 审批规则信息删除
+     */
+    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(() => {
+      })
+    },
+
+    // ======== 列表操作方法 ========
+    /**
+     * 单机选中审批规则信息
+     * @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 () {
+    },
+  }
+}
 </script>