From b398b276b229430aa0bc897214f3f48b6fb978c7 Mon Sep 17 00:00:00 2001
From: hyt <958868763@qq.com>
Date: Fri, 30 May 2025 14:02:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BD=E7=9F=A5=E4=B8=AD=E5=8F=B0=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/apis/operationalModule.js             |  47 ++
 src/utils/loading.js                          |   2 +-
 .../compoments/dialogPage/index.vue           | 634 +++++++++++++++++
 .../operationalModule/index.vue               | 628 +++++++++++++++++
 .../compoments/dialogPage/index.vue           | 634 +++++++++++++++++
 src/views/operationalModule/index.vue         | 665 ++++++++++++++++++
 6 files changed, 2609 insertions(+), 1 deletion(-)
 create mode 100644 src/api/apis/operationalModule.js
 create mode 100644 src/views/businessMatter/operationalModule/compoments/dialogPage/index.vue
 create mode 100644 src/views/businessMatter/operationalModule/index.vue
 create mode 100644 src/views/operationalModule/compoments/dialogPage/index.vue
 create mode 100644 src/views/operationalModule/index.vue

diff --git a/src/api/apis/operationalModule.js b/src/api/apis/operationalModule.js
new file mode 100644
index 0000000..d74d415
--- /dev/null
+++ b/src/api/apis/operationalModule.js
@@ -0,0 +1,47 @@
+import request from "@/utils/request";
+//业务模块
+
+//新增模块
+export function queryByIdAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/businessModule/save",
+    method: "post",
+    data,
+  });
+}export function queryAllAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/businessModule/queryAll",
+    method: "post",
+    data,
+  });
+}export function businessModuledeleteAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/businessModule/delete",
+    method: "post",
+    data,
+  });
+}export function businessModuleUpdateAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/businessModule/update",
+    method: "post",
+    data,
+  });
+}export function queryMdmsByModuleIdAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/businessModuleMdm/queryMdmsByModuleId",
+    method: "post",
+    data,
+  });
+}export function businessModulequeryAllAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/mdm/queryAll",
+    method: "post",
+    data,
+  });
+}export function businessModuleMdmSaveListAPI(data) {
+  return request({
+    url: "/kangarooDataCenterV3/ae/conf/businessModuleMdm/saveList",
+    method: "post",
+    data,
+  });
+}
diff --git a/src/utils/loading.js b/src/utils/loading.js
index e0a8f84..ed68c81 100644
--- a/src/utils/loading.js
+++ b/src/utils/loading.js
@@ -3,7 +3,7 @@ import {
 } from 'element-ui'
 let appLoading
 
-export function openLoading(loadingName) {
+export function openLoading(loadingName='加载中') {
 	let loadingText
 	switch (loadingName) {
 		case 'submit':
diff --git a/src/views/businessMatter/operationalModule/compoments/dialogPage/index.vue b/src/views/businessMatter/operationalModule/compoments/dialogPage/index.vue
new file mode 100644
index 0000000..195682b
--- /dev/null
+++ b/src/views/businessMatter/operationalModule/compoments/dialogPage/index.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="recordContrast">
+    <div class="left">
+      <div class="leftTitle" style="display: flex;align-items: center;justify-content: space-between">
+        <div>单据类型</div>
+        <div class="icon" style="cursor: pointer" @click="rightAddHandle()">
+          <i class="el-icon-plus"></i>
+        </div>
+      </div>
+      <div class="showList">
+        <div class="showItem" v-for="(item,index) in billTypeList" :key="index"
+             :class="{active:item.id === billTypeClickID}" @click="billTypeClickHandle(item.id,item.name)"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="icon">
+            <i class="el-icon-edit" @click.stop="editRightTitle(item)" style="margin-right: 10px"></i>
+            <i class="el-icon-delete" style="color: red" @click.stop="delRightTitle(item)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="topBox">
+        <div class="searchBox">
+          <div>
+            <el-input v-model="searchObj.sourceAppName" :placeholder="'来源应用'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.targetAppName" :placeholder="'目标应用'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.sourceAppCode" :placeholder="'来源应用编码'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.targetAppCode" :placeholder="'目标应用编码'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div class="btnBox">
+            <el-button type="primary" size="small" icon="el-icon-search" @click="resetTable">查询</el-button>
+            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh">重置</el-button>
+          </div>
+        </div>
+        <div style="display: flex;align-items: center;justify-content: flex-end;">
+          <el-button
+              size="small"
+              :icon="item.icon"
+              @click="clickSave(item)"
+              :type="item.type ? item.type : 'primary'"
+              v-for="(item, index) in nowBtns"
+              :key="index"
+          >{{ item.menuName }}
+          </el-button>
+        </div>
+      </div>
+      <div class="table">
+        <base-table ref="customtable" :showIndex="false" :slotrow="true"
+                    tableHeight="calc(100vh - 170px)" :tableData="tableData" :tableColumn="tableColumn"
+                    @radioChange="radioChange" id="printMe"
+        >
+        </base-table>
+
+      </div>
+      <div class="page">
+        <base-page :pageSizesList="[20,50,100,150]" :pageModel.sync="pageModel" @onPageChange="pageChange"
+                   layout="total, sizes,prev, pager, next,jumper"
+        ></base-page>
+      </div>
+    </div>
+    <base-right-dialog
+        @handleClose="examineOperateDialog = false"
+        @handleConfirmClick="handleConfirmClick"
+        :dialogVisible="examineOperateDialog"
+        size="900px"
+        :appendBody="true"
+        :loading="true"
+        :footerShow="true"
+        :submitShow="true"
+        :title="dialogTitle +'档案对照'"
+        submitTitle="保存"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;" v-if="examineOperateDialog">
+        <base-form
+            ref="basicFormRefsName"
+            :formRow="basicFormForm"
+            :isFunBtn="false"
+            :spanWidth="'100px'"
+            justifyContent="flex-end"
+            :rules="basicFormRulers"
+            @onSelect="onSelect"
+            :view-status="statusView"
+        >
+        </base-form>
+
+      </div>
+    </base-right-dialog>
+    <base-dialog
+        :dialogVisible.sync="passwordDialogShow"
+        :closeModal="false"
+        :footerShow="true"
+        :title="passwordDialogTitle+'单据类型'"
+        width="400px"
+        top="20vh"
+        @handleConfirmClick="passwordChangeHandle"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;">
+        <div class="addDialog">
+          <div class="nameTitle">单据类型名称：</div>
+          <el-input v-model="billTypeADDName"></el-input>
+        </div>
+
+      </div>
+    </base-dialog>
+  </div>
+</template>
+
+
+<script>
+import {
+  DelArcCompareDataAPI,
+  DelArcTypeDataAPI,
+  GetArcCompareList,
+  GetArcCompareListAPI,
+  GetArcTypeListAPI,
+  GetBillListAPI,
+  GetLoginUserButtonsAPI, SaveArcCompareDataAPI, SaveArcTypeDataAPI
+} from '@/api/apis/buttonList'
+import basePage from '@/components/base/basePage/index.vue'
+import baseChoice from '@/components/base/baseChoice/index.vue'
+import baseDialog from '@/components/base/BaseNewDialog/index.vue'
+
+export default {
+  name: 'recordContrast',
+  components: { baseDialog, baseChoice, basePage },
+  data() {
+    return {
+      basicFormForm: [
+        {
+          elCol: [
+            {
+              label: '档案类型',
+              prop: 'arcTypeName',
+              tag: 'elInput',
+              span: 24,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '来源应用编码',
+              prop: 'sourceAppCode',
+              tag: 'elInput',
+              span: 12,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '来源应用名称',
+              prop: 'sourceAppID',
+              tag: 'elSelect',
+              options: [],
+              span: 12,
+              placeholder: '请选择'
+            },
+            {
+              label: '来源数据名称',
+              prop: 'sourceDataName',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '来源数据编码',
+              prop: 'sourceDataCode',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '目标应用编码',
+              prop: 'targetAppCode',
+              tag: 'elInput',
+              span: 12,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '目标应用名称',
+              prop: 'targetAppID',
+              tag: 'elSelect',
+              options: [],
+              span: 12,
+              placeholder: '请选择'
+            },
+            {
+              label: '目标数据名称',
+              prop: 'targetDataName',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '目标数据编码',
+              prop: 'targetDataCode',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            }
+
+          ]
+        }
+      ],
+      basicFormRulers: {
+        sourceAppCode: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceAppID: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceDataName: [
+          { required: true, message: '请输入来源数据名称', trigger: 'blur' }
+        ],
+        sourceDataCode: [
+          { required: true, message: '请输入来源数据编码', trigger: 'blur' }
+        ],
+        targetAppCode: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetAppID: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetDataName: [
+          { required: true, message: '请输入目标数据名称', trigger: 'blur' }
+        ],
+        targetDataCode: [
+          { required: true, message: '请输入目标数据编码', trigger: 'blur' }
+        ]
+      },
+      nowBtns: [],
+      billTypeName: '',
+      billTypeClickID: '',
+      billTypeClickName: '',
+      billTypeList: [
+        {
+          name: '人员对照',
+          id: 1
+        },
+        {
+          name: '人员对照',
+          id: 2
+        },
+        {
+          name: '人员对照',
+          id: 3
+        },
+        {
+          name: '人员对照',
+          id: 4
+        }
+      ],
+      searchObj: {},
+      pageModel: {
+        page: 1, //当前页码
+        limit: 20 //每页显示多少
+      },
+      selected: [],
+
+      tableColumn: [
+        {
+          label: '档案类型',
+          prop: 'arcTypeName',
+          width: '150px'
+        },
+        {
+          label: '来源应用',
+          prop: 'sourceAppName',
+          width: '150px'
+        },
+        {
+          label: '来源数据编码',
+          prop: 'sourceDataCode',
+          width: '150px'
+        },
+        {
+          label: '来源数据名称',
+          prop: 'sourceDataName'
+        },
+        {
+          label: '目标应用',
+          prop: 'targetAppName',
+          width: '150px'
+        },
+        {
+          label: '目标数据编码',
+          prop: 'targetDataCode',
+          width: '150px'
+        },
+        {
+          label: '目标数据名称',
+          prop: 'targetDataName'
+        }
+      ],
+      tableData: [],
+      dialogTitle: '新增',
+      examineOperateDialog: false,
+      statusView: false,
+      passwordDialogShow: false,
+      passwordDialogTitle: '新增',
+      billTypeADDName: '',
+      billTypeADDID: ''
+    }
+  },
+  methods: {
+    delRightTitle(item) {
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcTypeDataAPI({
+          arcTypeID: item.id
+        })
+        if (res.code == 1) {
+          this.$vmNews('删除成功', 'success')
+          this.billTypeClickName = ''
+          this.billTypeClickID = ''
+          this.getLeftList()
+          this.resetTable()
+        }
+      })
+    },
+    editRightTitle(item) {
+      this.billTypeADDName = item.name
+      this.billTypeADDID = item.id
+      this.passwordDialogTitle = '编辑'
+      this.passwordDialogShow = true
+    },
+    rightAddHandle() {
+      this.passwordDialogShow = true
+      this.passwordDialogTitle = '新增'
+      this.billTypeADDName = ''
+      this.billTypeADDID = ''
+    },
+    async passwordChangeHandle() {
+      if (!this.billTypeADDName) {
+        this.$vmNews('请输入单据类型名称')
+        return
+      }
+      let params = {
+        dataMain: {
+          'arcTypeName': this.billTypeADDName
+        }
+      }
+      if (this.passwordDialogTitle === '编辑') {
+        params.dataMain.arcTypeID = this.billTypeADDID
+      }
+      const res = await SaveArcTypeDataAPI(params)
+      if (res.code == 1) {
+        this.$vmNews('保存成功', 'success')
+        this.passwordDialogShow = false
+        this.getLeftList()
+      }
+    },
+    async getSelect() {
+      const res = await GetBillListAPI({
+        page: 1,
+        limit: 9999
+      })
+      res.data[1].forEach(item => {
+        item.label = item.appName
+        item.value = item.appID
+      })
+      this.basicFormForm[0].elCol[2].options = res.data[1]
+      this.basicFormForm[0].elCol[6].options = res.data[1]
+    },
+    async getLeftList() {
+      const res = await GetArcTypeListAPI({
+        arcTypeName: this.billTypeName
+      })
+      res.data[0].forEach((el) => {
+        el.name = el.arcTypeName
+        el.id = el.arcTypeID
+      })
+      this.billTypeList = res.data[0]
+    },
+    onSelect(val, index, indexRow, obj, row, form) {
+      if (row.prop === 'sourceAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'sourceAppCode', obj.appCode)
+      }
+      if (row.prop === 'targetAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'targetAppCode', obj.appCode)
+      }
+    },
+    async handleConfirmClick() {
+      await this.$refs.basicFormRefsName.$refs.ruleForm.validate()
+      const res = await SaveArcCompareDataAPI({
+        dataMain: {
+          ...this.$refs.basicFormRefsName.ruleForm
+        }
+      })
+      if (res.code == 1) {
+        this.$vmNews('保存成功', 'success')
+        this.examineOperateDialog = false
+        this.resetTable()
+      }
+    },
+    pageChange(model) {
+      this.pageModel.page = model.page
+      this.pageModel.limit = model.limit
+      this.getTableData()
+    },
+    async getTableData() {
+      const res = await GetArcCompareList({
+        ...this.pageModel,
+        ...this.searchObj,
+        arcTypeID: this.billTypeClickID
+      })
+      this.pageModel.total = res.data[0]
+      this.tableData = res.data[1]
+      this.$nextTick(() => {
+        this.$refs.customtable.clearRadioIndex()
+        this.selected = []
+      })
+    },
+    resetTable() {
+      this.tableData = []
+      this.pageModel.page = 1
+      this.selected = []
+      this.getTableData()
+    },
+    // 点击某条数据
+    radioChange(val) {
+      this.selected = []
+      this.selected.push(val)
+    },
+    // 删除
+    delOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcCompareDataAPI({
+          arcCompareID: this.selected[0].arcCompareID
+        })
+        if (res.code == 1) {
+          this.$vmNews('删除成功', 'success')
+          this.resetTable()
+        }
+      })
+    },
+    // 编辑
+    editOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.dialogTitle = '编辑'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$refs.basicFormRefsName.ruleForm = {
+          ...this.selected[0]
+        }
+      })
+    },
+    //新增
+    Operate() {
+      if (!this.billTypeClickName) {
+        this.$vmNews('请选择单据类型')
+        return
+      }
+      this.dialogTitle = '新增'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeName', this.billTypeClickName)
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeID', this.billTypeClickID)
+      })
+    },
+    refresh() {
+      this.searchObj = {}
+    },
+    //获取按钮（头部）
+    async buttonPermissions() {
+      const res = await GetLoginUserButtonsAPI({
+        page: 1, //当前页码
+        limit: 999, //每页显示多少
+        menuId: this.$route.meta.id, //树形分类id
+        Sequence: '', //排列方式
+        SequenceName: '', //需要排列的字段名
+        route: this.$route.path
+      })
+      if (res.code == 1) {
+        res.data[0].forEach((el) => {
+          el.menuName = el.nameCN
+          el.icon = el.icoName
+          el.type = el.style
+          el.name = el.nameCN
+        })
+        this.nowBtns = res.data[0]
+      }
+    },
+    billTypeClickHandle(id, name) {
+      this.billTypeClickID = id
+      this.billTypeClickName = name
+      this.resetTable()
+    },
+    //头部按钮统一调用方法
+    clickSave(item) {
+      this[item.btnFunction]()
+    }
+  },
+  mounted() {
+    this.buttonPermissions()
+    this.getLeftList()
+    this.getTableData()
+    this.getSelect()
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.addDialog {
+  display: flex;
+  align-items: center;
+
+  .nameTitle {
+    padding: 10px;
+    font-size: 14px;
+    color: #333;
+    margin-right: 10px;
+    width: 180px;
+    text-align: right;
+  }
+}
+
+.recordContrast {
+  display: flex;
+  overflow: hidden;
+  background-color: #f5f5f5;
+
+  .left {
+    width: 270px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-right: 5px;
+
+    .leftTitle {
+      color: #333;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    .topBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .searchBox {
+        display: flex;
+        align-items: center;
+
+        > div {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .table {
+      margin-top: 10px;
+    }
+  }
+}
+
+.searchBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 20px;
+
+  .input {
+    flex: 1;
+    margin-right: 5px;
+  }
+}
+
+.showList {
+  height: calc(100vh - 200px);
+  overflow: auto;
+  margin-top: 10px;
+
+  .showItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    cursor: pointer;
+
+    .icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: #ebeced;
+      border-radius: 4px;
+
+      .icon {
+        display: block !important;
+      }
+    }
+
+    &.active {
+      background-color: #ebeced !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/businessMatter/operationalModule/index.vue b/src/views/businessMatter/operationalModule/index.vue
new file mode 100644
index 0000000..6d1bdb2
--- /dev/null
+++ b/src/views/businessMatter/operationalModule/index.vue
@@ -0,0 +1,628 @@
+<template>
+  <div class="recordContrast">
+    <div class="left">
+      <div class="leftTitle" style="display: flex;align-items: center;justify-content: space-between">
+        <div>单据类型</div>
+        <div class="icon" style="cursor: pointer" @click="rightAddHandle()">
+          <i class="el-icon-plus"></i>
+        </div>
+      </div>
+      <div class="showList">
+        <div class="showItem" v-for="(item,index) in billTypeList" :key="index"
+             :class="{active:item.id === billTypeClickID}" @click="billTypeClickHandle(item.id,item.name)"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="icon">
+            <i class="el-icon-edit" @click.stop="editRightTitle(item)" style="margin-right: 10px"></i>
+            <i class="el-icon-delete" style="color: red" @click.stop="delRightTitle(item)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="topBox">
+        <div class="searchBox">
+          <div>
+            <el-input v-model="searchObj.sourceAppName" :placeholder="'来源应用'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.targetAppName" :placeholder="'目标应用'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.sourceAppCode" :placeholder="'来源应用编码'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.targetAppCode" :placeholder="'目标应用编码'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div class="btnBox">
+            <el-button type="primary" size="small" icon="el-icon-search" @click="resetTable">查询</el-button>
+            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh">重置</el-button>
+          </div>
+        </div>
+        <div style="display: flex;align-items: center;justify-content: flex-end;">
+          <el-button
+            size="small"
+            :icon="item.icon"
+            @click="clickSave(item)"
+            :type="item.type ? item.type : 'primary'"
+            v-for="(item, index) in nowBtns"
+            :key="index"
+          >{{ item.menuName }}
+          </el-button>
+        </div>
+      </div>
+      <div class="table">
+        <base-table ref="customtable" :showIndex="false" :slotrow="true"
+                    tableHeight="calc(100vh - 170px)" :tableData="tableData" :tableColumn="tableColumn"
+                    @radioChange="radioChange" id="printMe"
+        >
+        </base-table>
+      </div>
+    </div>
+    <base-right-dialog
+      @handleClose="examineOperateDialog = false"
+      @handleConfirmClick="handleConfirmClick"
+      :dialogVisible="examineOperateDialog"
+      size="900px"
+      :appendBody="true"
+      :loading="true"
+      :footerShow="true"
+      :submitShow="true"
+      :title="dialogTitle +'档案对照'"
+      submitTitle="保存"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;" v-if="examineOperateDialog">
+        <base-form
+          ref="basicFormRefsName"
+          :formRow="basicFormForm"
+          :isFunBtn="false"
+          :spanWidth="'100px'"
+          justifyContent="flex-end"
+          :rules="basicFormRulers"
+          @onSelect="onSelect"
+          :view-status="statusView"
+        >
+        </base-form>
+
+      </div>
+    </base-right-dialog>
+    <base-dialog
+      :dialogVisible.sync="passwordDialogShow"
+      :closeModal="false"
+      :footerShow="true"
+      :title="passwordDialogTitle+'单据类型'"
+      width="400px"
+      top="20vh"
+      @handleConfirmClick="passwordChangeHandle"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;">
+        <div class="addDialog">
+          <div class="nameTitle">单据类型名称：</div>
+          <el-input v-model="billTypeADDName"></el-input>
+        </div>
+
+      </div>
+    </base-dialog>
+  </div>
+</template>
+
+
+<script>
+import {
+  DelArcCompareDataAPI,
+  DelArcTypeDataAPI,
+  GetArcCompareList,
+  GetArcCompareListAPI,
+  GetArcTypeListAPI,
+  GetBillListAPI,
+  GetLoginUserButtonsAPI, SaveArcCompareDataAPI, SaveArcTypeDataAPI
+} from '@/api/apis/buttonList'
+import basePage from '@/components/base/basePage/index.vue'
+import baseChoice from '@/components/base/baseChoice/index.vue'
+import baseDialog from '@/components/base/BaseNewDialog/index.vue'
+import { queryAllAPI, queryByIdAPI } from '@/api/apis/operationalModule'
+
+export default {
+  name: 'recordContrast',
+  components: { baseDialog, baseChoice, basePage },
+  data() {
+    return {
+      basicFormForm: [
+        {
+          elCol: [
+            {
+              label: '档案类型',
+              prop: 'arcTypeName',
+              tag: 'elInput',
+              span: 24,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '来源应用编码',
+              prop: 'sourceAppCode',
+              tag: 'elInput',
+              span: 12,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '来源应用名称',
+              prop: 'sourceAppID',
+              tag: 'elSelect',
+              options: [],
+              span: 12,
+              placeholder: '请选择'
+            },
+            {
+              label: '来源数据名称',
+              prop: 'sourceDataName',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '来源数据编码',
+              prop: 'sourceDataCode',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '目标应用编码',
+              prop: 'targetAppCode',
+              tag: 'elInput',
+              span: 12,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '目标应用名称',
+              prop: 'targetAppID',
+              tag: 'elSelect',
+              options: [],
+              span: 12,
+              placeholder: '请选择'
+            },
+            {
+              label: '目标数据名称',
+              prop: 'targetDataName',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '目标数据编码',
+              prop: 'targetDataCode',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            }
+
+          ]
+        }
+      ],
+      basicFormRulers: {
+        sourceAppCode: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceAppID: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceDataName: [
+          { required: true, message: '请输入来源数据名称', trigger: 'blur' }
+        ],
+        sourceDataCode: [
+          { required: true, message: '请输入来源数据编码', trigger: 'blur' }
+        ],
+        targetAppCode: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetAppID: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetDataName: [
+          { required: true, message: '请输入目标数据名称', trigger: 'blur' }
+        ],
+        targetDataCode: [
+          { required: true, message: '请输入目标数据编码', trigger: 'blur' }
+        ]
+      },
+      nowBtns: [],
+      billTypeName: '',
+      billTypeClickID: '',
+      billTypeClickName: '',
+      billTypeList: [
+        {
+          name: '人员对照',
+          id: 1
+        },
+        {
+          name: '人员对照',
+          id: 2
+        },
+        {
+          name: '人员对照',
+          id: 3
+        },
+        {
+          name: '人员对照',
+          id: 4
+        }
+      ],
+      searchObj: {},
+      pageModel: {
+        page: 1, //当前页码
+        limit: 20 //每页显示多少
+      },
+      selected: [],
+
+      tableColumn: [
+        {
+          label: '档案类型',
+          prop: 'arcTypeName',
+          width: '150px'
+        },
+        {
+          label: '来源应用',
+          prop: 'sourceAppName',
+          width: '150px'
+        },
+        {
+          label: '来源数据编码',
+          prop: 'sourceDataCode',
+          width: '150px'
+        },
+        {
+          label: '来源数据名称',
+          prop: 'sourceDataName'
+        },
+        {
+          label: '目标应用',
+          prop: 'targetAppName',
+          width: '150px'
+        },
+        {
+          label: '目标数据编码',
+          prop: 'targetDataCode',
+          width: '150px'
+        },
+        {
+          label: '目标数据名称',
+          prop: 'targetDataName'
+        }
+      ],
+      tableData: [],
+      dialogTitle: '新增',
+      examineOperateDialog: false,
+      statusView: false,
+      passwordDialogShow: false,
+      passwordDialogTitle: '新增',
+      billTypeADDName: '',
+      billTypeADDID: ''
+    }
+  },
+  methods: {
+    delRightTitle(item) {
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcTypeDataAPI({
+          arcTypeID: item.id
+        })
+        if (res.code == 1) {
+          this.$vmNews('删除成功', 'success')
+          this.billTypeClickName = ''
+          this.billTypeClickID = ''
+          this.getLeftList()
+          this.resetTable()
+        }
+      })
+    },
+    editRightTitle(item) {
+      this.billTypeADDName = item.name
+      this.billTypeADDID = item.id
+      this.passwordDialogTitle = '编辑'
+      this.passwordDialogShow = true
+    },
+    rightAddHandle() {
+      this.passwordDialogShow = true
+      this.passwordDialogTitle = '新增'
+      this.billTypeADDName = ''
+      this.billTypeADDID = ''
+    },
+    async passwordChangeHandle() {
+      if (!this.billTypeADDName) {
+        this.$vmNews('请输入单据类型名称')
+        return
+      }
+      let params = {
+        dataMain: {
+          'moduleName': this.billTypeADDName
+        }
+      }
+      if (this.passwordDialogTitle === '编辑') {
+        params.dataMain.arcTypeID = this.billTypeADDID
+      }
+      const res = await queryByIdAPI(params)
+      if (res.code == 1) {
+        this.$vmNews('保存成功', 'success')
+        this.passwordDialogShow = false
+        this.getLeftList()
+      }
+    },
+    async getSelect() {
+      const res = await GetBillListAPI({
+        page: 1,
+        limit: 9999
+      })
+      res.data[1].forEach(item => {
+        item.label = item.appName
+        item.value = item.appID
+      })
+      this.basicFormForm[0].elCol[2].options = res.data[1]
+      this.basicFormForm[0].elCol[6].options = res.data[1]
+    },
+    async getLeftList() {
+      const res = await queryAllAPI({
+      })
+      res.data[1].forEach((el) => {
+        el.name = el.arcTypeName
+        el.id = el.arcTypeID
+      })
+      this.billTypeList = res.data[0]
+    },
+    onSelect(val, index, indexRow, obj, row, form) {
+      if (row.prop === 'sourceAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'sourceAppCode', obj.appCode)
+      }
+      if (row.prop === 'targetAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'targetAppCode', obj.appCode)
+      }
+    },
+    async handleConfirmClick() {
+      await this.$refs.basicFormRefsName.$refs.ruleForm.validate()
+      const res = await SaveArcCompareDataAPI({
+        dataMain: {
+          ...this.$refs.basicFormRefsName.ruleForm
+        }
+      })
+      if (res.code == 1) {
+        this.$vmNews('保存成功', 'success')
+        this.examineOperateDialog = false
+        this.resetTable()
+      }
+    },
+    pageChange(model) {
+      this.pageModel.page = model.page
+      this.pageModel.limit = model.limit
+      this.getTableData()
+    },
+    async getTableData() {
+      const res = await GetArcCompareList({
+        ...this.pageModel,
+        ...this.searchObj,
+        arcTypeID: this.billTypeClickID
+      })
+      this.pageModel.total = res.data[0]
+      this.tableData = res.data[1]
+      this.$nextTick(() => {
+        this.$refs.customtable.clearRadioIndex()
+        this.selected = []
+      })
+    },
+    resetTable() {
+      this.tableData = []
+      this.pageModel.page = 1
+      this.selected = []
+      this.getTableData()
+    },
+    // 点击某条数据
+    radioChange(val) {
+      this.selected = []
+      this.selected.push(val)
+    },
+    // 删除
+    delOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcCompareDataAPI({
+          arcCompareID: this.selected[0].arcCompareID
+        })
+        if (res.code == 1) {
+          this.$vmNews('删除成功', 'success')
+          this.resetTable()
+        }
+      })
+    },
+    // 编辑
+    editOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.dialogTitle = '编辑'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$refs.basicFormRefsName.ruleForm = {
+          ...this.selected[0]
+        }
+      })
+    },
+    //新增
+    Operate() {
+      if (!this.billTypeClickName) {
+        this.$vmNews('请选择单据类型')
+        return
+      }
+      this.dialogTitle = '新增'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeName', this.billTypeClickName)
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeID', this.billTypeClickID)
+      })
+    },
+    refresh() {
+      this.searchObj = {}
+    },
+    //获取按钮（头部）
+    async buttonPermissions() {
+      const res = await GetLoginUserButtonsAPI({
+        page: 1, //当前页码
+        limit: 999, //每页显示多少
+        menuId: this.$route.meta.id, //树形分类id
+        Sequence: '', //排列方式
+        SequenceName: '', //需要排列的字段名
+        route: this.$route.path
+      })
+      if (res.code == 1) {
+        res.data[0].forEach((el) => {
+          el.menuName = el.nameCN
+          el.icon = el.icoName
+          el.type = el.style
+          el.name = el.nameCN
+        })
+        this.nowBtns = res.data[0]
+      }
+    },
+    billTypeClickHandle(id, name) {
+      this.billTypeClickID = id
+      this.billTypeClickName = name
+      this.resetTable()
+    },
+    //头部按钮统一调用方法
+    clickSave(item) {
+      this[item.btnFunction]()
+    }
+  },
+  mounted() {
+    // this.buttonPermissions()
+    this.getLeftList()
+    // this.getTableData()
+    // this.getSelect()
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.addDialog {
+  display: flex;
+  align-items: center;
+
+  .nameTitle {
+    padding: 10px;
+    font-size: 14px;
+    color: #333;
+    margin-right: 10px;
+    width: 180px;
+    text-align: right;
+  }
+}
+
+.recordContrast {
+  display: flex;
+  overflow: hidden;
+  background-color: #f5f5f5;
+
+  .left {
+    width: 270px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-right: 5px;
+
+    .leftTitle {
+      color: #333;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    .topBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .searchBox {
+        display: flex;
+        align-items: center;
+
+        > div {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .table {
+      margin-top: 10px;
+    }
+  }
+}
+
+.searchBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 20px;
+
+  .input {
+    flex: 1;
+    margin-right: 5px;
+  }
+}
+
+.showList {
+  height: calc(100vh - 200px);
+  overflow: auto;
+  margin-top: 10px;
+
+  .showItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    cursor: pointer;
+
+    .icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: #ebeced;
+      border-radius: 4px;
+
+      .icon {
+        display: block !important;
+      }
+    }
+
+    &.active {
+      background-color: #ebeced !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/operationalModule/compoments/dialogPage/index.vue b/src/views/operationalModule/compoments/dialogPage/index.vue
new file mode 100644
index 0000000..195682b
--- /dev/null
+++ b/src/views/operationalModule/compoments/dialogPage/index.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="recordContrast">
+    <div class="left">
+      <div class="leftTitle" style="display: flex;align-items: center;justify-content: space-between">
+        <div>单据类型</div>
+        <div class="icon" style="cursor: pointer" @click="rightAddHandle()">
+          <i class="el-icon-plus"></i>
+        </div>
+      </div>
+      <div class="showList">
+        <div class="showItem" v-for="(item,index) in billTypeList" :key="index"
+             :class="{active:item.id === billTypeClickID}" @click="billTypeClickHandle(item.id,item.name)"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="icon">
+            <i class="el-icon-edit" @click.stop="editRightTitle(item)" style="margin-right: 10px"></i>
+            <i class="el-icon-delete" style="color: red" @click.stop="delRightTitle(item)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="topBox">
+        <div class="searchBox">
+          <div>
+            <el-input v-model="searchObj.sourceAppName" :placeholder="'来源应用'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.targetAppName" :placeholder="'目标应用'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.sourceAppCode" :placeholder="'来源应用编码'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div>
+            <el-input v-model="searchObj.targetAppCode" :placeholder="'目标应用编码'" @keydown.native.enter="resetTable"
+                      clearable
+            ></el-input>
+          </div>
+          <div class="btnBox">
+            <el-button type="primary" size="small" icon="el-icon-search" @click="resetTable">查询</el-button>
+            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh">重置</el-button>
+          </div>
+        </div>
+        <div style="display: flex;align-items: center;justify-content: flex-end;">
+          <el-button
+              size="small"
+              :icon="item.icon"
+              @click="clickSave(item)"
+              :type="item.type ? item.type : 'primary'"
+              v-for="(item, index) in nowBtns"
+              :key="index"
+          >{{ item.menuName }}
+          </el-button>
+        </div>
+      </div>
+      <div class="table">
+        <base-table ref="customtable" :showIndex="false" :slotrow="true"
+                    tableHeight="calc(100vh - 170px)" :tableData="tableData" :tableColumn="tableColumn"
+                    @radioChange="radioChange" id="printMe"
+        >
+        </base-table>
+
+      </div>
+      <div class="page">
+        <base-page :pageSizesList="[20,50,100,150]" :pageModel.sync="pageModel" @onPageChange="pageChange"
+                   layout="total, sizes,prev, pager, next,jumper"
+        ></base-page>
+      </div>
+    </div>
+    <base-right-dialog
+        @handleClose="examineOperateDialog = false"
+        @handleConfirmClick="handleConfirmClick"
+        :dialogVisible="examineOperateDialog"
+        size="900px"
+        :appendBody="true"
+        :loading="true"
+        :footerShow="true"
+        :submitShow="true"
+        :title="dialogTitle +'档案对照'"
+        submitTitle="保存"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;" v-if="examineOperateDialog">
+        <base-form
+            ref="basicFormRefsName"
+            :formRow="basicFormForm"
+            :isFunBtn="false"
+            :spanWidth="'100px'"
+            justifyContent="flex-end"
+            :rules="basicFormRulers"
+            @onSelect="onSelect"
+            :view-status="statusView"
+        >
+        </base-form>
+
+      </div>
+    </base-right-dialog>
+    <base-dialog
+        :dialogVisible.sync="passwordDialogShow"
+        :closeModal="false"
+        :footerShow="true"
+        :title="passwordDialogTitle+'单据类型'"
+        width="400px"
+        top="20vh"
+        @handleConfirmClick="passwordChangeHandle"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;">
+        <div class="addDialog">
+          <div class="nameTitle">单据类型名称：</div>
+          <el-input v-model="billTypeADDName"></el-input>
+        </div>
+
+      </div>
+    </base-dialog>
+  </div>
+</template>
+
+
+<script>
+import {
+  DelArcCompareDataAPI,
+  DelArcTypeDataAPI,
+  GetArcCompareList,
+  GetArcCompareListAPI,
+  GetArcTypeListAPI,
+  GetBillListAPI,
+  GetLoginUserButtonsAPI, SaveArcCompareDataAPI, SaveArcTypeDataAPI
+} from '@/api/apis/buttonList'
+import basePage from '@/components/base/basePage/index.vue'
+import baseChoice from '@/components/base/baseChoice/index.vue'
+import baseDialog from '@/components/base/BaseNewDialog/index.vue'
+
+export default {
+  name: 'recordContrast',
+  components: { baseDialog, baseChoice, basePage },
+  data() {
+    return {
+      basicFormForm: [
+        {
+          elCol: [
+            {
+              label: '档案类型',
+              prop: 'arcTypeName',
+              tag: 'elInput',
+              span: 24,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '来源应用编码',
+              prop: 'sourceAppCode',
+              tag: 'elInput',
+              span: 12,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '来源应用名称',
+              prop: 'sourceAppID',
+              tag: 'elSelect',
+              options: [],
+              span: 12,
+              placeholder: '请选择'
+            },
+            {
+              label: '来源数据名称',
+              prop: 'sourceDataName',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '来源数据编码',
+              prop: 'sourceDataCode',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '目标应用编码',
+              prop: 'targetAppCode',
+              tag: 'elInput',
+              span: 12,
+              disabled: true,
+              placeholder: '自动带出'
+            },
+            {
+              label: '目标应用名称',
+              prop: 'targetAppID',
+              tag: 'elSelect',
+              options: [],
+              span: 12,
+              placeholder: '请选择'
+            },
+            {
+              label: '目标数据名称',
+              prop: 'targetDataName',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            },
+            {
+              label: '目标数据编码',
+              prop: 'targetDataCode',
+              tag: 'elInput',
+              span: 12,
+              placeholder: '请输入'
+            }
+
+          ]
+        }
+      ],
+      basicFormRulers: {
+        sourceAppCode: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceAppID: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceDataName: [
+          { required: true, message: '请输入来源数据名称', trigger: 'blur' }
+        ],
+        sourceDataCode: [
+          { required: true, message: '请输入来源数据编码', trigger: 'blur' }
+        ],
+        targetAppCode: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetAppID: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetDataName: [
+          { required: true, message: '请输入目标数据名称', trigger: 'blur' }
+        ],
+        targetDataCode: [
+          { required: true, message: '请输入目标数据编码', trigger: 'blur' }
+        ]
+      },
+      nowBtns: [],
+      billTypeName: '',
+      billTypeClickID: '',
+      billTypeClickName: '',
+      billTypeList: [
+        {
+          name: '人员对照',
+          id: 1
+        },
+        {
+          name: '人员对照',
+          id: 2
+        },
+        {
+          name: '人员对照',
+          id: 3
+        },
+        {
+          name: '人员对照',
+          id: 4
+        }
+      ],
+      searchObj: {},
+      pageModel: {
+        page: 1, //当前页码
+        limit: 20 //每页显示多少
+      },
+      selected: [],
+
+      tableColumn: [
+        {
+          label: '档案类型',
+          prop: 'arcTypeName',
+          width: '150px'
+        },
+        {
+          label: '来源应用',
+          prop: 'sourceAppName',
+          width: '150px'
+        },
+        {
+          label: '来源数据编码',
+          prop: 'sourceDataCode',
+          width: '150px'
+        },
+        {
+          label: '来源数据名称',
+          prop: 'sourceDataName'
+        },
+        {
+          label: '目标应用',
+          prop: 'targetAppName',
+          width: '150px'
+        },
+        {
+          label: '目标数据编码',
+          prop: 'targetDataCode',
+          width: '150px'
+        },
+        {
+          label: '目标数据名称',
+          prop: 'targetDataName'
+        }
+      ],
+      tableData: [],
+      dialogTitle: '新增',
+      examineOperateDialog: false,
+      statusView: false,
+      passwordDialogShow: false,
+      passwordDialogTitle: '新增',
+      billTypeADDName: '',
+      billTypeADDID: ''
+    }
+  },
+  methods: {
+    delRightTitle(item) {
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcTypeDataAPI({
+          arcTypeID: item.id
+        })
+        if (res.code == 1) {
+          this.$vmNews('删除成功', 'success')
+          this.billTypeClickName = ''
+          this.billTypeClickID = ''
+          this.getLeftList()
+          this.resetTable()
+        }
+      })
+    },
+    editRightTitle(item) {
+      this.billTypeADDName = item.name
+      this.billTypeADDID = item.id
+      this.passwordDialogTitle = '编辑'
+      this.passwordDialogShow = true
+    },
+    rightAddHandle() {
+      this.passwordDialogShow = true
+      this.passwordDialogTitle = '新增'
+      this.billTypeADDName = ''
+      this.billTypeADDID = ''
+    },
+    async passwordChangeHandle() {
+      if (!this.billTypeADDName) {
+        this.$vmNews('请输入单据类型名称')
+        return
+      }
+      let params = {
+        dataMain: {
+          'arcTypeName': this.billTypeADDName
+        }
+      }
+      if (this.passwordDialogTitle === '编辑') {
+        params.dataMain.arcTypeID = this.billTypeADDID
+      }
+      const res = await SaveArcTypeDataAPI(params)
+      if (res.code == 1) {
+        this.$vmNews('保存成功', 'success')
+        this.passwordDialogShow = false
+        this.getLeftList()
+      }
+    },
+    async getSelect() {
+      const res = await GetBillListAPI({
+        page: 1,
+        limit: 9999
+      })
+      res.data[1].forEach(item => {
+        item.label = item.appName
+        item.value = item.appID
+      })
+      this.basicFormForm[0].elCol[2].options = res.data[1]
+      this.basicFormForm[0].elCol[6].options = res.data[1]
+    },
+    async getLeftList() {
+      const res = await GetArcTypeListAPI({
+        arcTypeName: this.billTypeName
+      })
+      res.data[0].forEach((el) => {
+        el.name = el.arcTypeName
+        el.id = el.arcTypeID
+      })
+      this.billTypeList = res.data[0]
+    },
+    onSelect(val, index, indexRow, obj, row, form) {
+      if (row.prop === 'sourceAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'sourceAppCode', obj.appCode)
+      }
+      if (row.prop === 'targetAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'targetAppCode', obj.appCode)
+      }
+    },
+    async handleConfirmClick() {
+      await this.$refs.basicFormRefsName.$refs.ruleForm.validate()
+      const res = await SaveArcCompareDataAPI({
+        dataMain: {
+          ...this.$refs.basicFormRefsName.ruleForm
+        }
+      })
+      if (res.code == 1) {
+        this.$vmNews('保存成功', 'success')
+        this.examineOperateDialog = false
+        this.resetTable()
+      }
+    },
+    pageChange(model) {
+      this.pageModel.page = model.page
+      this.pageModel.limit = model.limit
+      this.getTableData()
+    },
+    async getTableData() {
+      const res = await GetArcCompareList({
+        ...this.pageModel,
+        ...this.searchObj,
+        arcTypeID: this.billTypeClickID
+      })
+      this.pageModel.total = res.data[0]
+      this.tableData = res.data[1]
+      this.$nextTick(() => {
+        this.$refs.customtable.clearRadioIndex()
+        this.selected = []
+      })
+    },
+    resetTable() {
+      this.tableData = []
+      this.pageModel.page = 1
+      this.selected = []
+      this.getTableData()
+    },
+    // 点击某条数据
+    radioChange(val) {
+      this.selected = []
+      this.selected.push(val)
+    },
+    // 删除
+    delOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcCompareDataAPI({
+          arcCompareID: this.selected[0].arcCompareID
+        })
+        if (res.code == 1) {
+          this.$vmNews('删除成功', 'success')
+          this.resetTable()
+        }
+      })
+    },
+    // 编辑
+    editOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.dialogTitle = '编辑'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$refs.basicFormRefsName.ruleForm = {
+          ...this.selected[0]
+        }
+      })
+    },
+    //新增
+    Operate() {
+      if (!this.billTypeClickName) {
+        this.$vmNews('请选择单据类型')
+        return
+      }
+      this.dialogTitle = '新增'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeName', this.billTypeClickName)
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeID', this.billTypeClickID)
+      })
+    },
+    refresh() {
+      this.searchObj = {}
+    },
+    //获取按钮（头部）
+    async buttonPermissions() {
+      const res = await GetLoginUserButtonsAPI({
+        page: 1, //当前页码
+        limit: 999, //每页显示多少
+        menuId: this.$route.meta.id, //树形分类id
+        Sequence: '', //排列方式
+        SequenceName: '', //需要排列的字段名
+        route: this.$route.path
+      })
+      if (res.code == 1) {
+        res.data[0].forEach((el) => {
+          el.menuName = el.nameCN
+          el.icon = el.icoName
+          el.type = el.style
+          el.name = el.nameCN
+        })
+        this.nowBtns = res.data[0]
+      }
+    },
+    billTypeClickHandle(id, name) {
+      this.billTypeClickID = id
+      this.billTypeClickName = name
+      this.resetTable()
+    },
+    //头部按钮统一调用方法
+    clickSave(item) {
+      this[item.btnFunction]()
+    }
+  },
+  mounted() {
+    this.buttonPermissions()
+    this.getLeftList()
+    this.getTableData()
+    this.getSelect()
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.addDialog {
+  display: flex;
+  align-items: center;
+
+  .nameTitle {
+    padding: 10px;
+    font-size: 14px;
+    color: #333;
+    margin-right: 10px;
+    width: 180px;
+    text-align: right;
+  }
+}
+
+.recordContrast {
+  display: flex;
+  overflow: hidden;
+  background-color: #f5f5f5;
+
+  .left {
+    width: 270px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-right: 5px;
+
+    .leftTitle {
+      color: #333;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    .topBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .searchBox {
+        display: flex;
+        align-items: center;
+
+        > div {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .table {
+      margin-top: 10px;
+    }
+  }
+}
+
+.searchBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 20px;
+
+  .input {
+    flex: 1;
+    margin-right: 5px;
+  }
+}
+
+.showList {
+  height: calc(100vh - 200px);
+  overflow: auto;
+  margin-top: 10px;
+
+  .showItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    cursor: pointer;
+
+    .icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: #ebeced;
+      border-radius: 4px;
+
+      .icon {
+        display: block !important;
+      }
+    }
+
+    &.active {
+      background-color: #ebeced !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/operationalModule/index.vue b/src/views/operationalModule/index.vue
new file mode 100644
index 0000000..4215356
--- /dev/null
+++ b/src/views/operationalModule/index.vue
@@ -0,0 +1,665 @@
+<script src="../../api/apis/operationalModule.js"></script>
+<template>
+  <div class="recordContrast">
+    <div class="left">
+      <div class="leftTitle" style="display: flex;align-items: center;justify-content: space-between">
+        <div>业务模块</div>
+        <div class="icon" style="cursor: pointer" @click="rightAddHandle()">
+          <i class="el-icon-plus"></i>
+        </div>
+      </div>
+      <div class="showList">
+        <div class="showItem" v-for="(item,index) in billTypeList" :key="index"
+             :class="{active:item.id === billTypeClickID}" @click="billTypeClickHandle(item.id,item.name)"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="icon">
+            <i class="el-icon-edit" @click.stop="editRightTitle(item)" style="margin-right: 10px"></i>
+            <i class="el-icon-delete" style="color: red" @click.stop="delRightTitle(item)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="topBox">
+        <div class="searchBox">
+        </div>
+        <div style="display: flex;align-items: center;justify-content: flex-end;">
+          <el-button
+            size="small"
+            :icon="item.icon"
+            @click="clickSave(item)"
+            :type="item.type ? item.type : 'primary'"
+            v-for="(item, index) in nowBtns"
+            :key="index"
+          >{{ item.menuName }}
+          </el-button>
+        </div>
+      </div>
+      <div class="table">
+        <base-table ref="customtable" :showIndex="false" :slotrow="true"
+                    tableHeight="calc(100vh - 170px)" :tableData="tableData" :tableColumn="tableColumn"
+                    @radioChange="radioChange" id="printMe"
+        >
+        </base-table>
+
+      </div>
+    </div>
+    <base-right-dialog
+      @handleClose="examineOperateDialog = false"
+      @handleConfirmClick="handleConfirmClick"
+      :dialogVisible="examineOperateDialog"
+      size="900px"
+      :appendBody="true"
+      :loading="true"
+      :footerShow="true"
+      :submitShow="true"
+      :title="dialogTitle +'主数据'"
+      submitTitle="保存"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;" v-if="examineOperateDialog">
+        <base-form
+          ref="basicFormRefsName"
+          :formRow="basicFormForm"
+          :isFunBtn="false"
+          :spanWidth="'100px'"
+          justifyContent="flex-end"
+          :rules="basicFormRulers"
+          @onSelect="onSelect"
+          :view-status="statusView"
+          @elDialogClick="elDialogClick"
+        >
+        </base-form>
+
+      </div>
+    </base-right-dialog>
+    <base-dialog
+      :dialogVisible.sync="passwordDialogShow"
+      :closeModal="false"
+      :footerShow="true"
+      :title="passwordDialogTitle+'业务模块'"
+      width="400px"
+      top="20vh"
+      @handleConfirmClick="passwordChangeHandle"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;">
+        <div class="addDialog">
+          <div class="nameTitle">业务模块名称：</div>
+          <el-input v-model="billTypeADDName"></el-input>
+        </div>
+
+      </div>
+    </base-dialog>
+    <base-dialog
+      :dialogVisible.sync="masterDialog"
+      :closeModal="false"
+      :footerShow="true"
+      title="选择主数据"
+      width="80%"
+      top="10vh"
+      @handleConfirmClick="masterPickDialog"
+    >
+      <div class="rightDialogClass_main" style="background-color: #fff;" v-if="masterDialog">
+        <baseChoice ref="baseChoice" :tableData="masterTableData" :tableColumn="masterTableColumn"></baseChoice>
+
+      </div>
+    </base-dialog>
+  </div>
+</template>
+
+
+<script>
+import basePage from '@/components/base/basePage/index.vue'
+import baseChoice from '@/components/base/baseChoice/index.vue'
+import baseDialog from '@/components/base/BaseNewDialog/index.vue'
+import baseRightDialog from '@/components/base/baseRightDialog'
+import baseTable from '@/components/base/baseTable/index.vue'
+import baseForm from '@/components/base/baseNewForm'
+
+import {
+  businessModuledeleteAPI, businessModuleMdmSaveListAPI, businessModulequeryAllAPI,
+  businessModuleUpdateAPI,
+  queryAllAPI,
+  queryByIdAPI, queryMdmsByModuleIdAPI
+} from '@/api/apis/operationalModule'
+import { GetLoginUserButtonsAPI } from '@/api/apis/buttonList'
+
+export default {
+  name: 'recordContrast',
+  components: { baseDialog, baseChoice, basePage, baseTable, baseRightDialog, baseForm },
+  data() {
+    return {
+      masterTableData: [],
+      masterTableColumn: [
+        {
+          label: '主数据名称',
+          prop: 'mdmName'
+        },
+        {
+          label: '主数据编码',
+          prop: 'mdmCode'
+        }
+      ],
+      masterDialog: false,
+      basicFormForm: [
+        {
+          elCol: [
+            {
+              label: '主数据',
+              prop: 'mdmName',
+              tag: 'elDialog',
+              span: 24,
+              disabled: false,
+              placeholder: '点击选择'
+            },
+            {
+              label: '备注',
+              prop: 'remark',
+              tag: 'elInput',
+              type: 'textarea',
+              span: 24
+            }
+          ]
+        }
+      ],
+      basicFormRulers: {
+        mdmName: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceAppID: [
+          { required: true, message: '请选择来源应用', trigger: 'change' }
+        ],
+        sourceDataName: [
+          { required: true, message: '请输入来源数据名称', trigger: 'blur' }
+        ],
+        sourceDataCode: [
+          { required: true, message: '请输入来源数据编码', trigger: 'blur' }
+        ],
+        targetAppCode: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetAppID: [
+          { required: true, message: '请选择目标应用', trigger: 'change' }
+        ],
+        targetDataName: [
+          { required: true, message: '请输入目标数据名称', trigger: 'blur' }
+        ],
+        targetDataCode: [
+          { required: true, message: '请输入目标数据编码', trigger: 'blur' }
+        ]
+      },
+      nowBtns: [],
+      billTypeName: '',
+      billTypeClickID: '',
+      billTypeClickName: '',
+      billTypeList: [
+        {
+          name: '人员对照',
+          id: 1
+        },
+        {
+          name: '人员对照',
+          id: 2
+        },
+        {
+          name: '人员对照',
+          id: 3
+        },
+        {
+          name: '人员对照',
+          id: 4
+        }
+      ],
+      searchObj: {},
+      pageModel: {
+        page: 1, //当前页码
+        limit: 20 //每页显示多少
+      },
+      selected: [],
+
+      tableColumn: [
+        {
+          label: '主数据code',
+          prop: 'mdmCode'
+        },
+        {
+          label: '主数据name',
+          prop: 'mdmName'
+        }
+      ],
+      tableData: [],
+      dialogTitle: '新增',
+      examineOperateDialog: false,
+      statusView: false,
+      passwordDialogShow: false,
+      passwordDialogTitle: '新增',
+      billTypeADDName: '',
+      billTypeADDID: ''
+    }
+  },
+  methods: {
+    masterPickDialog() {
+      if (!this.$refs.baseChoice.optionData.id) {
+        this.$vmNews('请选择主数据')
+        return
+      }
+      let row = this.$refs.baseChoice.optionData
+      this.$set(this.$refs.basicFormRefsName.ruleForm, 'mdmName', row.mdmName)
+      this.$set(this.$refs.basicFormRefsName.ruleForm, 'mdmId', row.id)
+      this.$set(this.$refs.basicFormRefsName.ruleForm, 'mdmCode', row.mdmCode)
+      this.masterDialog = false
+    },
+    async elDialogClick(row, index) {
+      this.masterDialog = true
+      const res = await businessModulequeryAllAPI({})
+      this.masterTableData = res.attribute
+    },
+    delRightTitle(item) {
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await businessModuledeleteAPI({
+          id: item.id
+        })
+        if (res.status == 200) {
+          this.$vmNews('删除成功', 'success')
+          this.billTypeClickName = ''
+          this.billTypeClickID = ''
+          this.getLeftList()
+          this.resetTable()
+        }
+      })
+    },
+    editRightTitle(item) {
+      this.billTypeADDName = item.name
+      this.billTypeADDID = item.id
+      this.passwordDialogTitle = '编辑'
+      this.passwordDialogShow = true
+    },
+    rightAddHandle() {
+      this.passwordDialogShow = true
+      this.passwordDialogTitle = '新增'
+      this.billTypeADDName = ''
+      this.billTypeADDID = ''
+    },
+    async passwordChangeHandle() {
+      if (!this.billTypeADDName) {
+        this.$vmNews('请输入单据类型名称')
+        return
+      }
+      let params = {
+        'moduleName': this.billTypeADDName
+      }
+      if (this.passwordDialogTitle === '编辑') {
+        params.id = this.billTypeADDID
+        const res = await businessModuleUpdateAPI(params)
+        if (res.status == 200) {
+          this.$vmNews('保存成功', 'success')
+          this.passwordDialogShow = false
+          this.getLeftList()
+        }
+        return
+      }
+      const res = await queryByIdAPI(params)
+      if (res.status == 200) {
+        this.$vmNews('保存成功', 'success')
+        this.passwordDialogShow = false
+        this.getLeftList()
+      }
+    },
+    async getSelect() {
+      const res = await GetBillListAPI({
+        page: 1,
+        limit: 9999
+      })
+      res.data[1].forEach(item => {
+        item.label = item.appName
+        item.value = item.appID
+      })
+      this.basicFormForm[0].elCol[2].options = res.data[1]
+      this.basicFormForm[0].elCol[6].options = res.data[1]
+    },
+    async getLeftList() {
+      this.openLoading()
+      const res = await queryAllAPI({})
+      res.attribute.forEach((el) => {
+        el.name = el.moduleName
+        el.id = el.id
+      })
+      this.billTypeList = res.attribute
+    },
+    onSelect(val, index, indexRow, obj, row, form) {
+      if (row.prop === 'sourceAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'sourceAppCode', obj.appCode)
+      }
+      if (row.prop === 'targetAppID') {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'targetAppCode', obj.appCode)
+      }
+    },
+    async handleConfirmClick() {
+      await this.$refs.basicFormRefsName.$refs.ruleForm.validate()
+      const res = await businessModuleMdmSaveListAPI([
+        {
+          ...this.$refs.basicFormRefsName.ruleForm
+        }
+      ])
+      if (res.status == 200) {
+        this.$vmNews('保存成功', 'success')
+        this.examineOperateDialog = false
+        this.resetTable()
+      }
+    },
+    pageChange(model) {
+      this.pageModel.page = model.page
+      this.pageModel.limit = model.limit
+      this.getTableData()
+    },
+    async getTableData() {
+      const res = await queryMdmsByModuleIdAPI({
+        ...this.searchObj,
+        aeConfModuleId: this.billTypeClickID
+      })
+      this.tableData = res.attribute
+      this.$nextTick(() => {
+        this.$refs.customtable.clearRadioIndex()
+        this.selected = []
+      })
+    },
+    resetTable() {
+      this.tableData = []
+      this.pageModel.page = 1
+      this.selected = []
+      this.getTableData()
+    },
+    // 点击某条数据
+    radioChange(val) {
+      this.selected = []
+      this.selected.push(val)
+    },
+    // 删除
+    delOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await DelArcCompareDataAPI({
+          arcCompareID: this.selected[0].arcCompareID
+        })
+        if (res.status == 200) {
+          this.$vmNews('删除成功', 'success')
+          this.resetTable()
+        }
+      })
+    },
+    // 编辑
+    editOperate() {
+      if (!this.selected.length) {
+        this.$vmNews('请至少选择一条数据')
+        return
+      }
+      this.dialogTitle = '编辑'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$refs.basicFormRefsName.ruleForm = {
+          ...this.selected[0]
+        }
+      })
+    },
+    //新增
+    Operate() {
+      if (!this.billTypeClickName) {
+        this.$vmNews('请选择业务模块')
+        return
+      }
+      this.dialogTitle = '新增'
+      this.examineOperateDialog = true
+      this.$nextTick(() => {
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'aeConfModuleName', this.billTypeClickName)
+        this.$set(this.$refs.basicFormRefsName.ruleForm, 'aeConfModuleId', this.billTypeClickID)
+      })
+    },
+    refresh() {
+      this.searchObj = {}
+    },
+    //获取按钮（头部）
+    async buttonPermissions() {
+      let arr = [
+        {
+          'id': '297c66371d484f5ea163c70b1c3944a7',
+          'create_user_id': '1',
+          'create_time': '2025-05-30 11:28:56',
+          'modify_time': '2025-05-30 11:28:56',
+          'modify_user_id': '1',
+          'org_id': '0',
+          'companyId': '0',
+          'sts': 'Y',
+          'start': null,
+          'limit': null,
+          'offset': null,
+          'sort': null,
+          'order': null,
+          'dir': null,
+          'rows': null,
+          'page': null,
+          'dialect_type': null,
+          'pageNum': null,
+          'pageSize': null,
+          'sorts': 1,
+          'dataSourceCode': 'master',
+          'code': '1',
+          'nameCh': '新增',
+          'nameEn': 'Operate',
+          'menuId': '936df6d1cd7e4f9ba4c972e0f84b5ab4',
+          'iconName': 'el-icon-plus',
+          'styles': 'primary',
+          'btnFunction': 'Operate',
+          'remark': null,
+          'userId': null,
+          'check': false
+        },
+        {
+          'id': 'ad708a5f65fb42d49e203a230096f43e',
+          'create_user_id': '1',
+          'create_time': '2025-05-30 11:29:22',
+          'modify_time': '2025-05-30 11:29:22',
+          'modify_user_id': '1',
+          'org_id': '0',
+          'companyId': '0',
+          'sts': 'Y',
+          'start': null,
+          'limit': null,
+          'offset': null,
+          'sort': null,
+          'order': null,
+          'dir': null,
+          'rows': null,
+          'page': null,
+          'dialect_type': null,
+          'pageNum': null,
+          'pageSize': null,
+          'sorts': 2,
+          'dataSourceCode': 'master',
+          'code': '2',
+          'nameCh': '编辑',
+          'nameEn': 'editOperate',
+          'menuId': '936df6d1cd7e4f9ba4c972e0f84b5ab4',
+          'iconName': 'el-icon-edit',
+          'styles': 'primary',
+          'btnFunction': 'editOperate',
+          'remark': null,
+          'userId': null,
+          'check': false
+        },
+        {
+          'id': 'cca6382b141e4816833581db63c768da',
+          'create_user_id': '1',
+          'create_time': '2025-05-30 11:29:39',
+          'modify_time': '2025-05-30 11:29:39',
+          'modify_user_id': '1',
+          'org_id': '0',
+          'companyId': '0',
+          'sts': 'Y',
+          'start': null,
+          'limit': null,
+          'offset': null,
+          'sort': null,
+          'order': null,
+          'dir': null,
+          'rows': null,
+          'page': null,
+          'dialect_type': null,
+          'pageNum': null,
+          'pageSize': null,
+          'sorts': 3,
+          'dataSourceCode': 'master',
+          'code': '3',
+          'nameCh': '删除',
+          'nameEn': 'delOperate',
+          'menuId': '936df6d1cd7e4f9ba4c972e0f84b5ab4',
+          'iconName': 'el-icon-delete',
+          'styles': 'danger',
+          'btnFunction': 'delOperate',
+          'remark': null,
+          'userId': null,
+          'check': false
+        }
+      ]
+      arr.forEach((el) => {
+        el.menuName = el.nameCh
+        el.icon = el.icoName
+        el.type = el.style
+        el.name = el.nameCN
+      })
+      this.nowBtns = arr
+    },
+    billTypeClickHandle(id, name) {
+      this.billTypeClickID = id
+      this.billTypeClickName = name
+      this.resetTable()
+    },
+    //头部按钮统一调用方法
+    clickSave(item) {
+      this[item.btnFunction]()
+    }
+  },
+  mounted() {
+    this.buttonPermissions()
+    this.getLeftList()
+    // this.getTableData()
+    // this.getSelect()
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.addDialog {
+  display: flex;
+  align-items: center;
+
+  .nameTitle {
+    padding: 10px;
+    font-size: 14px;
+    color: #333;
+    margin-right: 10px;
+    width: 180px;
+    text-align: right;
+  }
+}
+
+.recordContrast {
+  display: flex;
+  overflow: hidden;
+  background-color: #f5f5f5;
+
+  .left {
+    width: 270px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-right: 5px;
+
+    .leftTitle {
+      color: #333;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    .topBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .searchBox {
+        display: flex;
+        align-items: center;
+
+        > div {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .table {
+      margin-top: 10px;
+    }
+  }
+}
+
+.searchBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 20px;
+
+  .input {
+    flex: 1;
+    margin-right: 5px;
+  }
+}
+
+.showList {
+  height: calc(100vh - 200px);
+  overflow: auto;
+  margin-top: 10px;
+
+  .showItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    cursor: pointer;
+
+    .icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: #ebeced;
+      border-radius: 4px;
+
+      .icon {
+        display: block !important;
+      }
+    }
+
+    &.active {
+      background-color: #ebeced !important;
+    }
+  }
+}
+</style>