diff --git a/src/views/DataCenterOptions/authority/images/删除.png b/src/views/DataCenterOptions/authority/images/删除.png
new file mode 100644
index 0000000..c74a004
Binary files /dev/null and b/src/views/DataCenterOptions/authority/images/删除.png differ
diff --git a/src/views/DataCenterOptions/authority/images/设置.png b/src/views/DataCenterOptions/authority/images/设置.png
new file mode 100644
index 0000000..fa32cf3
Binary files /dev/null and b/src/views/DataCenterOptions/authority/images/设置.png differ
diff --git a/src/views/DataCenterOptions/authority/index.vue b/src/views/DataCenterOptions/authority/index.vue
new file mode 100644
index 0000000..1d862ed
--- /dev/null
+++ b/src/views/DataCenterOptions/authority/index.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="wrap">
+    <div class="main" v-loading="mainLoading">
+      <baseTable :tableData="tableData" :tabLoading="tabLoading"
+
+                 :tableColumn="tableColumn" :border="false"
+      >
+        <!--        来源类型-->
+        <template #sourceType="{row}">
+          {{ row.sourceType == 1 ? '插件' : 'api' }}
+        </template>
+        <!--        触发类型-->
+        <template #triggerType="{row}">
+          {{ row.triggerType == 0 ? '手动' : '自动' }}
+        </template>
+        <!--        启用/停用-->
+        <template #enabledState="{row}">
+          <el-switch
+            :disabled="true"
+            v-model="row.enabledState"
+            active-value="1"
+            inactive-value="0"
+          >
+          </el-switch>
+        </template>
+        <!--        操作-->
+        <template #operation="{row}">
+          <div class="btnList">
+            <div class="settingBtn" @click="sonTableEditHandle(row)">
+              <img src="./images/设置.png" alt="">
+            </div>
+            <div class="deleBtn" @click="activedOnFunc(row)">
+              <img src="./images/删除.png" alt="">
+            </div>
+          </div>
+        </template>
+      </baseTable>
+      <div class="receiptsAddRow">
+        <el-link
+          type="primary"
+          @click="addRowHandle"
+          :underline="false"
+        >+ 添加
+        </el-link
+        >
+      </div>
+    </div>
+    <baseRightDialog ref="settingForm"
+                     :footerShow="true"
+                     :dialogVisible.sync="settingFormShow"
+                     title="数据来源"
+                     @handleClose="settingFormShow=false"
+                     :submitShow="true"
+                     :size="'50%'"
+                     @handleConfirmClick="sonTableSaveHandle"
+
+    >
+      <settingForm ref="settingForm" v-if="settingFormShow" @saveSuccessHandle="saveSuccessHandle"></settingForm>
+    </baseRightDialog>
+  </div>
+</template>
+
+<script>
+import settingForm from './settingForm.vue'
+import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
+import baseNewSelect from '@/views/applicationList/com/baseNewSelect.vue'
+import baseDialog from '@/views/integrationOption/compoments/baseDialog'
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
+import { getApiModuleApi } from '@/api/apiChunks'
+import { deepClone } from '@/utils/index.js'
+import { getUserModuleApi } from '@/api/integrationOption/integrationOption'
+import basePage from '@/views/intergrationTask/compoments/basePage.vue'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  data() {
+    return {
+      mainLoading: false,
+      saveLoading: false,
+      options: [],
+      // 角色字典
+      roleDist: {},
+      addSwitch: false,
+      tabLoading: false,
+      tableColumn: [
+        {
+          title: '来源类型',
+          id: 'sourceType',
+          width:150,
+        },
+        {
+          title: '来源应用',
+          id: 'appName',
+          width:150,
+        },
+        {
+          title: '触发类型',
+          id: 'triggerType',
+          width:120,
+        },
+        {
+          title: '来源编码',
+          id: 'sourceCodeName',
+          tooltip: true
+        },
+        {
+          title: '新增接口',
+          id: 'addName'
+        },
+        {
+          title: '修改接口',
+          id: 'updateName'
+        },
+        {
+          title: '删除接口',
+          id: 'deleteName'
+        },
+        {
+          title: '启用/停用',
+          id: 'enabledState',
+          width:120,
+        },
+        { title: '操作', id: 'operation',width:120, }
+      ],
+      tableData: [],
+      pageModel: {
+        pageIndex: 1,
+        total: 10,
+        limit: 10
+      },
+      addRole: '',
+      settingFormShow: false,
+      serviceOptions: []
+    }
+  },
+  methods: {
+    //保存/编辑成功
+    saveSuccessHandle() {
+      this.settingFormShow = false
+      this.getTableData()
+    },
+    //这里需要拿到应用下啦为后续找中文环节做准备
+    async initSelect() {
+      const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
+      console.log(res)
+      this.serviceOptions.options = []
+      res.attribute.forEach(item => {
+        this.serviceOptions.push({
+          id: item.id,
+          label: item.name
+        })
+      })
+      return true
+    },
+    //获取tableData
+    async getTableData() {
+      const res = await authApi('mdmModuleService', '', 'queryMdmSource', '', {
+        mdmId: this.$route.query.id
+      })
+      this.tableData = res.attribute
+      console.log(this.tableData, 'table')
+      //这边需要开始处理应用列表、新增修改删除接口找中文环节
+      this.tableData.forEach(async(item) => {
+        console.log('???', this.serviceOptions)
+        let obj = this.serviceOptions.find(ele => {
+          return ele.id === item.sourceName
+        })
+        this.$set(item, 'appName', obj.label)
+        let labelDist = {}
+        let plugInDist = {}
+        const res2 = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
+          appId: item.appId
+        })
+        res2.attribute.forEach((item) => {
+          labelDist[item.id] = item.apiName
+        })
+        if (item.deleteApi) {
+          this.$set(item, 'deleteName', labelDist[item.deleteApi])
+        }
+        if (item.updateApi) {
+          this.$set(item, 'updateName', labelDist[item.updateApi])
+        }
+        if (item.addApi) {
+          this.$set(item, 'addName', labelDist[item.addApi])
+        }
+        if (item.sourceType == 2 && item.sourceCode) {
+          this.$set(item, 'sourceCodeName', labelDist[item.sourceCode])
+        }
+        //走插件开始找
+        if (item.sourceType == 1 && item.sourceCode) {
+          const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
+            appId: item.sourceName
+          })
+          res.attribute.forEach((item) => {
+            plugInDist[item.id] = item.pluginName
+          })
+          this.$set(item, 'sourceCodeName', plugInDist[item.sourceCode])
+
+        }
+      })
+
+    },
+    //保存
+    sonTableSaveHandle() {
+      this.$refs.settingForm.$refs.typeOptionForm.submitForm()
+    },
+    //设置
+    sonTableEditHandle(row) {
+      this.settingFormShow = true
+      this.$nextTick(() => {
+        this.$refs.settingForm.getrowDetails(row.id)
+      })
+    },
+    //删除
+    activedOnFunc(row) {
+      this.$confirm('确定删除？')
+        .then(async(_) => {
+          this.openLoading('submit')
+          const res = await authApi('mdmModuleService', '', 'deleteMdmSource', '', {
+            id: row.id
+          })
+          this.$vmNews('删除成功', 'success')
+          this.getTableData()
+        })
+        .catch((_) => {
+        })
+    },
+    //添加
+    addRowHandle() {
+      this.settingFormShow = true
+    },
+    async init() {
+      this.mainLoading = true
+      const res = await getApiModuleApi({
+        tl: 'mdmService',
+        as: 'mdmService',
+        dj: 'queryMdmModuleRule'
+      }, { id: this.$route.query.id })
+      res.attribute.forEach(item => {
+        item.mdmModuleRoleButtonEntities.forEach(ele => {
+          item[ele.buttonType] = true
+        })
+      })
+      this.mainLoading = false
+      this.tableData = res.attribute
+    },
+    //close
+    dialogCloseHandle() {
+      this.addRole = ''
+    },
+    //add
+    addHandle() {
+      this.addSwitch = true
+    },
+    // 页码
+    currentChangeHandle(pageModel) {
+      this.pageModel = pageModel
+      this.$nextTick(() => {
+      })
+    }
+
+  },
+  components: {
+    baseNewForm,
+    BaseTable,
+    baseDialog,
+    baseNewSelect,
+    basePage,
+    baseRightDialog,
+    settingForm
+  },
+  created() {
+    this.initSelect().then(() => {
+      this.getTableData()
+    })
+
+    this.$emit('flashActive', 3)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.receiptsAddRow {
+  margin-top: 15px;
+  border: 1px dotted #ccc;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+}
+
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+  display: block !important;
+}
+
+.checkChunk {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wrap {
+  background-color: #fbfbfb;
+  width: 99.5%;
+  overflow: auto;
+  margin-left: 5px;
+
+  > .btn {
+    display: flex;
+    justify-content: flex-end;
+
+    > .chunk {
+      margin-left: 10px;
+    }
+  }
+
+  > .main {
+    margin-top: 10px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+
+    .btn {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 10px;
+    }
+  }
+
+}
+
+footer {
+  margin-top: 20px;
+}
+
+.addBox {
+  > .chunk {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.btnList {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .settingBtn {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  .deleBtn {
+    cursor: pointer;
+    margin-left: 10px;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/authority/settingForm.vue b/src/views/DataCenterOptions/authority/settingForm.vue
new file mode 100644
index 0000000..482e162
--- /dev/null
+++ b/src/views/DataCenterOptions/authority/settingForm.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="settingForm">
+    <baseNewForm
+      ref="typeOptionForm"
+      :spanNumber="18"
+      :isFunBtn="false"
+      :formRow="formRow"
+      :ruleForm="ruleForm"
+      :labelPosition="'top'"
+      @onSelect="typeSelectChangeHanlde"
+      @onSubmit="typeOptionOnSubmit"
+    >
+    </baseNewForm>
+  </div>
+</template>
+<script>
+import baseNewForm from '../compoments/baseNewForm'
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import { authApi } from '@/api/apis/auth'
+import { getApiModuleApi } from '@/api/apiChunks'
+import { retrieveRawAttr } from 'echarts/lib/data/helper/dataProvider'
+
+export default {
+  name: 'settingForm',
+  data() {
+    return {
+      formRow: [
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '来源类型',
+              id: 'sourceType',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [
+                {
+                  label: '插件',
+                  id: '1'
+                },
+                {
+                  label: 'api',
+                  id: '2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '来源应用',
+              id: 'sourceName',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '来源编码',
+              id: 'sourceCode',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '触发类型',
+              id: 'triggerType',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [
+                {
+                  label: '手动',
+                  id: '0'
+                },
+                {
+                  label: '自动',
+                  id: '1'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '新增接口',
+              id: 'addApi',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '修改接口',
+              id: 'updateApi',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '删除接口',
+              id: 'deleteApi',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'switch',
+              title: '启用/停用',
+              id: 'enabledState',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              activeValue: '1',
+              inactiveValue: '0'
+            }
+          ]
+        }
+      ],
+      ruleForm: {},
+      tableId: '',//数据源主表名称
+      mainLoading: false,
+      tabLoading: false,
+      serviceOptions: [],//主表
+      labelOptions: [],//字段名称下啦
+      labelDist: {}//字段名称字典
+    }
+  },
+  methods: {
+    //字段名称修改事件 需要存filedName
+    filedIdChangHandle(val, row) {
+      row.filedName = this.labelDist[val]
+    },
+    //表字段字段类型下啦初始化
+    async initSelect() {
+      //服务名下拉
+      this.serviceOptions = []
+      const service = await getApiModuleApi({
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'queryMdmService'
+      }, { remark: '' })
+      service.attribute.forEach(item => {
+        console.log(item.dbName, 'item')
+        this.serviceOptions.push({
+          id: item.id,
+          label: item.remark,
+          dbId: item.id,
+          mdmId: item.mdmId
+        })
+      })
+      console.log(this.serviceOptions, 'this.serviceOptions')
+    },
+    async typeSelectChangeHanlde(val, index, indexRow, row, flag = true) {
+      if (flag && (row.id === 'sourceName' || row.id === 'sourceType')) {
+        if (row.id === 'sourceType') {
+          this.formRow[2].elCol[0].options = []
+          this.$set(this.ruleForm, 'sourceCode', '')
+        } else {
+          this.formRow[2].elCol[0].options = []
+          this.formRow[4].elCol[0].options = []
+          this.formRow[5].elCol[0].options = []
+          this.formRow[6].elCol[0].options = []
+          this.$set(this.ruleForm, 'addApi', '')
+          this.$set(this.ruleForm, 'updateApi', '')
+          this.$set(this.ruleForm, 'deleteApi', '')
+          this.$set(this.ruleForm, 'sourceCode', '')
+        }
+
+      }
+      //当下啦是appid时条用接口查询该app下的所有接口用在新增、修改、删除上
+      if ((row.id === 'sourceName' || row.id === 'sourceType') && this.ruleForm.sourceName) {
+        const res = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
+          appId: this.ruleForm.sourceName
+        })
+        res.attribute.forEach((item) => {
+          this.formRow[4].elCol[0].options.push({
+            id: item.id,
+            label: item.apiName
+          })
+          this.formRow[5].elCol[0].options.push({
+            id: item.id,
+            label: item.apiName
+          })
+          this.formRow[6].elCol[0].options.push({
+            id: item.id,
+            label: item.apiName
+          })
+          if (this.ruleForm.sourceType == 2) {
+            this.formRow[2].elCol[0].options.push({
+              id: item.id,
+              label: item.apiName
+            })
+          }
+        })
+        //如果是插件则来源编号要走插件接口
+        if (this.ruleForm.sourceType == 1) {
+          const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
+            appId: this.ruleForm.sourceName
+          })
+          res.attribute.forEach((item) => {
+            this.formRow[2].elCol[0].options.push({
+              id: item.id,
+              label: item.pluginName
+            })
+          })
+        }
+      }
+
+    },
+    //测试通过
+    async typeOptionOnSubmit() {
+      let params = {
+        ...this.ruleForm,
+        dbId: this.tableId,
+        mdmId: this.$route.query.id
+      }
+      if (params.id) {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'updateMdmSource', '', params)
+        this.$vmNews('保存成功', 'success')
+        this.$emit('saveSuccessHandle')
+      } else {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'saveMdmSource', '', params)
+        this.$vmNews('保存成功', 'success')
+        this.$emit('saveSuccessHandle')
+      }
+    },
+    //获取应用下啦
+    async getAppList() {
+      const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
+      this.formRow[1].elCol[0].options = []
+      res.attribute.forEach(item => {
+        this.formRow[1].elCol[0].options.push({
+          id: item.id,
+          label: item.name
+        })
+      })
+
+    },
+    //编辑获取数据
+    async getrowDetails(id) {
+      const res = await authApi('mdmModuleService', '', 'getMdmSource', '', {
+        id
+      })
+      this.ruleForm = res.attribute
+      this.typeSelectChangeHanlde(this.ruleForm.appId, 0, 0, { id: 'sourceName' }, false)
+    }
+  },
+  created() {
+    this.getAppList()
+    this.initSelect()
+  },
+  components: {
+    BaseTable,
+    baseNewForm
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.bigTitle {
+  border-top: 1px solid #EBEBEB;
+  padding-top: 20px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 600;
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+}
+
+.tableName {
+  display: flex;
+  align-items: center;
+  margin: 30px 0;
+
+  .title {
+    margin-right: 20px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+}
+
+.receiptsAddRow {
+  margin-top: 30px;
+  border: 1px dotted #ccc;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+}
+
+.btnList {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .deleBtn {
+    cursor: pointer;
+    margin-left: 10px;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/com/baseNewSelect.vue b/src/views/DataCenterOptions/com/baseNewSelect.vue
new file mode 100644
index 0000000..03193c5
--- /dev/null
+++ b/src/views/DataCenterOptions/com/baseNewSelect.vue
@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <template v-if="!lookflag">
+      <el-select
+          v-loading="selLoading"
+          class="w-100"
+          v-model="selectValue"
+          :placeholder="placeholder"
+          :clearable="false"
+          style="width: 240px"
+          size="mini"
+          ref="mySelect"
+          :reserve-keyword="true"
+          :disabled="disabled"
+          filterable
+          popper-class="sele"
+          :filter-method="filter"
+          @change="fun"
+          @focus="funx"
+          @blur="funb"
+          @visible-change="hidden"
+          clearable
+      >
+        <el-option
+            v-for="(item, index) in options"
+            :key="item.id"
+            :label="item.name"
+            remote
+            :value="item.id"
+            placeholder="请输入"
+        >
+        </el-option>
+
+        <div style="bottom: -10px">
+          <el-pagination
+              v-if="pageModel.total > pageModel.limit"
+              small
+              @current-change="handleCurrentChange"
+              :current-page="pageModel.pageIndex"
+              :page-size="pageModel.limit"
+              layout="prev, pager,next,total"
+              :total="pageModel.total"
+          >
+          </el-pagination>
+        </div>
+      </el-select>
+    </template>
+    <template v-else
+    >
+      <div v-loading="selLoading">{{ showValue }}</div>
+    </template
+    >
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+::v-deep .el-select-dropdown__wrap {
+  height: 38px;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.drop > > > .el-input__inner {
+  background: #5183ff !important;
+  color: white;
+  border: none;
+  height: 26px;
+  padding: 10px 22px 10px 10px;
+  text-align: center;
+}
+
+.drop {
+  width: 250px;
+}
+
+.drop > > > .el-select .el-input .el-select__caret {
+  display: none;
+}
+</style>
+
+
+<script>
+import debounce from "lodash/debounce";
+import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";
+
+export default {
+  props: {
+    searchKey: {
+      type: String,
+      default: "",
+    },
+    ruleForm: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: String,
+    value: {
+      type: [String, Number],
+    },
+    itemObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    lookflag: {
+      type: Boolean,
+      default: false,
+    },
+    idKey: {
+      type: [Number, String],
+      default: 0,
+    },
+    journalingType: {
+      type: [String, Number],
+      default: "subject",
+    },
+    apiInfo: {
+      type: Object,
+    },
+    searchApiInfo: {
+      type: Object,
+    },
+    prop: {
+      type: Object,
+      default: () => {
+        return {
+          label: "names",
+          id: "codes",
+        };
+      },
+    },
+    foucus: {
+      type: Boolean,
+      default: true,
+    },
+    apiBody: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      pageModel: {
+        total: 0,
+        pageIndex: 1,
+        limit: 10,
+      },
+      selLoading: false,
+      showValue: "",
+      lookLoading: false,
+      options: [],
+      tempObj: {},
+    };
+  },
+  computed: {
+    selectValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  created() {
+    if (this.value) {
+      this.searchKeyHandle()
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    async searchKeyHandle() {
+      const res = await getUserModuleApi({
+        tl: "sysApplicationService",
+        as: "application",
+        dj: "getApp"
+      }, {id: this.value})
+      if (res.attribute) {
+        this.options.push({...res.attribute})
+      }
+
+    },
+    // 页码改变事件
+    handleCurrentChange(val) {
+      this.pageModel.pageIndex = val;
+      this.getUserModuleHandle();
+    },
+    // select选中更改事件
+    fun(val) {
+      let tempObj = this.options.find(item => {
+        if (val === item.id) {
+          return item
+        }
+      })
+      this.$emit(`onSelect`, val, tempObj);
+
+      this.$nextTick(() => {
+        this.$emit("blur");
+      });
+    },
+    searchShowValue(val) {
+      this.options.forEach((item) => {
+        if (item.codes == val) {
+          this.showValue = item.names;
+          this.$nextTick(() => {
+            this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
+          });
+        }
+      });
+    },
+    // 获得焦点
+    funx() {
+      if (this.foucus) {
+        this.getUserModuleHandle();
+      }
+    },
+    clearOptions() {
+      if (this.options.length) {
+        this.pageModel.pageIndex = 1;
+        this.options = [];
+        this.tempObj = null;
+      }
+    },
+    // 失去焦点
+    funb() {
+      // this.$nextTick(() => {
+      //   this.$emit("blur");
+      // });
+    },
+    hidden(val) {
+      if (!val) {
+        this.$nextTick(() => {
+          this.$emit("blur");
+        });
+      }
+    },
+    //搜索方法,将符合的数据存入options中，并分页展示
+    filter: debounce(function (val) {
+      this.pageModel.pageIndex = 1;
+      this.getUserModuleHandle(val);
+    }, 300),
+    focus() {
+      this.$refs.mySelect.focus();
+    },
+    async getUserModuleHandle(val = null, obj = null) {
+      const res = await getUserModuleApi({
+        tl: "sysApplicationService",
+        as: "application",
+        dj: "queryApp"
+      }, {
+        pageNum: this.pageModel.pageIndex,
+        pageSize: this.pageModel.limit,
+        name: val,
+      })
+      console.log(res, 'newselect')
+      this.pageModel.total = res.attribute.total;
+      this.options = res.attribute.list
+    },
+    async searchCodes(codes) {
+    },
+  },
+  beforeDestroy() {
+  },
+  //监听来自父组件的数据，当数据更新时，重置展示
+  watch: {
+    // value(newv, oldv) {
+    //   if (this.lookflag) {
+    //     this.searchCodes(this.value);
+    //   }
+    //   if (!oldv && newv) {
+    //     this.searchCodes(this.value);
+    //   }
+    // },
+  },
+};
+</script>
diff --git a/src/views/DataCenterOptions/compoments/baseCascader/index.vue b/src/views/DataCenterOptions/compoments/baseCascader/index.vue
new file mode 100644
index 0000000..ebd7630
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseCascader/index.vue
@@ -0,0 +1,212 @@
+<!--
+* @name: 自定义级联选择器
+* @author: zhangpengcheng
+* @date: 2022-08-19
+-->
+<template>
+  <div>
+    <template v-if="!lookflag">
+      <el-cascader
+        v-loading="selLoading"
+        style="width: 100%"
+        v-model="selectValue"
+        ref="elCascader"
+        :clearable="clearable"
+        :show-all-levels="showAllLevels"
+        :options="options"
+        @change="change"
+        @focus="focus"
+        :props="selectprops"
+        :disabled="disabled"
+      ></el-cascader>
+    </template>
+    <template v-else="!lookflag">
+      <div>
+        {{ showValue }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
+// import { areaGroupby } from "@/api/apis/auth.js";
+export default {
+  name: "customCascader",
+  components: {},
+  props: {
+    value: {
+      type: String,
+    },
+    // 字段
+    field: {
+      type: String,
+      default: "",
+    },
+    // 类型  1 组织或网格  2  场所类型
+    type: {
+      type: Number,
+      default: 1,
+    },
+    // 输入框中是否显示选中值的完整路径
+    showAllLevels: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否支持清空选项
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 清除状态
+    clearState: {
+      type: Number,
+      default: 0,
+    },
+    // 清除状态
+    modelData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    itemObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    ruleForm: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    lookflag: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectprops: {
+        label: this.itemObj.label,
+        value: this.itemObj.value,
+        expandTrigger: "hover",
+        checkStrictly: true,
+      },
+      options: [],
+      showValue: "",
+      selLoading: false,
+    };
+  },
+  created() {
+    if (Object.keys(this.ruleForm).length && this.ruleForm[this.itemObj.id]) {
+      this.getSelectdata(this.ruleForm[this.itemObj.id]);
+    }
+  },
+  mounted() {
+    this.areaGroupby();
+  },
+  watch: {
+    // 监听数字变动，就重置
+    // clearState() {
+    //   this.model = [];
+    // },
+  },
+  computed: {
+    selectValue: {
+      get() {
+        return [this.value];
+      },
+      set(val) {
+        this.$emit("input", val[val.length - 1]);
+      },
+    },
+  },
+  methods: {
+    // id找值
+    filterid(id, arr) {
+      let result = arr.find((item) => {
+        if (item.id === id) {
+          return item;
+        } else if (item.children) {
+          return this.filterid(id, item.children);
+        }
+      });
+      if (result) {
+        this.options.push(result);
+        this.showValue = result[this.itemObj.label];
+      }
+    },
+    // 根据id找值
+    async getSelectdata(id) {
+      this.selLoading = true;
+      const res = await getUserModuleApi(
+        {
+          tl: "optionService",
+          as: "sys_template",
+          dj: "queryTemplateTreeData",
+        },
+        {
+          service: this.itemObj.service,
+          upId: this.itemObj.upId,
+          id: id,
+          label: this.itemObj.label,
+          value: this.itemObj.value,
+        }
+      );
+      if (res.status == 200) {
+        this.filterid(id, res.attribute);
+        // this.options = res.attribute;
+        // this.showValue = res.attribute[0][this.itemObj.label];
+        this.selLoading = false;
+      }
+    },
+    // 查询表
+    async getTreeSelect(obj = {}) {
+      const res = await getUserModuleApi(
+        {
+          tl: "optionService",
+          as: "sys_template",
+          dj: "queryTemplateTreeData",
+        },
+        {
+          service: this.itemObj.service,
+          value: this.itemObj.value,
+          label: this.itemObj.label,
+          upId: this.itemObj.upId,
+          ...obj,
+        }
+      );
+      this.options = res.attribute;
+    },
+    // 回显数据
+    setEchoData(model) {
+      this.model = model;
+    },
+    // 级联选择器更改值
+    change() {},
+    // 查询函数
+    areaGroupby() {
+      // areaGroupby().then(res=>{
+      //     let {code ,data} = res;
+      //     if(code === 10000){
+      //         let newData = [data]
+      //         this.options = newData
+      //     }
+      // })
+    },
+    focus() {
+      this.getTreeSelect();
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseDatePicker.vue b/src/views/DataCenterOptions/compoments/baseDatePicker.vue
new file mode 100644
index 0000000..75a72f4
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseDatePicker.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-date-picker
+    v-model="dateData"
+    :type="datePickerType"
+    align="left"
+    unlink-panels
+    range-separator="至"
+    start-placeholder="开始月份"
+    end-placeholder="结束月份"
+    value-format="yyyy-MM-dd"
+    :disabled="disabled"
+    :picker-options="
+      datePickerType === 'date' ? DatePickerOptions : datedateRangePickerOptions
+    "
+  >
+  </el-date-picker>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    datePickerType: {
+      type: String,
+      default: "date",
+    },
+    itemObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    value: {},
+    row: {
+      type: Object,
+      default: () => {
+        return {
+          test: "2023-07-23",
+        };
+      },
+    },
+    low: {
+      type: String,
+      default: "",
+    },
+    up: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      datedateRangePickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    dateData: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+    DatePickerOptions() {
+      return {
+        disabledDate: (time) => {
+          if (this.low && this.row[this.low]) {
+            // 入职时间选择后，禁用入职时间前的时间
+            if (this.row[this.low].includes("T")) {
+              return time.getTime() < new Date(this.row[this.low]);
+            } else {
+              return (
+                time.getTime() < new Date(this.row[this.low] + "T00:00:00")
+              );
+            }
+          }
+          if (this.up && this.row[this.up]) {
+            // 离职时间选择后，禁用离职时间后的时间
+            if (this.row[this.up].includes("T")) {
+              return time.getTime() > new Date(this.row[this.up]);
+            } else {
+              return time.getTime() > new Date(this.row[this.up] + "T00:00:00");
+            }
+          }
+        },
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              picker.$emit("pick", new Date());
+            },
+          },
+          {
+            text: "昨天",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit("pick", date);
+            },
+          },
+          {
+            text: "一周前",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", date);
+            },
+          },
+        ],
+      };
+    },
+  },
+  watch: {},
+};
+</script>
\ No newline at end of file
diff --git a/src/views/DataCenterOptions/compoments/baseDateTimePicker.vue b/src/views/DataCenterOptions/compoments/baseDateTimePicker.vue
new file mode 100644
index 0000000..c38eea6
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseDateTimePicker.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="block">
+    <el-date-picker
+      v-model="value"
+      type="datetime"
+      placeholder="选择日期时间"
+      align="right"
+      :picker-options="pickerOptions"
+    >
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              picker.$emit("pick", new Date());
+            },
+          },
+          {
+            text: "昨天",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit("pick", date);
+            },
+          },
+          {
+            text: "一周前",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", date);
+            },
+          },
+        ],
+      },
+      value: "",
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/DataCenterOptions/compoments/baseDialog.vue b/src/views/DataCenterOptions/compoments/baseDialog.vue
new file mode 100644
index 0000000..b491bc9
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseDialog.vue
@@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+    class="base-dialog"
+    :title="title"
+    :visible.sync="dialogVisible"
+    :width="width"
+    :fullscreen="false"
+    append-to-body
+    top="5vh"
+    :close-on-click-modal="false"
+    @open="$emit('open')"
+    @close="$emit('close')"
+  >
+    <slot></slot>
+    <span slot="footer" class="dialog-footer" v-if="footerShow">
+      <el-button @click="closeHandle">取 消</el-button>
+      <el-button v-if="resetting">重 置</el-button>
+      <el-button
+        type="primary"
+        v-if="!lookFlag"
+        :loading="loading"
+        @click="handleConfirmClick"
+        >提 交</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+    value: Boolean,
+    title: String,
+    lookFlag: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    resetting: {
+      type: Boolean,
+      default: false,
+    },
+    footerShow: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: String,
+      default: "80%",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  methods: {
+    closeHandle() {
+      this.dialogVisible = false;
+      return
+      this.$confirm("是否关闭表单?", "提示", {
+        confirmButtonText: "关闭",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.dialogVisible = false;
+        })
+        .catch(() => {});
+    },
+    handleConfirmClick() {
+      this.$emit("confirm");
+    },
+  },
+  beforeDestroy() {
+    console.log(11);
+  },
+};
+</script>
+<style scoped>
+.base-dialog >>> .el-dialog__body {
+  max-height: 80vh;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseForm.vue b/src/views/DataCenterOptions/compoments/baseForm.vue
new file mode 100644
index 0000000..2344934
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseForm.vue
@@ -0,0 +1,100 @@
+// 表格
+<template>
+  <el-form ref="form" :model="form" :inline="true">
+    <el-row
+      :gutter="0"
+      v-for="(row, index) in list"
+      :key="index"
+      style="margin-bottom: 0px"
+      label-width="100px"
+      label-position="top"
+    >
+      <el-col
+        v-for="(item, indexRow) in row.elCol"
+        :span="item.span ? item.span : 6"
+        :key="indexRow"
+      >
+        <base-form-item :key="item.id">
+          <!-- 输入框 输入数据绑定item.value -->
+          <span>{{ item.title }}</span>
+          <template v-if="item.type === 'input'">
+            <el-input
+              :rows="2"
+              clearable
+              v-model="item.value"
+              :placeholder="item.placeholder"
+              :maxlength="item.maxlength ? item.maxlength * 1 : ''"
+            ></el-input>
+          </template>
+          <!-- 下拉框  输入数据绑定item.value-->
+          <template v-else-if="item.type === 'select'">
+            <BaseSelect :itemObj="item"></BaseSelect>
+          </template>
+          <!-- 单选框 输入数据绑定item.value -->
+          <template v-else-if="item.type === 'radio'">
+            <BaseRabio :itemObj="item"></BaseRabio>
+          </template>
+          <!-- 日期选择 -->
+          <template v-else-if="item.type === 'datepick'">
+            <BaseDatePick :itemObj="item"></BaseDatePick>
+          </template>
+          <!-- treeselect -->
+          <template v-else-if="item.type === 'treeselect'">
+            <treeselect
+              v-model="item.value"
+              :normalizer="item.normalizer"
+              :options="delTreeChildren(item.options)"
+              :multiple="item.multiple ? row.multiple : false"
+              :disabled="item.disabled && !newFlag ? item.disabled : false"
+              @clear="treeSelectClear"
+              ref="selectTree"
+              :placeholder="!item.placeholder ? '请选择' : item.placeholder"
+              @select="selectTree"
+            />
+          </template>
+        </base-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import BaseDatePick from "./baseDatePicker.vue";
+import BaseRabio from "./baseRadio.vue";
+import BaseFormItem from "./baseFormItem.vue";
+import BaseSelect from "./baseSelect";
+export default {
+  props: {
+    // 列表
+    list: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      form: {},
+    };
+  },
+  methods: {
+    selectTree(node, instanceId) {
+      this.$emit("selectTree", node);
+    },
+    treeSelectClear() {
+      this.$refs.selectTree.clear();
+    },
+  },
+  created() {
+    console.log(this.list);
+  },
+  components: {
+    BaseFormItem,
+    BaseSelect,
+    BaseRabio,
+    BaseDatePick,
+  },
+};
+</script>
+
+<style scoped lang='scss'>
+</style>
\ No newline at end of file
diff --git a/src/views/DataCenterOptions/compoments/baseFormItem.vue b/src/views/DataCenterOptions/compoments/baseFormItem.vue
new file mode 100644
index 0000000..e9d9746
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseFormItem.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-form-item :label="label" class="formitem" :style="`display: flex;`">
+    <slot></slot>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.formitem {
+  margin-right: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/DataCenterOptions/compoments/baseLink/index.vue b/src/views/DataCenterOptions/compoments/baseLink/index.vue
new file mode 100644
index 0000000..e98ddc4
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseLink/index.vue
@@ -0,0 +1,554 @@
+<template>
+  <div class="link" ref="link">
+    <div class="left">
+      <div class="title">
+        <h1>执行动作入参数</h1>
+      </div>
+      <template v-for="(item, index) in leftData">
+        <div class="treebox">
+          <div class="tree" :key="index">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: gray; padding-left: 10px">{{
+              item.type
+            }}</span>
+          </div>
+          <div class="btn">
+            <el-checkbox-button
+              v-model="item.value"
+              @change="(val, $event) => leftCheckBoxHandle(val, item, $event)"
+              >+</el-checkbox-button
+            >
+          </div>
+        </div>
+        <template v-if="item.children">
+          <template v-for="(item01, index01) in item.children">
+            <div class="treebox">
+              <div class="tree" style="margin-left: 15px">
+                <span>{{ item01.label }}</span>
+                <span
+                  style="font-size: 12px; color: gray; padding-left: 10px"
+                  >{{ item01.type }}</span
+                >
+              </div>
+              <div class="btn">
+                <el-checkbox-button
+                  v-model="item01.value"
+                  @change="
+                    (val, $event) => leftCheckBoxHandle(val, item01, $event)
+                  "
+                  >+</el-checkbox-button
+                >
+              </div>
+            </div>
+            <template v-if="item01.children">
+              <template v-for="(item02, index02) in item01.children">
+                <div class="treebox">
+                  <div class="tree" style="margin-left: 30px">
+                    <span>{{ item02.label }}</span>
+                    <span
+                      style="font-size: 12px; color: gray; padding-left: 10px"
+                      >{{ item02.type }}</span
+                    >
+                  </div>
+                  <div class="btn">
+                    <el-checkbox-button
+                      v-model="item02.value"
+                      @change="
+                        (val, $event) => leftCheckBoxHandle(val, item02, $event)
+                      "
+                      >+</el-checkbox-button
+                    >
+                  </div>
+                </div>
+                <template v-if="item02.children">
+                  <template v-for="(item03, index03) in item02.children">
+                    <div class="treebox">
+                      <div class="tree" style="margin-left: 30px">
+                        <span>{{ item03.label }}</span>
+                        <span
+                          style="
+                            font-size: 12px;
+                            color: gray;
+                            padding-left: 10px;
+                          "
+                          >{{ item03.type }}</span
+                        >
+                      </div>
+                      <div class="btn">
+                        <el-checkbox-button
+                          v-model="item03.value"
+                          @change="
+                            (val, $event) =>
+                              leftCheckBoxHandle(val, item03, $event)
+                          "
+                          >+</el-checkbox-button
+                        >
+                      </div>
+                    </div>
+                  </template>
+                </template>
+              </template>
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+    <div class="svg" :style="{ height: svgHeight }">
+      <svg
+        ref="svg"
+        class="line"
+        xmlns="http://www.w3.org/2000/svg"
+        :style="{ height: svgHeight }"
+        style="position: absolute; z-index: 2; width: 300px"
+        version="1.1"
+      >
+        <line
+          v-for="item in line"
+          :key="item.leftid"
+          :x1="item.x1"
+          :y1="item.y1"
+          :x2="item.x2"
+          :y2="item.y2"
+          style="stroke: blue; stroke-width: 1; z-index: 999"
+        />
+      </svg>
+    </div>
+    <div class="right">
+      <div class="title">
+        <h1>API入参</h1>
+      </div>
+      <template v-for="(item, index) in rightData">
+        <div class="treebox">
+          <div class="btn">
+            <el-checkbox-button
+              size="mini"
+              class="layers-item-selector"
+              v-model="item.value"
+              @change="(val, $event) => rightCheckBoxHandle(val, item, $event)"
+              >+</el-checkbox-button
+            >
+          </div>
+          <div class="tree" :key="index">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: gray; padding-left: 10px">{{
+              item.type
+            }}</span>
+          </div>
+        </div>
+        <template v-if="item.children">
+          <template v-for="(item01, index01) in item.children">
+            <div class="treebox">
+              <div class="btn">
+                <el-checkbox-button
+                  v-model="item01.value"
+                  @change="
+                    (val, $event) => rightCheckBoxHandle(val, item01, $event)
+                  "
+                  >+</el-checkbox-button
+                >
+              </div>
+              <div class="tree" style="margin-left: 15px">
+                <span>{{ item01.label }}</span>
+                <span
+                  style="font-size: 12px; color: gray; padding-left: 10px"
+                  >{{ item01.type }}</span
+                >
+              </div>
+            </div>
+            <template v-if="item01.children">
+              <template v-for="(item02, index02) in item01.children">
+                <div class="treebox">
+                  <div class="btn">
+                    <el-checkbox-button
+                      v-model="item02.value"
+                      @change="
+                        (val, $event) =>
+                          rightCheckBoxHandle(val, item02, $event)
+                      "
+                      >+</el-checkbox-button
+                    >
+                  </div>
+                  <div class="tree" style="margin-left: 30px">
+                    <span>{{ item02.label }}</span>
+                    <span
+                      style="font-size: 12px; color: gray; padding-left: 10px"
+                      >{{ item02.type }}</span
+                    >
+                  </div>
+                </div>
+              </template>
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      leftData: [
+        {
+          label: "一级 1",
+          id: 1,
+          type: "Object",
+          children: [
+            {
+              label: "二级 1-1",
+              id: 2,
+              type: "Object",
+              children: [
+                {
+                  id: 3,
+                  label: "三级 1-1-1",
+                  type: "string",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 4,
+          label: "一级 2",
+          type: "Object",
+          children: [
+            {
+              id: 5,
+              label: "二级 2-1",
+              type: "Object",
+              children: [
+                {
+                  id: 6,
+                  label: "三级 2-1-1",
+                  type: "String",
+                },
+              ],
+            },
+            {
+              id: 7,
+              label: "二级 2-2",
+              type: "Object",
+              children: [
+                {
+                  id: 8,
+                  label: "三级 2-2-1",
+                  type: "String",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 9,
+          label: "一级 3",
+          type: "Object",
+          children: [
+            {
+              id: 10,
+              label: "二级 3-1",
+              type: "Object",
+              children: [
+                {
+                  id: 11,
+                  label: "三级 3-1-1",
+                  type: "Object",
+                },
+              ],
+            },
+            {
+              id: 12,
+              label: "二级 3-2",
+              type: "Object",
+              children: [
+                {
+                  id: 13,
+                  label: "三级 3-2-1",
+                  type: "Object",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      rightData: [
+        {
+          label: "一级 1",
+          id: 1,
+          type: "Object",
+          children: [
+            {
+              label: "二级 1-1",
+              id: 2,
+              type: "Object",
+              children: [
+                {
+                  id: 3,
+                  label: "三级 1-1-1",
+                  type: "string",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 4,
+          label: "一级 2",
+          type: "Object",
+          children: [
+            {
+              id: 5,
+              label: "二级 2-1",
+              type: "Object",
+              children: [
+                {
+                  id: 6,
+                  label: "三级 2-1-1",
+                  type: "String",
+                },
+              ],
+            },
+            {
+              id: 7,
+              label: "二级 2-2",
+              type: "Object",
+              children: [
+                {
+                  id: 8,
+                  label: "三级 2-2-1",
+                  type: "String",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 9,
+          label: "一级 3",
+          type: "Object",
+          children: [
+            {
+              id: 10,
+              label: "二级 3-1",
+              type: "Object",
+              children: [
+                {
+                  id: 11,
+                  label: "三级 3-1-1",
+                  type: "Object",
+                },
+              ],
+            },
+            {
+              id: 12,
+              label: "二级 3-2",
+              type: "Object",
+              children: [
+                {
+                  id: 13,
+                  label: "三级 3-2-1",
+                  type: "Object",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      leftActive: {},
+      rightActive: {},
+      line: [],
+      leftActiveItem: {},
+      rightActiveItem: {},
+      svgHeight: 0,
+    };
+  },
+  methods: {
+    leftCheckBoxHandle(val, item, e) {
+      //   console.log(val, item.id, e);
+      if (val) {
+        let svginfo = this.$refs.svg.getBoundingClientRect();
+        let info = e.target.getBoundingClientRect();
+        this.leftActiveItem = item;
+        this.leftActive["leftid"] = item.id;
+        this.leftActive["x1"] = svginfo.x - info.x - 25;
+        this.leftActive["y1"] = info.y - svginfo.y + 10;
+
+        if (this.leftActive.leftid && this.rightActive.rightid) {
+          //   let obj = {};
+          //   obj["yOffset"] =
+          //     Math.abs(this.rightActive["y2"] - this.leftActive["y1"]) / 2;
+          //   obj["centerY "] =
+          //     this.rightActive["y2"] < this.leftActive["y1"]
+          //       ? this.rightActive["y2"] + obj["yOffset"]
+          //       : this.rightActive["y2"] - obj["yOffset"];
+          //   obj["xOffset"] =
+          //     Math.abs(this.rightActive["x2"] - this.leftActive["x1"]) / 2;
+          //   obj["centerX"] =
+          //     this.rightActive["x2"] < this.leftActive["x1"]
+          //       ? this.rightActive["x2"] + obj["xOffset"]
+          //       : this.rightActive["x2"] - obj["xOffset"];
+          this.line.push({ ...this.leftActive, ...this.rightActive });
+          this.$set(this.leftActiveItem, "isline", true);
+          this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
+          this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
+          this.$set(this.rightActiveItem, "isline", true);
+          this.leftActive = {};
+          this.rightActive = {};
+        }
+        this.deepSearchBox(this.leftData, item.id);
+      } else {
+        if (item.isline) {
+          console.log(item);
+          this.line = this.line.filter((ele) => {
+            return ele.leftid != item.id;
+          });
+          this.cloaseBox(this.rightData, item.rightid);
+          item.isline = false;
+        } else {
+          this.leftActive = {};
+          this.leftActiveItem = {};
+        }
+      }
+    },
+    rightCheckBoxHandle(val, item, e) {
+      // console.log(val, item.id, e);
+      if (val) {
+        let svginfo = this.$refs.svg.getBoundingClientRect();
+        let info = e.target.getBoundingClientRect();
+        this.rightActiveItem = item;
+        this.rightActive["rightid"] = item.id;
+        this.rightActive["x2"] = info.x - svginfo.x;
+        this.rightActive["y2"] = info.y - svginfo.y + 10;
+        if (this.leftActive.leftid && this.rightActive.rightid) {
+          this.line.push({ ...this.leftActive, ...this.rightActive });
+          this.$set(this.leftActiveItem, "isline", true);
+          this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
+          this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
+          this.$set(this.rightActiveItem, "isline", true);
+          item["isline"] = true;
+          this.leftActive = {};
+          this.rightActive = {};
+        }
+        this.deepSearchBox(this.rightData, item.id);
+      } else {
+        if (item.isline) {
+          console.log(item);
+          this.line = this.line.filter((ele) => {
+            return ele.rightid != item.id;
+          });
+          this.cloaseBox(this.leftData, item.leftid);
+          item.isline = false;
+        } else {
+          this.rightActive = {};
+          this.rightActiveItem = {};
+        }
+      }
+    },
+    deepSearchBox(arr, id) {
+      arr.forEach((item) => {
+        if (item.id != id && item.value && !item.isline) {
+          item.value = false;
+        }
+        if (item.children && item.children.length) {
+          this.deepSearchBox(item.children, id);
+        }
+      });
+    },
+    cloaseBox(arr, id) {
+      arr.some((item) => {
+        if (item.id == id) {
+          item.value = false;
+          item.isline = false;
+          return true;
+        } else if (item.children && item.children.length) {
+          this.cloaseBox(item.children, id);
+        }
+      });
+    },
+    handleNodeClick(data) {
+      console.log(data);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss">
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  min-width: 700px;
+}
+.link {
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  background-color: #fff;
+  height: auto;
+  .left {
+    width: 300px;
+    .title {
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 20px;
+    }
+    .treebox {
+      margin-top: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .btn {
+        margin-right: 5px;
+      }
+    }
+  }
+  .right {
+    width: 300px;
+    .title {
+      display: flex;
+      justify-content: flex-end;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 20px;
+    }
+    .treebox {
+      align-items: center;
+      margin-top: 30px;
+      display: flex;
+      .btn {
+        margin-right: 60px;
+      }
+    }
+  }
+  .svg {
+    width: 300px;
+  }
+  svg {
+    background-color: #fafafa;
+  }
+}
+</style>
+
+<style lang="scss">
+.el-checkbox-button__inner {
+  width: 20px;
+  height: 20px;
+  line-height: 15px;
+  background-color: #ffffff;
+  border: solid 1px #cccccc;
+  border-radius: 50% !important;
+  font-size: 12px !important;
+  cursor: pointer;
+  padding: 0 !important;
+  z-index: 3;
+}
+.layers-item-selector .is-checked {
+  background-color: skyblue !important;
+}
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseMenuTree.vue b/src/views/DataCenterOptions/compoments/baseMenuTree.vue
new file mode 100644
index 0000000..88af583
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseMenuTree.vue
@@ -0,0 +1,463 @@
+<!--
+* @name: 弹窗配置
+* @author: zhangpengcheng
+* @date: 2022-08-25
+-->
+<template>
+  <!-- 权限设置弹框 -->
+  <!-- :style="{'margin':isCenter?'auto':''}"> -->
+  <div style="padding: 16px; height: 100%">
+    <div flex="cross:center" v-if="filterShow" style="margin-bottom: 5px">
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        style="margin-right: 13px"
+      ></el-input>
+      <el-button
+        icon="el-icon-plus"
+        style="height: 32px; line-height: 32px; padding: 0 13px !important"
+        @click="add"
+        v-if="filterButtonShow"
+      >
+      </el-button>
+    </div>
+    <div
+      flex="dir:top cross:center main:center"
+      style="margin: auto; height: calc(100% - 22px); overflow: auto"
+      class="treeBodyHeight"
+    >
+      <div class="menu-i" flex="cross:center main:center">
+        <div class="menu-i-t" flex="cross:top main:justify">
+          <el-tree
+            :data="menuData"
+            :check-strictly="true"
+            :default-checked-keys="selectData"
+            v-loading="treeLoading"
+            @node-click="handleNodeClick"
+            :expand-on-click-node="false"
+            :default-expand-all="expandAll"
+            :filter-node-method="filterNode"
+            :props="treeProps"
+            style="width: 100%; background-color: transparent"
+            @check-change="checkChange"
+            node-key="id"
+            ref="elTree"
+            :show-checkbox="showCheckbox"
+          >
+            <div
+              flex="cross:center main:justify"
+              style="width: calc(100% - 31px)"
+              slot-scope="{ node, data }"
+            >
+              <p
+                class="nowrap"
+                style="
+                  flex: 1;
+                  font-size: 12px;
+                  height: 32px;
+                  line-height: 32px;
+                "
+                @dblclick="dbTree(node, data)"
+              >
+                {{ nodeLabel == "" ? node.label : node.label[nodeLabel] }}
+              </p>
+              <div style="width: 60px" v-if="treeButton">
+                <el-button
+                  type="text"
+                  size="mini"
+                  icon="el-icon-plus"
+                  v-if="appendButton"
+                  @click.stop="() => append(node, data)"
+                >
+                </el-button>
+                <el-button
+                  type="text"
+                  size="mini"
+                  icon="el-icon-edit"
+                  v-if="reviseButton"
+                  @click.stop="() => revise(node, data)"
+                >
+                </el-button>
+                <el-button
+                  type="text"
+                  size="mini"
+                  icon="el-icon-delete"
+                  v-if="removeButton"
+                  @click.stop="() => remove(node, data)"
+                >
+                </el-button>
+              </div>
+            </div>
+          </el-tree>
+          <div @click="changePcAll" class="checkText" v-if="Allshow">全选</div>
+        </div>
+      </div>
+      <div flex="cross:center main:center" style="width: 100%" v-if="isSaveBtn">
+        <el-button style="width: 40%" type="primary" @click="saveMenuUser"
+          >保存</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import { queryMenuList, menuListSave } from '@/api/apis/auth'
+export default {
+  props: {
+    // 是否默认展开所有节点
+    expandAll: {
+      type: Boolean,
+      default: true,
+    },
+    // 操作按钮
+    treeButton: {
+      type: Boolean,
+      default: false,
+    },
+    // 操作按钮
+    filterButtonShow: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示保存按钮
+    isSaveBtn: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示全选按钮
+    Allshow: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示多选按钮
+    showCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否居中
+    isCenter: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示筛选
+    filterShow: {
+      type: Boolean,
+      default: false,
+    },
+    menuData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    setting: {
+      type: Boolean,
+      default: false,
+    },
+    treeLoading: {
+      type: Boolean,
+      default: false,
+    },
+    appendButton: {
+      type: Boolean,
+      default: true,
+    },
+    reviseButton: {
+      type: Boolean,
+      default: true,
+    },
+    removeButton: {
+      type: Boolean,
+      default: true,
+    },
+    nodeLabel: {
+      type: String,
+      default: "",
+    },
+    treeProps: {
+      type: Object,
+      default() {
+        return {
+          children: "children",
+          label: "label",
+        };
+      },
+    },
+  },
+  watch: {
+    defaultTheme: {
+      handler: function (val, oldVal) {
+        this.theme = val;
+        // document.getElementsByTagName('body')[0].style.setProperty('--active', val)
+
+        // let arr =  document.getElementsByClassName('.el-tree-node:focus>.el-tree-node__content')
+        // $('.el-tree-node:focus>.el-tree-node__content').css('color',val)
+      },
+      immediate: true,
+    },
+    filterText(val) {
+      this.$refs.elTree.filter(val);
+    },
+  },
+  data() {
+    return {
+      filterText: "",
+      theme: "",
+      powerDlog: false,
+      // 回显选中ids
+      selectData: [],
+      // 树状图设置
+      // treeProps: {
+      //     label: 'menuName',
+      //     children: 'id',
+      // },
+      // treeProps: {
+      // 	children: 'children',
+      // 	label: 'label'
+      // },
+
+      // PC菜单全选
+      checkedAllPc: false,
+      // 防连点
+      outing: false,
+    };
+  },
+  created() {},
+  mounted() {},
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme;
+    },
+  },
+  methods: {
+    clickFirst() {
+      document.querySelectorAll(".is-focusable")[0].click();
+    },
+    setCurrentKey(selectId) {
+      this.$nextTick(() => {
+        this.$refs.elTree.setCurrentKey(selectId);
+      });
+    },
+    dbTree(node, data) {
+      this.setCurrentKey(null);
+    },
+    // 添加
+    append(node, data) {
+      this.$emit("append", data);
+    },
+    // 编辑
+    revise(node, data) {
+      this.$emit("revise", data);
+    },
+    // 删除
+    remove(node, data) {
+      this.$emit("remove", data);
+    },
+    add() {
+      this.$emit("add");
+    },
+    filterNode(value, data, node) {
+      if (!value) return true;
+      let nodeData =
+        this.nodeLabel == ""
+          ? data[this.treeProps.label]
+          : data[this.treeProps.label][this.nodeLabel];
+      return nodeData.indexOf(value) !== -1;
+    },
+    buttonL(el) {
+      el.active = !el.active;
+      this.$forceUpdate();
+    },
+    setData(id) {
+      this.selectData.push(id);
+    },
+    saveMenuUser() {
+      let allKeys = this.getKey();
+      this.$emit("onSaveMenu", allKeys);
+    },
+    // 获取选中的key值
+    getKey() {
+      return this.$refs.elTree.getCheckedKeys();
+    },
+    // 初始数据
+    initData() {
+      // 菜单数据
+      // this.menuData = [];
+
+      // 回显选中ids
+      this.selectData = [];
+    },
+    // 关闭弹窗
+    handleClose() {
+      this.powerDlog = false;
+      this.initData();
+    },
+    //  全选、反选
+    changePcAll() {
+      this.checkedAllPc = !this.checkedAllPc;
+      let selectData = [];
+      if (this.checkedAllPc) {
+        selectData = this.cycleData(this.menuData);
+      }
+      this.selectData = selectData;
+    },
+    /**
+     * @description 递归获取菜单id（树状 多叉树结构）
+     * @author duanyipeng
+     * @createDate 2020/7/31 20:54
+     * @param {Array} outData 需要递归的数组
+     * @param {Boolean} isSelect: false返回所有id,true返回已选择id
+     */
+    cycleData(outData, isSelect) {
+      let newData = [];
+
+      function cycle(data) {
+        if (!data || data.length == 0) {
+          return false;
+        } else {
+          for (var i = 0, len = data.length; i < len; i++) {
+            let item = data[i];
+            if (isSelect && item.selected == 1) {
+              newData.push(item.id);
+            }
+            if (!isSelect) {
+              newData.push(item.id);
+            }
+            cycle(item.id);
+          }
+        }
+      }
+      cycle(outData);
+      return newData;
+    },
+    getData(childIds) {
+      let newData = [];
+
+      function cycle(data) {
+        data.forEach((el) => {
+          childIds.forEach((item) => {
+            if (el.id == item) {
+              newData.push(el);
+            }
+          });
+          if (el.children != null && el.children && el.children.length) {
+            cycle(el.children, childIds);
+          }
+        });
+      }
+      cycle(this.menuData, childIds);
+      return newData;
+    },
+    /**
+     * @description 节点选中状态发生变化时的回调
+     * @author duanyipeng
+     * @createDate 2020/7/31 20:53
+     * @param { Object } nodeDode 当前节点对象
+     * @param { Boolean } checked 当前节点是否选中
+     */
+    checkChange(nodeDode, checked) {
+      let getHalfCheckedKeys = this.$refs.elTree
+        .getCheckedKeys()
+        .concat(this.$refs.elTree.getHalfCheckedKeys());
+      // let getHalfCheckedKeys = this.$refs.elTree.getHalfCheckedKeys()
+      let childIds =
+        getHalfCheckedKeys.length != 0 ? getHalfCheckedKeys : this.selectData;
+      let checkdata = this.getData(childIds);
+      this.$emit("checkChange", childIds, checkdata);
+      return;
+      let id = nodeDode.id;
+      // let childIds = this.cycleData(id)
+      // 循环设置子项是否选中
+      childIds.forEach((item) => {
+        this.$refs.elTree.setChecked(item, checked);
+      });
+    },
+    // 点击事件
+    handleNodeClick(data) {
+      this.$emit("handleNodeClick", data);
+    },
+  },
+};
+</script>
+<style lang="scss">
+// $activeColor:val(--activeColor, "#00aaff");
+.nowrap {
+  /*让长段文本不换行*/
+  white-space: nowrap;
+  /*设置文本超出元素宽度部分隐藏*/
+  overflow-x: hidden;
+  /*设置文本超出部分用省略号显示*/
+  text-overflow: ellipsis;
+}
+
+.el-tree-node__content {
+  height: 32px !important;
+}
+
+.el-tree-node__label {
+  // font-size: 16px !important;
+  margin-left: 4px;
+}
+
+.el-tree-node__content > label.el-checkbox {
+  transform: scale(1.3);
+}
+
+.el-tree-node__content > .el-tree-node__expand-icon {
+  font-size: 18px;
+}
+
+.el-checkbox__label {
+  font-size: 16px;
+}
+
+.checkBox .el-checkbox__inner {
+  transform: scale(1.3);
+}
+</style>
+<style lang="scss" scoped>
+.el-tree-node.is-current > .el-tree-node__content .el-button--text {
+  color: white;
+}
+
+.menu-i {
+  width: 100%;
+  // margin-bottom: 24px;
+  height: 100%;
+
+  &-f {
+    color: #52575a;
+    font-size: 18px;
+    text-align: center;
+    margin-bottom: 12px;
+  }
+
+  &-t {
+    width: 100%;
+    height: 100%;
+    // height: 450px;
+    // border: 1px solid #d8d8d8;
+    // overflow-y: auto;
+  }
+}
+
+.checkBox {
+  margin-top: 6px;
+  margin-right: 12px;
+}
+
+.checkText {
+  width: 60px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  color: #333;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    color: #ecf5ff;
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseNewForm.vue b/src/views/DataCenterOptions/compoments/baseNewForm.vue
new file mode 100644
index 0000000..87ea049
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseNewForm.vue
@@ -0,0 +1,928 @@
+<!--
+	* @name: 自定义表单组件
+	* @author: zhangpengcheng
+	* @date: 2022-08-24
+	-->
+<template>
+  <el-form
+    validate-on-rule-change
+    :model="ruleForm"
+    :rules="rules"
+    :label-position="labelPosition"
+    :ref="refName"
+    :label-width="labelWidth"
+  >
+    <el-row
+      :gutter="0"
+      v-for="(item, index) in formRow"
+      :key="index"
+      style="margin-bottom: 10px"
+    >
+      <el-col
+        v-for="(row, indexRow) in item.elCol"
+        :span="row.row ? row.row * 1 : spanNumber"
+        :key="row.id"
+      >
+        <el-form-item
+          :prop="row.id"
+          :style="`display: flex;margin-bottom: ${marginBottom}px;padding:0 10px`"
+          v-if="row.show != false"
+          :class="rules[row.id] ? 'ruleFormClass ' : ''"
+          :rules="
+            formRule
+              ? [
+                  {
+                    required: row.required,
+                    message: `${row.title}不能为空`,
+                    trigger: row.type === 'input' ? 'change' : 'blur',
+                  },
+                  ...(row.pattern && row.message
+                    ? [
+                        {
+                          pattern: row.pattern,
+                          message: row.message,
+                          trigger: 'blur',
+                        },
+                      ]
+                    : []),
+                ]
+              : []
+          "
+        >
+          <div
+            class="single label"
+            v-if="row.label || row.title"
+            slot="label"
+            :style="`` + `justify-content: ${justifyContent};`"
+            flex
+          >
+            <span
+              class="label"
+              :style="`font-size:${
+                row.fontSize ? row.fontSize + 'px' : '13px'
+              }`"
+            >
+              <span v-if="row.required" style="color: red">*</span>
+              {{ row.title }}:
+            </span>
+          </div>
+          <template v-if="!lookFlag">
+            <el-checkbox
+              v-model="ruleForm[row.id]"
+              v-if="row.type == 'onecheck'"
+              :disabled="disabled"
+            >是
+            </el-checkbox>
+            <el-input
+              v-model="ruleForm[row.id]"
+              clearable
+              :disabled="disabled || (row.disabledOfId?Boolean(ruleForm.id):row.disabled) "
+              :rows="row.rows ? row.rows : 2"
+              :type="row.type ? row.type : 'text'"
+              :maxlength="row.maxlength ? row.maxlength * 1 : '99'"
+              :placeholder="!row.placeholder ? '请输入' : row.placeholder"
+              v-if="
+                row.tag === 'elInput' || (row.type === 'input' && !lookFlag)
+              "
+              @blur="searchByStationName(row.id,ruleForm)"
+              min="1"
+              @input="row.rules ? integerNumber(row) : ''"
+              @dblclick.native="row.double?dblclick(ruleForm[row.id]):''"
+              @change="$emit('onInput')"
+            >
+            </el-input>
+            <el-input
+              type="number"
+              v-if="row.type === 'num'"
+              v-model="ruleForm[row.id]"
+              style="width: 100%"
+              :disabled="(row.disabled && !newFlag ? row.disabled : false) || disabled"
+              :precision="row.precisionNum ? row.precisionNum : 0"
+              :placeholder="!row.placeholder ? '请输入' : row.placeholder"
+              :step="row.stepNum ? row.stepNum : 1"
+              @change="handleChange"
+              @input="(val) => limitPhoneNum(val, ruleForm, row.id)"
+              :maxlength="row.maxlength ? row.maxlength * 1 : 50"
+              :min="1"
+              :max="row.max ? row.max : 255"
+              :label="!row.placeholder ? '描述文字' : row.placeholder"
+            >
+              <template slot="append" v-if="row.message">{{ row.message }}</template>
+            </el-input
+            >
+            <el-switch
+              v-if="row.type === 'switch' && !lookFlag"
+              v-model="ruleForm[row.id]"
+              :active-text="row.activeText"
+              @change="switchChange($event, index, indexRow, row)"
+              :inactive-text="row.inactiveText"
+              :active-value="row.activeValue ? row.activeValue : true"
+              :inactive-value="
+                row.inactiveValue || row.inactiveValue == 0
+                  ? row.inactiveValue
+                  : false
+              "
+            >
+            </el-switch>
+            <baseDatePicker
+              class="w-100"
+              v-model="ruleForm[row.id]"
+              v-if="
+                row.tag === 'elDatePicker' ||
+                (row.type === 'datepick' && !lookFlag)
+              "
+              :disabled="row.disabled && !newFlag"
+              :datePickerType="formRule ? 'date' : 'daterange'"
+            >
+            </baseDatePicker>
+            <baseDatePicker
+              class="w-100"
+              v-model="ruleForm[row.id]"
+              v-if="row.type === 'datetiempick' && !lookFlag"
+              :disabled="row.disabled && !newFlag"
+              datePickerType="datetime"
+            >
+            </baseDatePicker>
+            <el-radio-group
+              v-model="ruleForm[row.id]"
+              v-if="
+                row.tag === 'elRadio' || (row.type === 'radio' && !lookFlag)
+              "
+              @input="changeRadio($event, index, indexRow, row)"
+              :disabled="row.disabled && !newFlag ? row.disabled : false"
+            >
+              <el-radio v-for="el in row.options" :label="el.id" :key="el.id">{{
+                  el.label
+                }}
+              </el-radio>
+            </el-radio-group>
+            <el-input
+              type="textarea"
+              v-if="row.type === 'textrea' && !lookFlag"
+              resize="none"
+              :rows="4"
+              placeholder="请输入内容"
+              show-word-limi
+              v-model="ruleForm[row.id]"
+              :disabled="row.disabled && !newFlag"
+            >
+            </el-input>
+
+            <el-select
+              class="w-100"
+              v-model="ruleForm[row.id]"
+              filterable
+              :multiple="row.multiple"
+              @change="selectChange($event, index, indexRow, row)"
+              :disabled="row.disabled || disabled"
+              :clearable="row.clearable ? row.clearable : true"
+              :placeholder="!row.placeholder ? '请选择' : row.placeholder"
+              v-if="
+                row.tag === 'select' || (row.type === 'select' && !lookFlag)
+              "
+            >
+              <el-option
+                v-for="(el, index) in row.options"
+                :key="!row.optionValue ? el['id'] : el[row.optionValue]"
+                :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
+                :value="!row.optionValue ? el['id'] : el[row.optionValue]"
+              >
+              </el-option>
+            </el-select>
+            <baseNewSelect
+              :ref="row.refName"
+              :apiInfo="row.apiInfo"
+              :searchApiInfo="row.searchApiInfo"
+              v-if="row.type === 'newSelect'"
+              v-model="ruleForm[row.id]"
+              :itemObj="row"
+              @showValue="showValueHandle"
+              :idKey="row.id"
+              :journalingType="row.journalingType"
+              :prop="row.prop"
+              :foucus="row.foucus"
+              :apiBody="row.apiBody"
+              :searchKey="row.searchKey"
+              @selectChange="selectChangeHanlde"
+            >
+            </baseNewSelect>
+            <slot
+              :name="row.slotName"
+              v-if="row.type === 'elSlot'"
+              :row="{row,ruleForm}"
+            ></slot>
+          </template>
+          <template v-else>
+            <div
+              v-if="
+                row.type !== 'radio' &&
+                row.type !== 'newSelect' &&
+                row.type !== 'select' &&
+                lookFlag
+              "
+            >
+              {{ ruleForm[row.id] }}
+            </div>
+            <baseNewSelect
+              :disabled="true"
+              :ref="row.refName"
+              :apiInfo="row.apiInfo"
+              :searchApiInfo="row.searchApiInfo"
+              v-if="row.type === 'newSelect'"
+              v-model="ruleForm[row.id]"
+              :itemObj="row"
+              @showValue="showValueHandle"
+              :idKey="row.id"
+              :journalingType="row.journalingType"
+              :prop="row.prop"
+              :foucus="row.foucus"
+              :apiBody="row.apiBody"
+              :searchKey="row.searchKey"
+            >
+            </baseNewSelect>
+            <el-radio-group
+              v-model="ruleForm[row.id]"
+              v-if="row.type === 'radio'"
+              @input="changeRadio($event, index, indexRow, row)"
+              :disabled="true"
+            >
+              <el-radio v-for="el in row.options" :label="el.id" :key="el.id">{{
+                  el.label
+                }}
+              </el-radio>
+            </el-radio-group>
+            <el-checkbox-group
+              class="w-100"
+              v-if="row.type === 'checkbox'"
+              v-model="ruleForm[row.id]"
+            >
+              {{ 123 }}
+              <el-checkbox
+                v-for="(el, index) in row.options"
+                :key="el.id"
+                :label="el.id"
+              >{{ el.label }}
+              </el-checkbox
+              >
+            </el-checkbox-group>
+            <baseCascader
+              v-if="row.type === 'treeselect'"
+              v-model="ruleForm[row.id]"
+              :disabled="row.disabled && !newFlag"
+              :itemObj="row"
+              :ruleForm="ruleForm"
+              :lookflag="lookFlag"
+              class="w-100"
+            ></baseCascader>
+            <el-select
+              class="w-100"
+              v-model="ruleForm[row.id]"
+              filterable
+              @change="selectChange($event, index, indexRow, row)"
+              :disabled="true"
+              :clearable="row.clearable ? row.clearable : true"
+              :placeholder="!row.placeholder ? '请选择' : row.placeholder"
+              v-if="row.type === 'select' && lookFlag"
+            >
+              <el-option
+                v-for="(el, index) in row.options"
+                :key="!row.optionValue ? el['id'] : el[row.optionValue]"
+                :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
+                :value="!row.optionValue ? el['id'] : el[row.optionValue]"
+              >
+              </el-option>
+            </el-select>
+          </template>
+          <slot :name="row.slotName" v-if="row.tag === 'elSlot'"></slot>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <slot name="main"></slot>
+    <el-form-item v-if="false" style="margin-top: 20px; padding: 0 20px">
+      <!-- flex="cross:center main:center" -->
+      <div flex="main:right">
+        <el-button
+          v-if="isFunBtn"
+          class="saveBtn"
+          type="primary"
+          :loading="loading"
+          @click="submitForm(refName)"
+        >提交
+        </el-button
+        >
+        <el-button v-if="!lookFlag" @click="resetForm(refName)">重置</el-button>
+        <el-button v-if="isFunBtn" @click="close()">取消</el-button>
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import baseCascader from './baseCascader/index.vue'
+import { deepClone } from '@/utils/index.js'
+import baseDatePicker from './baseDatePicker.vue'
+import baseNewSelect from './baseNewSelect'
+import { checkMobile } from '@/utils/util'
+import { BaseSelect } from './baseSelect.vue'
+
+export default {
+  components: {
+    // uploadFile,
+    // customCascader
+    baseNewSelect,
+    baseDatePicker,
+    baseCascader,
+    BaseSelect
+  },
+  props: {
+    labelWidth: {
+      type: String,
+      default: '80px'
+    },
+    labelPosition: {
+      type: String,
+      default: 'top'
+    },
+    // 提交按钮loading
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否校验正则（搜索模式）
+    formRule: {
+      type: Boolean,
+      default: true
+    },
+    refName: {
+      type: String,
+      default: 'ruleForm'
+    },
+    // 表单新建模式
+    newFlag: {
+      type: Boolean,
+      default: false
+    },
+    // 表单查看模式
+    lookFlag: {
+      type: [Boolean, String],
+      default: false
+    },
+    // 表单显示格式
+    spanNumber: {
+      type: Number,
+      default: 12
+    },
+    spanWidth: {
+      type: String,
+      default: '200px'
+    },
+    // 表单验证规则
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 表单页面结构数据
+    formRow: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示操作按钮
+    isFunBtn: {
+      type: Boolean,
+      default: true
+    },
+    formdata: {
+      type: Object
+    },
+    justifyContent: {
+      type: String,
+      default: 'flex-end'
+    },
+    marginBottom: {
+      type: String,
+      default: '0'
+    },
+    ruleForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    tableColumn: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      pickerOptionsSearch: {
+        shortcuts: [
+          {
+            text: '本月',
+            onClick(picker) {
+              picker.$emit('pick', [new Date(), new Date()])
+            }
+          },
+          {
+            text: '今年至今',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date(new Date().getFullYear(), 0)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近六个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setMonth(start.getMonth() - 6)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
+      },
+      // 表单数据
+      //   ruleForm: {},
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        },
+        shortcuts: [
+          {
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date())
+            }
+          },
+          {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', date)
+            }
+          }
+        ]
+      },
+      tempFormData: {}
+    }
+  },
+  watch: {
+    ruleForm: {
+      immediate: true, // 立即执行
+      deep: true, // 深度监听复杂类型内变化
+      handler(newVal, oldVal) {
+        this.$emit('dataChanges')
+      }
+    }
+  },
+
+  created() {
+    this.tempFormData = deepClone(this.ruleForm)
+  },
+  mounted() {
+    // this.ruleForm = this.formdata
+  },
+  computed: {},
+  methods: {
+    dblclick(val) {
+      this.$emit('dblclick', val)
+    },
+    selectChangeHanlde(val, row) {
+      console.log(val, row, 111)
+      this.$emit('selectChange', val, row)
+    },
+    showValueHandle() {
+    },
+    limitPhoneNum(value, data, id) {
+      if (value.toString().length > 11) {
+        data[id] = value.toString().slice(0, 11)
+      }
+    },
+    selectShow(row) {
+      try {
+        this.$emit('selectFormSearch', row)
+      } catch (error) {
+        console.log(this.ruleForm, row, '23232出错了')
+      }
+    },
+    close() {
+      this.$emit('closeDialog')
+    },
+    integerNumber(row) {
+      // row.rules?(v)=>()):''
+      // @input="(v)=>(row.row.number=v.replace(/[^\d]/g,''))"
+      // if(this.ruleForm[row.prop].replace(/[^\d]/g,'')){
+      // 	return this.ruleForm[row.prop].replace(/[^\d]/g,'')
+      //
+      // integer整数
+      if (row.rulesName == 'integer') {
+        this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/[^\d]/g, '')
+      }
+      // decimal小数
+      if (row.rulesName == 'decimal') {
+        this.ruleForm[row.id] = this.ruleForm[row.id]
+          .replace(/[^\d.]/g, '')
+          .replace(/\.{2,}/g, '.')
+          .replace('.', '$#$')
+          .replace(/\./g, '')
+          .replace('$#$', '.')
+          .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
+          .replace(/^\./g, '')
+      }
+      // 身份证
+      if (row.rulesName == 'identity') {
+        this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(
+          /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+          ''
+        )
+      }
+      // 手机号
+      if (row.rulesName == 'phone') {
+        this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(
+          /^1(3|4|5|7|8|9)\\d{9}$/,
+          ''
+        )
+        // this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/^1[3,4,5,6,7,8,9][0-9]{9}$/, '')
+        // this.ruleForm[row.prop] =  this.ruleForm[row.prop].replace(/1(\d{2})\d{4}(\d{4})/g,'').replace(/[^\d]/g, '')
+        // this.ruleForm[row.prop] =  this.ruleForm[row.prop].replace(/\.{11,}/g, '')
+        // /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
+      }
+      // 邮箱
+      if (row.rulesName == 'eMail') {
+        this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(
+          /^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/,
+          ''
+        )
+      }
+      // this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/[^\d]/g,'')
+    },
+    //根据地址获取经纬度
+    searchByStationName(type, form) {
+      this.$emit('inputBlur', type, form)
+      if (type == 'address') {
+        let address = this.ruleForm[type]
+        let that = this
+        var map = new BMap.Map('container')
+        map.centerAndZoom(address, 18)
+        map.enableScrollWheelZoom() //启用滚轮放大缩小，默认禁用
+        map.enableContinuousZoom() //启用地图惯性拖拽，默认禁用
+        map.addControl(new BMap.NavigationControl()) //添加默认缩放平移控件
+        map.addControl(new BMap.OverviewMapControl()) //添加默认缩略地图控件
+        map.addControl(
+          new BMap.OverviewMapControl({
+            isOpen: true,
+            anchor: BMAP_ANCHOR_BOTTOM_RIGHT
+          })
+        ) //右下角，打开
+        var localSearch = new BMap.LocalSearch(map)
+        localSearch.enableAutoViewport() //允许自动调节窗体大小
+        map.clearOverlays() //清空原来的标注
+        var keyword = address
+        localSearch.setSearchCompleteCallback(function(searchResult) {
+          var poi = searchResult.getPoi(0)
+          map.centerAndZoom(poi.point, 13)
+          var marker = new BMap.Marker(
+            new BMap.Point(poi.point.lng, poi.point.lat)
+          ) // 创建标注，为要查询的地方对应的经纬度
+          map.addOverlay(marker)
+          var content =
+            keyword +
+            '<br/><br/>经度：' +
+            poi.point.lng +
+            '<br/>纬度：' +
+            poi.point.lat
+          that.ruleForm['lng'] = poi.point.lng
+          that.ruleForm['lat'] = poi.point.lat
+          var infoWindow = new BMap.InfoWindow(
+            '<p style=\'font-size:14px;\'>' + content + '</p>'
+          )
+          marker.addEventListener('click', function() {
+            this.openInfoWindow(infoWindow)
+          })
+          // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
+        })
+        localSearch.search(keyword)
+      }
+    },
+    //计步器
+    handleChange(val) {
+      this.$emit('handleChange', val)
+    },
+    // 获取图片
+    getImage(imagePath) {
+      let licenseImg = imagePath.join(',')
+    },
+    // 处置前照片
+    getbeforeImgList(imagePath) {
+      let licenseImg = imagePath.join(',')
+      this.$set(this.ruleForm, 'beforeImgList', licenseImg)
+    },
+    // 处置材料
+    getmaterialsList(imagePath) {
+      let licenseImg = imagePath.join(',')
+      this.$set(this.ruleForm, 'materialsList', licenseImg)
+    },
+    // 处置后材料
+    getmaterialsListAfter(imagePath) {
+      let licenseImg = imagePath.join(',')
+      this.$set(this.ruleForm, 'materialsListAfter', licenseImg)
+    },
+    revealPhoto(licenseImg) {
+      this.$refs.imgFile.revealImg(licenseImg)
+    },
+    // 回显数据
+    echoFromData(echoData, otherField) {
+      let jsonData = []
+      this.formRow.forEach((item) => {
+        jsonData.push(item.elCol)
+      })
+      let newJson = [].concat.apply([], jsonData)
+      newJson.forEach((item) => {
+        if (this.ruleForm.factoryInFlag == 1) {
+          for (let i = 0; i < this.formRow[8].elCol.length; i++) {
+          }
+        }
+        if (this.ruleForm.factoryInFlag == 0) {
+          for (let i = 0; i < this.formRow[8].elCol.length; i++) {
+          }
+        }
+        this.$set(this.ruleForm, item.prop, echoData[item.prop])
+      })
+      // 回显自定义多级选择组件
+      if (typeof otherField == 'object') {
+        this.$refs[otherField.props][0].setEchoData(echoData[otherField.field])
+      }
+    },
+    // 获取指定字段参数
+    //参数propLabel ， 值value
+    getField(propLabel, value) {
+      this.$set(this.ruleForm, propLabel, value)
+    },
+    //弹窗赋值
+    choiceAssignment(value) {
+      this.ruleForm = Object.assign({}, value)
+      // this.$forceUpdate()
+    },
+    incomingParameters(vale) {
+      let ruleLength = 0
+      let valeLength = 0
+      for (let i in vale) {
+        valeLength = valeLength + 1
+      }
+      for (let i in this.ruleForm) {
+        ruleLength = ruleLength + 1
+      }
+      // if(ruleLength == valeLength){
+      // 	this.choiceAssignment(vale)
+      // }else{
+      // 	for(let i in vale){
+      // 		this.getField(i,vale[i])
+      // 	}
+      // }
+      for (let i in vale) {
+        this.getField(i, vale[i])
+      }
+    },
+    resetFormPlus(formName) {
+      for (let i in this.$refs[formName]) {
+        this.getField(i, '')
+      }
+    },
+    // 重置表单字段
+    resetField(field) {
+      if (this.ruleForm[field]) {
+        this.$set(this.ruleForm, field, '')
+        this.$refs['ruleForm'].clearValidate(field) // 清除表单特定属性
+      }
+    },
+    resetForm() {
+      this.$refs[this.rulesName].clearValidate() // 清除表单特定属性
+    },
+    resetFields() {
+      //   this.choiceAssignment({});
+      this.$refs.ruleForm.resetFields()
+    },
+    // 下拉框更改,可根据 index 与 indexRow 定位具体位置
+    selectChange(val, index, indexRow, row) {
+      this.$emit('onSelect', val, index, indexRow, row)
+      this.$forceUpdate()
+    },
+    switchChange(val, index, indexRow, row) {
+      this.$emit('switchChange', val, index, indexRow, row)
+    },
+    // 自定义级联选择器返回值
+    getCascader(value, field) {
+      this.$set(this.ruleForm, field, value)
+    },
+    // 表单提交
+    submitForm() {
+      this.$refs[this.refName].validate((valid) => {
+        if (valid) {
+          this.$emit('onSubmit', this.ruleForm)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 表单重置
+    resetForm() {
+      // let tempObj = deepClone(this.tempFormData);
+      // this.tableColumn
+      //   .filter((item) => item.disabled)
+      //   .forEach((item) => {
+      //     tempObj[item.id] = this.ruleForm[item.id];
+      //   });
+      //   this.choiceAssignment({});
+      // this.$emit("resetForm", tempObj);
+      this.$refs[this.refName].resetFields()
+    },
+    clearCheck(propName) {
+      this.ruleForm[propName] = ''
+    },
+    elDialogClick(row, index, indexRow) {
+      if (row.disabled) {
+        return
+      }
+      // row.prop
+      this.$emit('elDialogClick', row, index)
+    },
+    elDialogHover(row) {
+      row.elDialogHoverType = true
+    },
+    elDialogLeave(row) {
+      // row.elDialogHoverType = false
+    },
+    // 单选按钮组input事件
+    changeRadio(val, index, indexRow, row) {
+      this.$emit('onChangeRadio', val, index, indexRow, row)
+    },
+    normalizer(node, row) {
+      //去掉children=null的属性
+      if (node.children == null || node.children == 'null') {
+        delete node.children
+      }
+      // return{
+      // 	...node,
+      // 	label:nodeLabel
+      // }
+    },
+    selectTree(row) {
+      this.$emit('selectTree')
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.validateField(row.id)
+        })
+      }
+    },
+    treeSelectClear() {
+      this.$refs.selectTree.clear()
+    }
+  },
+  mounted() {
+    // this.$refs.ruleForm.resetFields();
+  }
+}
+</script>
+<style>
+.el-form-item__error {
+}
+
+.el-form-item__label {
+  /* width: 25%; */
+  line-height: 1.2;
+}
+
+
+.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+  margin-right: 0;
+  content: "";
+}
+</style>
+<style scoped lang="scss">
+::v-deep .el-form-item--medium .el-form-item__content {
+  line-height: 20px !important;
+  flex: 1;
+}
+
+::v-deep .el-form-item__label {
+  padding: 0 0 10px !important;
+}
+
+.label {
+  /* @include fontBase(16px, #333333) ; */
+  color: #999;
+  font-size: 14px !important;
+  display: block;
+  width: 180px;
+  // text-align: left;
+}
+
+> > > .el-form-item__label {
+  width: 100px;
+  text-align: right !important;
+  margin-right: 10px !important;
+  padding: 0 !important;
+}
+
+::v-deep .el-form-item__label:before {
+  display: none;
+}
+
+::v-deep .el-form-item__content {
+  margin-left: 10px;
+  // width: calc(100% - 100px);
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.saveBtn {
+  /* width: 410px; */
+}
+
+.one {
+  width: calc(100% - 15px) !important;
+}
+
+.elDialog {
+  display: flex;
+  width: 100%;
+  /* width: calc(100% - 14px);1 */
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  padding: 0 15px;
+  cursor: pointer;
+
+  i {
+    color: #c0c4cc;
+  }
+}
+
+.showText {
+  /* width: 100%; */
+  /* width: calc(100% - 110px); */
+  /*让长段文本不换行*/
+  white-space: nowrap;
+  /*设置文本超出元素宽度部分隐藏*/
+  overflow-x: hidden;
+  /*设置文本超出部分用省略号显示*/
+  text-overflow: ellipsis;
+}
+
+.ruleFormClass {
+  ::v-deep .el-input__inner {
+    border-color: #e6a23c !important;
+  }
+
+  .elDialog {
+    border-color: #e6a23c !important;
+  }
+
+  ::v-deep .el-radio__inner {
+    border-color: #e6a23c !important;
+  }
+
+  .el-radio.is-bordered {
+    border-color: #e6a23c !important;
+  }
+
+  ::v-deep .vue-treeselect__control {
+    border-color: #e6a23c !important;
+  }
+
+  ::v-deep .el-textarea__inner {
+    border-color: #e6a23c !important;
+  }
+}
+
+::v-deep.stretchNone {
+  .el-textarea__inner {
+    resize: none;
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseNewSelect.vue b/src/views/DataCenterOptions/compoments/baseNewSelect.vue
new file mode 100644
index 0000000..d222cac
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseNewSelect.vue
@@ -0,0 +1,321 @@
+<template>
+  <div>
+    <template v-if="!lookflag">
+      <el-select
+        v-loading="selLoading"
+        class="w-100"
+        v-model="selectValue"
+        :placeholder="placeholder"
+        :clearable="false"
+        style="width: 240px"
+        size="mini"
+        ref="mySelect"
+        :reserve-keyword="true"
+        :disabled="disabled"
+        filterable
+        popper-class="sele"
+        :filter-method="filter"
+        @change="fun"
+        @focus="funx"
+        @blur="funb"
+        @visible-change="hidden"
+        clearable
+      >
+        <el-option
+          v-for="(item, index) in options"
+          :key="index"
+          :label="item.label"
+          remote
+          :value="item.value"
+          placeholder="请输入"
+        >
+        </el-option>
+
+        <div style="bottom: -10px">
+          <el-pagination
+            v-if="pageModel.total > pageModel.limit"
+            small
+            @current-change="handleCurrentChange"
+            :current-page="pageModel.pageIndex"
+            :page-size="pageModel.limit"
+            layout="prev, pager,next,total"
+            :total="pageModel.total"
+          >
+          </el-pagination>
+        </div>
+      </el-select>
+    </template>
+    <template v-else
+      ><div v-loading="selLoading">{{ showValue }}</div></template
+    >
+  </div>
+</template>
+
+
+
+<style scoped lang="scss">
+::v-deep .el-input--mini .el-input__inner {
+  height: 38px;
+}
+.w-100 {
+  width: 100% !important;
+}
+.drop >>> .el-input__inner {
+  background: #5183ff !important;
+  color: white;
+  border: none;
+  height: 26px;
+  padding: 10px 22px 10px 10px;
+  text-align: center;
+}
+.drop {
+  width: 250px;
+}
+.drop >>> .el-select .el-input .el-select__caret {
+  display: none;
+}
+</style>
+
+
+<script>
+import debounce from "lodash/debounce";
+import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
+export default {
+  props: {
+    searchKey: {
+      type: String,
+      default: "",
+    },
+    ruleForm: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    selectInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: String,
+    value: {
+      type: [String, Number],
+    },
+    itemObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    lookflag: {
+      type: Boolean,
+      default: false,
+    },
+    idKey: {
+      type: [Number, String],
+      default: 0,
+    },
+    journalingType: {
+      type: [String, Number],
+      default: "subject",
+    },
+    apiInfo: {
+      type: Object,
+    },
+    searchApiInfo: {
+      type: Object,
+    },
+    prop: {
+      type: Object,
+      default: () => {
+        return {
+          label: "names",
+          id: "codes",
+        };
+      },
+    },
+    foucus: {
+      type: Boolean,
+      default: true,
+    },
+    apiBody: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      pageModel: {
+        total: 0,
+        pageIndex: 1,
+        limit: 10,
+      },
+      selLoading: false,
+      showValue: "",
+      lookLoading: false,
+      options: [],
+      tempObj: {},
+    };
+  },
+  computed: {
+    selectValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  created() {
+    if (this.value) {
+      console.log(this.value, "查询");
+      this.searchCodes(this.value);
+    }
+  },
+  mounted() {},
+  methods: {
+    // 页码改变事件
+    handleCurrentChange(val) {
+      this.pageModel.pageIndex = val;
+      this.getUserModuleHandle();
+    },
+    // select选中更改事件
+    fun(val) {
+      // this.$emit(`${this.funName}`, arr);
+      this.$emit("selectChange", val, this.itemObj);
+      // this.searchShowValue(val);
+      this.$nextTick(() => {
+        this.$emit("blur");
+      });
+    },
+    // searchShowValue(val) {
+    //   this.options.forEach((item) => {
+    //     if (item.codes == val) {
+    //       this.showValue = item.names;
+    //       this.$nextTick(() => {
+    //         this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
+    //       });
+    //     }
+    //   });
+    // },
+    // 获得焦点
+    funx() {
+      if (this.foucus) {
+        this.getUserModuleHandle();
+      }
+    },
+    clearOptions() {
+      if (this.options.length) {
+        this.pageModel.pageIndex = 1;
+        this.options = [];
+        this.tempObj = null;
+      }
+    },
+    // 失去焦点
+    funb() {
+      // this.$nextTick(() => {
+      //   this.$emit("blur");
+      // });
+    },
+    hidden(val) {
+      if (!val) {
+        this.$nextTick(() => {
+          this.$emit("blur");
+        });
+      }
+    },
+    //搜索方法,将符合的数据存入options中，并分页展示
+    filter: debounce(function (val) {
+      this.pageModel.pageIndex = 1;
+      this.getUserModuleHandle(val);
+    }, 300),
+    // filter(val) {
+
+    // },
+    focus() {
+      this.$refs.mySelect.focus();
+    },
+    async getUserModuleHandle(val = null, obj = null) {
+      if (obj) {
+        this.tempObj = obj;
+      }
+      this.selLoading = true;
+      const res = await getUserModuleApi(this.apiInfo, {
+        journalingType: this.journalingType,
+        names: val,
+        pageNum: this.pageModel.pageIndex,
+        pageSize: 100,
+        ...obj,
+        ...this.tempObj,
+        ...this.apiBody,
+      });
+      this.selLoading = false;
+      if (res.status == 200) {
+        this.options = [];
+        if (res.attribute instanceof Array) {
+          this.pageModel.total = res.attribute.length;
+          res.attribute.forEach((item) => {
+            this.options.push({
+              value: item[this.prop.id],
+              label: item[this.prop.label],
+            });
+          });
+        } else {
+          this.pageModel.total = res.attribute.total;
+          res.attribute.list.forEach((item) => {
+            this.options.push({
+              value: item[this.prop.id],
+              label: item[this.prop.label],
+            });
+          });
+        }
+      }
+    },
+    async searchCodes(codes) {
+      let obj = {};
+      if (this.searchKey) {
+        obj[this.searchKey] = codes;
+      }
+      const res = await getUserModuleApi(this.searchApiInfo, {
+        ...obj,
+      });
+      console.log(res, "查询结果");
+      if (res.status == 200 && res.attribute.main) {
+        if (!this.options.length) {
+          console.log(this.prop.id, this.prop.label);
+          this.options.push({
+            value: res.attribute.main[this.prop.id],
+            label: res.attribute.main[this.prop.label],
+          });
+        }
+        this.showValue = res.attribute.main[this.prop.label];
+        console.log(this.showValue);
+        this.$nextTick(() => {
+          this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
+        });
+      }
+    },
+  },
+  beforeDestroy() {},
+  //监听来自父组件的数据，当数据更新时，重置展示
+  watch: {
+    value: {
+      handler: function (newv, oldv) {
+        console.log("进入watch", newv);
+        if(newv){
+          this.searchCodes(newv);
+        }
+      },
+    },
+  },
+};
+</script>
diff --git a/src/views/DataCenterOptions/compoments/basePage.vue b/src/views/DataCenterOptions/compoments/basePage.vue
new file mode 100644
index 0000000..3a34e28
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/basePage.vue
@@ -0,0 +1,79 @@
+<!-- 
+* @name: 自定义分页组件
+* @author: Zhangpengcheng
+* @date: 2022-09-05
+-->
+<template>
+	<div class="pageTion" flex="main:right">
+		<el-pagination ref="pagination" :page-sizes="[10,20, 30, 40,100]" :total="pageModel.total" :current-page="pageModel.page" :page-size="pageModel.limit"
+			@current-change="currentChange" @size-change="sizeChange" background layout="prev, pager, next,jumper,total,sizes">
+		</el-pagination>
+	</div>
+</template>
+<script>
+	export default {
+		props: {
+			pageModel: {
+				default: null
+			}
+		},
+		data() {
+			return {}
+		},
+		created() {},
+		mounted() {
+			this.$nextTick(() => {
+			})
+		},
+		computed: {},
+		methods: {
+			sizeChange(val) {
+				let pageModel = this.pageModel;
+				pageModel.limit = val;
+				this.$emit('update:pageModel', pageModel)
+				this.$emit('onPageChange')
+			},
+			currentChange(val) {
+				let pageModel = this.pageModel;
+				pageModel.pageIndex = val;
+				this.$emit('update:pageModel', pageModel)
+				this.$emit('onPageChange')
+			},
+		},
+	}
+</script>
+<style scoped lang='scss'>
+.pageTion {
+  width: 100%;
+  margin: 10px 0;
+}
+::v-deep .el-pager li {
+  background-color: #f9f9f9 !important ;
+  width: 36px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  border-radius: 50% !important;
+}
+::v-deep .el-pager .active {
+  background-color: #409EFF !important; 
+}
+::v-deep .el-pagination button {
+  background-color: #f9f9f9 !important;
+  color: #333333 !important;
+  font-size: 14px !important;
+  border-radius: 18px !important;
+  width: 98px !important;
+  height: 36px !important;
+}
+::v-deep .el-pagination__total {
+  line-height: 36px !important;
+}
+::v-deep .el-pagination__jump {
+  height: 36px !important;
+  line-height: 36px !important;
+}
+::v-deep .el-input__inner {
+  height: 36px !important;
+  line-height: 36px !important;
+}
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseRadio.vue b/src/views/DataCenterOptions/compoments/baseRadio.vue
new file mode 100644
index 0000000..8b8e93f
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseRadio.vue
@@ -0,0 +1,24 @@
+// 单选框
+<template>
+  <el-radio-group v-model="itemObj.value">
+    <el-radio v-for="item in itemObj.options" :label="item.id" :key="item.id">{{item.label}}</el-radio>
+  </el-radio-group>
+</template>
+
+<script>
+export default {
+  props: {
+    itemObj: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      radio: "",
+    };
+  },
+  created(){
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/DataCenterOptions/compoments/baseSelect.vue b/src/views/DataCenterOptions/compoments/baseSelect.vue
new file mode 100644
index 0000000..9fdb3fa
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseSelect.vue
@@ -0,0 +1,29 @@
+// 下拉框
+<template>
+  <el-select v-model="itemObj.value" filterable placeholder="请选择">
+    <el-option
+      v-for="item in itemObj.options"
+      :key="item.id"
+      :label="item.label"
+      :value="item.id"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    props:{
+        itemObj:{
+            type:Object,
+            default:()=>{}
+        }
+    },
+    data() {
+      return {
+      }
+    },
+    created(){
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/DataCenterOptions/compoments/baseTable.vue b/src/views/DataCenterOptions/compoments/baseTable.vue
new file mode 100644
index 0000000..3a30cdc
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseTable.vue
@@ -0,0 +1,634 @@
+<!--
+* @name: 自定义 el-table
+* @author: Zhangpengcheng
+* @date: 2022-08-30
+* tabLoading 加载  headerStyle表头格式  tableData数据 border纵向边框    @current-change单选触发   summary-method合计  @cell-click某个单元格点击触发事件  @sort-change触发后台排序
+* @row-click 当某一行被点击时会触发该事件 highlight-current-row是否高亮  show-summary是否合计  SummariesIndex合计需要的index @selection-change多选 tableHeight高度
+* :style="'height:'+ tableHeight + '!important'"
+-->
+<template>
+  <!-- :row-class-name="tableRowClassName" -->
+  <div class="app-container">
+    <el-table
+      v-loading="tabLoading"
+      ref="elTable"
+      :header-cell-style="headerStyle"
+      :data="tableData"
+      :border="border"
+      @current-change="handleCurrentChange"
+      :summary-method="getSummaries"
+      :row-class-name="tableRowClassName"
+      :size="size"
+      :row-key="getRowKey"
+      @cell-click="getCellClick"
+      @row-click="getRowClick"
+      :highlight-current-row="highlightCurrent"
+      :show-summary="showsummary"
+      :SummariesIndex="SummariesIndex"
+      @row-dblclick="rowDblclick"
+      @selection-change="handleSelectionChange"
+      @select="select"
+      @select-all="selectAll"
+      style="width: 100%"
+      :cell-class-name="tableCellName"
+      :height="tableHeight"
+      :max-height="tableMaxHeight"
+      @sort-change="sortChange"
+      :key="itemKey"
+      @cell-dblclick="doubleClick"
+      fit
+    >
+      <el-table-column
+        align="center"
+        :reserve-selection="true"
+        v-if="showSelect"
+        type="selection"
+        width="55"
+      >
+      </el-table-column>
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        v-if="showIndex"
+        width="55"
+      >
+        <template slot-scope="scope">
+          <div v-if="indexOperate">
+            <p v-if="scope.$index + 1 != tableData.length">
+              {{ scope.$index + 1 }}
+            </p>
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              circle
+              v-else
+              size="mini"
+              @click="newRow"
+            >
+            </el-button>
+          </div>
+          <p v-else>{{ scope.$index + 1 }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="单选" align="center" v-if="slotrow" width="60">
+        <template slot-scope="scope">
+          <!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作              -->
+          <el-radio v-model="radioIndex" :label="scope.$index"
+            ><span></span
+          ></el-radio>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        :key="ind + 1"
+        :width="item.width ? item.width : 'auto'"
+        :label="item.title"
+        :prop="item.id"
+        :show-overflow-tooltip="item.tooltip"
+        :sortable="item.sortable"
+        :align="item.align ? item.align : 'center'"
+        header-align="center"
+        :fixed="item.fixed"
+        v-for="(item, ind) in tableColumn"
+      >
+        <!-- :isClick="item.other && item.other.isClick ? item.other.isClick : false" -->
+        <template slot-scope="scope">
+          <!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作              -->
+          <slot :name="item.id" :row="slotrow ? scope : scope.row">
+            <!--  插槽后备内容：如父组件不使用插槽则使用后备内容                  -->
+            <!-- color:
+                  item.other && item.other.color ? item.other.color : '#333',
+                cursor:
+                  item.other && item.other.isClick ? 'pointer' : 'default', -->
+            <template
+              class="item"
+              effect="dark"
+              placement="top"
+              v-if="
+                item.type !== 'select' &&
+                item.type !== 'treeselect' &&
+                item.type !== 'datepick' &&
+                item.type !== 'check'
+              "
+            >
+              <div
+                style="
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+              >
+                <span
+                  :style="{
+                    color: item.color ? item.color : '#333',
+                    cursor: item.isClick ? 'pointer' : 'default',
+                  }"
+                  >{{
+                    !item.stateOption
+                      ? scope.row[item.id]
+                      : item.stateOption[scope.row[item.id]]
+                  }}</span
+                >
+              </div>
+            </template>
+            <template v-else>
+              <baseNewSelect
+                v-if="item.type === 'select'"
+                v-model="scope.row[item.id]"
+                :lookflag="true"
+                :itemObj="item"
+                :ruleForm="scope.row"
+              ></baseNewSelect>
+              <baseCascader
+                v-if="item.type === 'treeselect'"
+                v-model="scope.row[item.id]"
+                :lookflag="true"
+                :itemObj="item"
+                :ruleForm="scope.row"
+              >
+              </baseCascader>
+              <div v-if="item.type === 'datepick'">
+                {{ scope.row[item.id].split("T")[0] }}
+              </div>
+              <el-checkbox v-model="scope.row[item.id]"></el-checkbox>
+            </template>
+          </slot>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        :width="funWidth"
+        v-if="funData.length != 0"
+        align="center"
+        header-align="center"
+        :fixed="fixedTable"
+      >
+        <template slot-scope="scope">
+          <div flex="cross:center main:center">
+            <div
+              v-for="(item, index) in funData"
+              :key="index"
+              :class="{ 'mr-12': index + 1 != funData.length }"
+              @click.stop="funcEmit(scope.row, funData[index])"
+              class="btnText"
+              :style="{ background: item.color ? item.color : 'blue' }"
+              style="padding: 3px 10px; border-radius: 20px"
+            >
+              <span
+                style="color: #fff; font-weight: 700"
+                v-if="!item.ifField && !item.hiddenField"
+                >{{ item.text }}</span
+              >
+              <span
+                :style="{
+                  color:
+                    scope.row[item.ifField] == item.fieldVal
+                      ? item.fieldColor
+                      : item.color,
+                }"
+                v-if="item.ifField"
+              ></span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <!-- 操作 、自定义插槽 -->
+      <slot v-else></slot>
+    </el-table>
+  </div>
+</template>
+<script>
+import baseCascader from "./baseCascader/index";
+import baseNewSelect from "./baseNewSelect.vue";
+import Sortable from "sortablejs";
+import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
+export default {
+  props: {
+    // 最大高度
+    tableMaxHeight: {
+      type: [String, Number],
+    },
+    // loading
+    tabLoading: {
+      type: Boolean,
+      default: false,
+    },
+    // 序号操作icon
+    indexOperate: {
+      type: Boolean,
+      default: false,
+    },
+    // 固定列
+    fixedTable: {
+      type: [Boolean, String],
+      default: false,
+    },
+    // 读取字段
+    slotrow: {
+      type: Boolean,
+      default: false,
+    },
+    showsummary: {
+      type: Boolean,
+      default: false,
+    },
+    // 表格高度
+    tableHeight: {
+      type: [Number, String],
+    },
+    // 表格高度
+    // windowHight: {
+    // 	type: [ String],
+    // 	default: 'auto'
+    // },
+    // 表格尺寸
+    size: {
+      type: String,
+      default: "small",
+    },
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 表头数据
+    tableColumn: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 合计的index
+    SummariesIndex: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 是否显示选择框
+    showSelect: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示序号
+    showIndex: {
+      type: Boolean,
+      default: false,
+    },
+    // 操作选项
+    funData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 操作按钮宽度
+    funWidth: {
+      type: Number,
+      default: 100,
+    },
+    // 是否带有纵向边框
+    border: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 单选是否高亮
+    highlightCurrent: {
+      type: Boolean,
+      default: false,
+    },
+    // 默认拖动
+    sortableSwitch: {
+      type: Boolean,
+      default: false,
+    },
+    // headerStyle:{
+    // 	type: String,
+    // 	default:{
+    // 		'background-color': '#F5F5F5',
+    // 		'color': '#333333',
+    // 	},
+    // }
+  },
+  data() {
+    return {
+      headerStyle: {
+        "background-color": "#F5F5F5",
+        color: "#333333",
+      },
+      itemKey: true,
+      radioIndex: false,
+    };
+  },
+  created() {},
+  mounted() {
+    this.$emit("mainTableMounted");
+    this.rowDrop();
+    // 解决滚动条问题
+    // var tableBody = this.$refs.elTable.$refs.footerWrapper
+    // tableBody.addEventListener('scroll', () => {
+    //   // 滚动距离
+    //   const scrollLeft = tableBody.scrollLeft
+    //   this.$refs.elTable.$refs.bodyWrapper.scrollLeft = scrollLeft
+    // })
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    setCurrent(row) {
+      this.$refs.elTable.setCurrentRow(row);
+    },
+    selectShow(item, row) {
+      const res = getUserModuleApi(
+        {
+          tl: "optionService",
+          as: "sys_template",
+          dj: "queryTemplateData",
+        },
+        {
+          service: item.service,
+          id: row[item.id],
+          label: item.label,
+          value: item.value,
+        }
+      ).then((val) => {
+        this.$emit("selectValueGeT", item, row, val.attribute[0][item.label]);
+      });
+
+      // console.log(res.attribute[0][item.label])
+      // return 1232321;
+    },
+    select(selection, row) {
+      this.$emit("select", selection, row);
+    },
+    selectAll(selection) {
+      this.$emit("selectAll", selection);
+    },
+    setTableKey() {
+      this.itemKey = !this.itemKey;
+    },
+    // 单元格双击事件
+    doubleClick(row, column, cell, event) {
+      this.$emit("doubleClick", row, column, cell, event);
+    },
+    // 取消多选
+    clearSelect() {
+      this.$refs.elTable.clearSelection();
+    },
+    /**
+     * @description 单元格点击事件
+     * @author duanyipeng
+     * @createDate 2020/7/6 21:36
+     * @param { Object } row 每一行数据
+     * @param { Object } column 选中单元格表头数据
+     * @use {
+     *          other:{
+     *              isClick:true
+     *          }
+     *      }
+     */
+    getCellClick(row, column) {
+      let label = column.label;
+      // let itemColumn = this.tableColumn.filter(item => {
+      // 	return item.label === label
+      // })
+      // if (itemColumn[0] && itemColumn[0].other && itemColumn[0].other.isClick) {
+      // 	this.$emit('onCellClick', row, label)
+      // }
+      this.$emit("onCellClick", row, label);
+    },
+    // 每一行点击事件
+    getRowClick(row, column, event) {
+      this.handleCurrentChange(row);
+      this.$emit("onRowClick", row);
+    },
+    // 每一行双击点击事件
+    rowDblclick(row, column, event) {
+      if (this.showSelect) {
+        this.toggleSelection([row]);
+      }
+      this.$emit("rowDblclick", row);
+    },
+    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
+    getRowKey(row) {
+      return row.id;
+    },
+    // 多选事件
+    handleSelectionChange(selectTable) {
+      this.$emit("onSelectionChange", selectTable);
+    },
+    /**
+     * 触发操作事件
+     * 参数1：当前按钮索引
+     * 参数2：当前按钮所在行数据
+     */
+    funcEmit(row, item) {
+      this.$emit("onFunc", row, item);
+    },
+    // 排序改变 	降序:descending;升序ascending
+    sortChange(column) {
+      this.$emit("sortChange", column);
+    },
+    //单选
+    handleCurrentChange(val) {
+      this.radioIndex = val.index;
+      this.$emit("radioChange", val);
+    },
+    clearRadioIndex() {
+      this.radioIndex = false;
+    },
+    setRadioIndex(index) {
+      this.radioIndex = index;
+    },
+    // 添加index
+    tableCellName({ row, column, rowIndex, columnINdex }) {
+      row.index = rowIndex;
+      column.index = columnINdex;
+    },
+    // tableRowClassName({	row,rowIndex}) {
+    // 	if (rowIndex === 1) {
+    // 	  return 'warning-row';
+    // 	} else if (rowIndex === 3) {
+    // 	  return 'success-row';
+    // 	}
+    // 	return '';
+    // },
+    tableRowClassName: function ({ row, rowIndex }) {
+      let data = "";
+      this.$emit("row-class-name", { row: row, rowIndex: rowIndex }, (val) => {
+        data = val;
+      });
+      return data; //属性名必须返回一个string
+    },
+    newRow() {
+      this.$emit("newRow");
+      this.$nextTick(() => {
+        this.$refs.elTable.bodyWrapper.scrollTop =
+          this.$refs.elTable.bodyWrapper.scrollHeight;
+      });
+    },
+    //行拖拽,排序方法
+
+    rowDrop() {
+      if (!this.sortableSwitch) {
+        return;
+      }
+      const el = this.$refs.elTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      this.sortable = Sortable.create(el, {
+        ghostClass: "sortable-ghost",
+        setData: function (dataTransfer) {
+          dataTransfer.setData("Text", "");
+        },
+        onEnd: (evt) => {
+          // console.log(evt,"evt")
+          //   console.log(evt.oldIndex, "oldIndex");
+          // console.log(this.tableData)
+          // console.log(evt.oldIndex, this.tableData.splice(evt.oldIndex, 1))
+          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
+          //   console.log(targetRow, "targetRow");
+          //   console.log(evt.newIndex, "newIndex");
+          this.tableData.splice(evt.newIndex, 0, targetRow);
+        },
+      });
+    },
+    // 默认选择
+    toggleSelection(rowData, selected) {
+      if (rowData) {
+        rowData.forEach((row) => {
+          this.$refs.elTable.toggleRowSelection(row, selected);
+        });
+      } else {
+        this.$refs.elTable.clearSelection();
+      }
+    },
+    // 合计
+    getSummaries(params) {
+      const { columns, data } = params;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "合计";
+          return;
+        }
+        this.SummariesIndex.forEach((el) => {
+          if (index == el) {
+            const values = data.map((item) => Number(item[column.property]));
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!isNaN(value)) {
+                  return prev + curr;
+                } else {
+                  return prev;
+                }
+              }, 0);
+              sums[index] = sums[index].toFixed(2);
+            } else {
+              sums[index] = "";
+            }
+          }
+        });
+      });
+      return sums;
+    },
+  },
+  components: {
+    baseNewSelect,
+    baseCascader,
+  },
+};
+</script>
+
+<style>
+.btnText {
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+.el-table .warning-row {
+  background: #ffe562;
+}
+
+.el-table .success-row {
+  background: #acf389;
+}
+
+.el-table .denger-row {
+  background: #e13501;
+}
+
+.fiexTableBottm {
+  position: sticky;
+  bottom: 0;
+}
+</style>
+<style scoped lang="scss">
+>>> .el-radio__label {
+  // display: none;
+}
+
+.btnText {
+  cursor: pointer;
+}
+
+.mr-12 {
+  margin-right: 12px;
+}
+
+::v-deep .cell {
+  font-weight: 400;
+}
+::v-deep .el-table__row {
+  height: 60px !important;
+  background-color: #fcfcfc;
+}
+::v-deep .el-table__header {
+  height: 50px !important;
+  background-color: #fcfcfc;
+}
+// ::v-deep .el-table .sort-caret.ascending {
+// 	top: 1px
+// }
+
+// ::v-deep .el-table .sort-caret.descending {
+// 	bottom: 2px
+// }
+
+// ::v-deep .el-table .caret-wrapper {
+// 	height: 23px;
+// }
+
+// 解决滚动条问题 div ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
+//   overflow-x: hidden !important;
+//   z-index: 2 !important;
+// }
+// div ::v-deep .el-table__footer-wrapper {
+//   overflow-x: auto;
+//   border-top: 1px solid #f4f4f4;
+// }
+// ::v-deep .el-table {
+//   overflow-x: auto;
+// }
+// ::v-deep .el-table__header-wrapper,
+// ::v-deep .el-table__body-wrapper,
+// ::v-deep .el-table__footer-wrapper {
+//   overflow: visible;
+// }
+// ::v-deep .el-table::after {
+//   position: relative;
+// }
+// ::v-deep .el-table--scrollable-x ::v-deep .el-table__body-wrapper {
+//   overflow: visible;
+// }
+// ::v-deep .el-table {
+//   .el-table__body-wrapper {
+//     z-index: 2;
+//   }
+// }
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseTableForm_v2.vue b/src/views/DataCenterOptions/compoments/baseTableForm_v2.vue
new file mode 100644
index 0000000..d067843
--- /dev/null
+++ b/src/views/DataCenterOptions/compoments/baseTableForm_v2.vue
@@ -0,0 +1,741 @@
+<!--
+* @name: 自定义 el-table
+* @author: Zhangpengcheng
+* @date: 2022-08-30
+* tabLoading 加载  headerStyle表头格式  tableData数据 border纵向边框    @current-change单选触发   summary-method合计  @cell-click某个单元格点击触发事件  @sort-change触发后台排序
+* @row-click 当某一行被点击时会触发该事件 highlight-current-row是否高亮  show-summary是否合计  SummariesIndex合计需要的index @selection-change多选 tableHeight高度 
+* :style="'height:'+ tableHeight + '!important'"
+-->
+<template>
+  <!-- :row-class-name="tableRowClassName" -->
+  <div class="app-container">
+    <el-table
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      v-loading="tabLoading"
+      ref="elTable"
+      :header-cell-style="headerStyle"
+      :data="tableInfo.tableData"
+      :border="border"
+      @current-change="handleCurrentChange"
+      :summary-method="getSummaries"
+      :row-class-name="tableRowClassName"
+      :size="size"
+      row-key="id"
+      @cell-click="getCellClick"
+      @row-click="getRowClick"
+      :highlight-current-row="highlightCurrent"
+      :show-summary="showsummary"
+      :SummariesIndex="SummariesIndex"
+      @row-dblclick="rowDblclick"
+      @selection-change="handleSelectionChange"
+      @select="select"
+      @select-all="selectAll"
+      style="width: 100%"
+      :cell-class-name="tableCellName"
+      :max-height="tableMaxHeight"
+      @sort-change="sortChange"
+      :key="itemKey"
+      @cell-dblclick="doubleClick"
+      fit
+    >
+      <el-table-column
+        align="center"
+        :reserve-selection="true"
+        v-if="showSelect"
+        type="selection"
+        width="55"
+      >
+      </el-table-column>
+      <el-table-column
+        fixed
+        label="序号"
+        align="center"
+        type="index"
+        v-if="showIndex"
+        width="55"
+      >
+        <template slot-scope="scope">
+          <div v-if="indexOperate && !lookflag">
+            <p v-if="scope.$index + 1 != tableInfo.tableData.length">
+              {{ scope.$index + 1 }}
+            </p>
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              circle
+              v-else
+              size="mini"
+              @click="newRow"
+            >
+            </el-button>
+          </div>
+          <p v-else>{{ scope.$index + 1 }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="单选" align="center" v-if="slotrow" width="60">
+        <template slot-scope="scope">
+          <!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作              -->
+          <el-radio v-model="radioIndex" :label="scope.$index"
+            ><span></span
+          ></el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :key="item.id"
+        :width="item.width ? item.width : 'auto'"
+        :label="item.title"
+        :prop="item.id"
+        :show-overflow-tooltip="item.tooltip"
+        :sortable="item.sortable"
+        :align="item.align ? item.align : 'center'"
+        header-align="center"
+        :fixed="item.fixed"
+        v-for="(item, ind) in tableInfo.detailFields"
+        v-if="!item.hidden"
+      >
+        <!-- :isClick="item.other && item.other.isClick ? item.other.isClick : false" -->
+        <template slot-scope="scope">
+          <!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作              -->
+          <slot
+            :name="item.id"
+            :row="
+              slotrow
+                ? scope
+                : [scope.row, item, tableInfo.tableData[scope.row.index]]
+            "
+          >
+            <template v-if="!lookflag">
+              <!-- <button @click="test(scope)">按钮</button> -->
+              <!-- v-model="tableInfo.tableData[scope.row.index][item.id]" -->
+
+              <el-input
+                :maxlength="item.maxlength ? item.maxlength : '50'"
+                v-if="item.type === 'input'"
+                v-model="scope.row[item.id]"
+                placeholder=""
+              ></el-input>
+              <el-input
+                :maxlength="item.maxlength ? item.maxlength : '50'"
+                v-if="item.type === 'number'"
+                type="number"
+                onkeyup="value=value.replace(/[^\d]/g,'')"
+                v-model="scope.row[item.id]"
+                placeholder=""
+                min="1"
+              ></el-input>
+              <el-checkbox
+                v-if="item.type === 'checkbox'"
+                v-model="scope.row[item.id]"
+              ></el-checkbox>
+              <BaseSelect
+                v-if="item.type === 'select'"
+                v-model="scope.row[item.id]"
+                :selectInfo="item"
+                :itemObj="item"
+                :ruleForm="tableInfo.tableData[scope.row.index]"
+              ></BaseSelect>
+              <baseCascader
+                v-if="item.type === 'treeselect'"
+                v-model="scope.row[item.id]"
+                :itemObj="item"
+                :ruleForm="tableInfo.tableData[scope.row.index]"
+              >
+              </baseCascader>
+              <el-link
+                style="
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+                v-if="item.type === 'click'"
+                @click="clickBoxHandle(scope.row)"
+                type="primary"
+                >{{
+                  tableInfo.tableData[scope.row.index][item.id]
+                    ? tableInfo.tableData[scope.row.index][item.id]
+                    : "点击这里..."
+                }}</el-link
+              >
+              <div v-if="item.type === 'text'">
+                <el-tooltip class="item" effect="dark" placement="top">
+                  <div slot="content">
+                    {{ tableInfo.tableData[scope.row.index][item.id] }}
+                  </div>
+                  <div
+                    style="
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    "
+                  >
+                    {{ tableInfo.tableData[scope.row.index][item.id] }}
+                  </div>
+                </el-tooltip>
+              </div>
+              <BaseDatePicker
+                v-if="item.type === 'datepick'"
+                v-model="scope.row[item.id]"
+              ></BaseDatePicker>
+              <BaseDatePicker
+                v-if="item.type === 'datetimepick'"
+                datePickerType="datetime"
+                v-model="scope.row[item.id]"
+              ></BaseDatePicker>
+              <div
+                v-if="
+                  item.type === 'compute' &&
+                  !lookflag &&
+                  scope.$index + 1 != tableInfo.tableData.length
+                "
+              >
+                <el-tooltip class="item" effect="dark" placement="top">
+                  <div slot="content">
+                    {{ calculator(item, scope.row) }}
+                  </div>
+                  <div
+                    style="
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    "
+                  >
+                    {{ calculator(item, scope.row) }}
+                  </div>
+                </el-tooltip>
+              </div>
+              <el-switch
+                v-if="item.type === 'switch'"
+                v-model="scope.row[item.id]"
+              >
+              </el-switch>
+            </template>
+            <template v-else>
+              <div
+                v-if="
+                  item.type != 'checkbok' &&
+                  item.type !== 'select' &&
+                  item.type !== 'treeselect' &&
+                  item.type !== 'datepick'
+                "
+              >
+                <el-tooltip class="item" effect="dark" placement="top">
+                  <div slot="content">
+                    {{ tableInfo.tableData[scope.row.index][item.id] }}
+                  </div>
+                  <div
+                    style="
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    "
+                  >
+                    {{ tableInfo.tableData[scope.row.index][item.id] }}
+                  </div>
+                </el-tooltip>
+              </div>
+              <baseCascader
+                v-if="item.type === 'treeselect'"
+                v-model="scope.row[item.id]"
+                :lookflag="true"
+                :itemObj="item"
+                :ruleForm="tableInfo.tableData[scope.row.index]"
+              >
+              </baseCascader>
+              <el-checkbox
+                v-if="item.type === 'checkbox'"
+                v-model="scope.row[item.id]"
+              ></el-checkbox>
+              <div v-if="item.type === 'datepick'">
+                {{ 123 }}
+                {{ scope.row[item.id].split("T")[0] }}
+              </div>
+            </template>
+          </slot>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        :width="funWidth"
+        v-if="funData.length != 0 && !lookflag"
+        align="center"
+        header-align="center"
+        :fixed="fixedTable"
+      >
+        <template slot-scope="scope">
+          <div flex="cross:center main:center">
+            <div
+              v-for="(item, index) in funData"
+              :key="index"
+              :class="{ 'mr-12': index + 1 != funData.length }"
+              @click="funcEmit(scope.row, funData[index], scope)"
+              class="btnText"
+            >
+              <span
+                :style="'color:' + item.color"
+                v-if="!item.ifField && !item.hiddenField"
+                >{{ item.text }}</span
+              >
+              <span
+                :style="{
+                  color:
+                    scope.row[item.ifField] == item.fieldVal
+                      ? item.fieldColor
+                      : item.color,
+                }"
+                v-if="item.ifField"
+                >{{
+                  scope.row[item.ifField] == item.fieldVal
+                    ? item.fieldTxt
+                    : item.text
+                }}</span
+              >
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <!-- 操作 、自定义插槽 -->
+    </el-table>
+  </div>
+</template>
+<script>
+import baseCascader from "./baseCascader/index";
+import { deepClone } from "@/utils/index.js";
+import execMathExpress from "exec-mathexpress";
+import BaseDatePicker from "./baseDatePicker.vue";
+import BaseSelect from "./baseNewSelect.vue";
+import Sortable from "sortablejs";
+export default {
+  props: {
+    // 表格的索引值
+    formIndex: {
+      type: Number,
+      default: 0,
+    },
+    lookflag: {
+      type: Boolean,
+      default: false,
+    },
+    tableInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    // 最大高度
+    tableMaxHeight: {
+      type: [String, Number],
+    },
+    // loading
+    tabLoading: {
+      type: Boolean,
+      default: false,
+    },
+    // 序号操作icon
+    indexOperate: {
+      type: Boolean,
+      default: false,
+    },
+    // 固定列
+    fixedTable: {
+      type: [Boolean, String],
+      default: false,
+    },
+    // 读取字段
+    slotrow: {
+      type: Boolean,
+      default: false,
+    },
+    showsummary: {
+      type: Boolean,
+      default: false,
+    },
+    // 表格高度
+    tableHeight: {
+      type: [Number, String],
+      default: "auto",
+    },
+    // 表格高度
+    // windowHight: {
+    // 	type: [ String],
+    // 	default: 'auto'
+    // },
+    // 表格尺寸
+    size: {
+      type: String,
+      default: "small",
+    },
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 表头数据
+    detailFields: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 合计的index
+    SummariesIndex: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 是否显示选择框
+    showSelect: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示序号
+    showIndex: {
+      type: Boolean,
+      default: false,
+    },
+    // 操作选项
+    funData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 操作按钮宽度
+    funWidth: {
+      type: Number,
+      default: 100,
+    },
+    // 是否带有纵向边框
+    border: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 单选是否高亮
+    highlightCurrent: {
+      type: Boolean,
+      default: false,
+    },
+    // 默认拖动
+    sortableSwitch: {
+      type: Boolean,
+      default: false,
+    },
+    // headerStyle:{
+    // 	type: String,
+    // 	default:{
+    // 		'background-color': '#F5F5F5',
+    // 		'color': '#333333',
+    // 	},
+    // }
+  },
+  data() {
+    return {
+      headerStyle: {
+        "background-color": "#F5F5F5",
+        color: "#333333",
+      },
+      itemKey: true,
+      radioIndex: false,
+    };
+  },
+  created() {},
+  mounted() {
+    this.$emit("getTableData", this.tableInfo.index);
+    this.rowDrop();
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    test(row) {
+      console.log(row);
+    },
+
+    calculator(item, row) {
+      let obj = {};
+      item.computeId.forEach((ele) => {
+        obj[ele] = row[ele];
+      });
+      let result;
+      try {
+        let { num, den } = execMathExpress(item.total, obj);
+        console.log(execMathExpress(item.total, obj));
+        result = num / den;
+      } catch (error) {
+        return "数字不合法";
+      }
+      this.$emit("toalResult", this.tableInfo, row, item, result);
+      return result.toFixed(2);
+    },
+    // 点击这里盒子触发
+    clickBoxHandle(row) {
+      this.$emit(
+        "clickBox",
+        this.tableInfo,
+        row.index,
+        this.tableInfo.tableData[row.index].id,
+        this.formIndex
+      );
+    },
+    select(selection, row) {
+      this.$emit("select", selection, row);
+    },
+    selectAll(selection) {
+      this.$emit("selectAll", selection);
+    },
+    setTableKey() {
+      this.itemKey = !this.itemKey;
+    },
+    // 单元格双击事件
+    doubleClick(row, column, cell, event) {
+      this.$emit("doubleClick", row, column, cell, event);
+    },
+    // 取消多选
+    clearSelect() {
+      this.$refs.elTable.clearSelection();
+    },
+    /**
+     * @description 单元格点击事件
+     * @author duanyipeng
+     * @createDate 2020/7/6 21:36
+     * @param { Object } row 每一行数据
+     * @param { Object } column 选中单元格表头数据
+     * @use {
+     *          other:{
+     *              isClick:true
+     *          }
+     *      }
+     */
+    getCellClick(row, column) {
+      let label = column.label;
+      // let itemColumn = this.detailFields.filter(item => {
+      // 	return item.label === label
+      // })
+      // if (itemColumn[0] && itemColumn[0].other && itemColumn[0].other.isClick) {
+      // 	this.$emit('onCellClick', row, label)
+      // }
+      this.$emit("onCellClick", row, label);
+    },
+    // 每一行点击事件
+    getRowClick(row, column, event) {
+      this.handleCurrentChange(row);
+      this.$emit("onRowClick", row);
+    },
+    // 每一行双击点击事件
+    rowDblclick(row, column, event) {
+      if (this.showSelect) {
+        this.toggleSelection([row]);
+      }
+      this.$emit("rowDblclick", row);
+    },
+    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
+    getRowKey(row) {
+      return row.id;
+    },
+    // 多选事件
+    handleSelectionChange(selectTable) {
+      this.$emit("onSelectionChange", selectTable);
+    },
+    /**
+     * 触发操作事件
+     * 参数1：当前按钮索引
+     * 参数2：当前按钮所在行数据
+     */
+    funcEmit(row, item) {
+      this.$emit("onFunc", row, item, this.tableInfo.tableData);
+    },
+    // 排序改变 	降序:descending;升序ascending
+    sortChange(column) {
+      this.$emit("sortChange", column);
+    },
+    //单选
+    handleCurrentChange(val) {
+      this.radioIndex = val.index;
+      this.$emit("radioChange", val);
+    },
+    clearRadioIndex() {
+      this.radioIndex = false;
+    },
+    setRadioIndex(index) {
+      this.radioIndex = index;
+    },
+    // 添加index
+    tableCellName({ row, column, rowIndex, columnINdex }) {
+      row.index = rowIndex;
+      column.index = columnINdex;
+    },
+    // tableRowClassName({	row,rowIndex}) {
+    // 	if (rowIndex === 1) {
+    // 	  return 'warning-row';
+    // 	} else if (rowIndex === 3) {
+    // 	  return 'success-row';
+    // 	}
+    // 	return '';
+    // },
+    tableRowClassName: function ({ row, rowIndex }) {
+      let data = "";
+      this.$emit("row-class-name", { row: row, rowIndex: rowIndex }, (val) => {
+        data = val;
+      });
+      return data; //属性名必须返回一个string
+    },
+    newRow() {
+      this.$emit("newRow", this.tableInfo);
+      this.$nextTick(() => {
+        this.$refs.elTable.bodyWrapper.scrollTop =
+          this.$refs.elTable.bodyWrapper.scrollHeight;
+        this.setTableKey();
+      });
+    },
+    //行拖拽,排序方法
+    rowDrop() {
+      if (!this.sortableSwitch) {
+        return;
+      }
+      const el = this.$refs.elTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      this.sortable = Sortable.create(el, {
+        ghostClass: "sortable-ghost",
+        setData: function (dataTransfer) {
+          dataTransfer.setData("Text", "");
+        },
+        onEnd: (evt) => {
+          // console.log(evt,"evt")
+          //   console.log(evt.oldIndex, "oldIndex");
+          // console.log(this.tableData)
+          // console.log(evt.oldIndex, this.tableData.splice(evt.oldIndex, 1))
+          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
+          //   console.log(targetRow, "targetRow");
+          //   console.log(evt.newIndex, "newIndex");
+          this.tableData.splice(evt.newIndex, 0, targetRow);
+        },
+      });
+    },
+    // 默认选择
+    toggleSelection(rowData, selected) {
+      if (rowData) {
+        rowData.forEach((row) => {
+          this.$refs.elTable.toggleRowSelection(row, selected);
+        });
+      } else {
+        this.$refs.elTable.clearSelection();
+      }
+    },
+    // 合计
+    getSummaries(params) {
+      const { columns, data } = params;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "合计";
+          return;
+        }
+        this.SummariesIndex.forEach((el) => {
+          if (index == el) {
+            const values = data.map((item) => Number(item[column.property]));
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!isNaN(value)) {
+                  return prev + curr;
+                } else {
+                  return prev;
+                }
+              }, 0);
+              sums[index] = sums[index].toFixed(2);
+            } else {
+              sums[index] = "";
+            }
+          }
+        });
+      });
+      return sums;
+    },
+  },
+  components: {
+    BaseSelect,
+    BaseDatePicker,
+    baseCascader,
+  },
+};
+</script>
+
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.el-table .warning-row {
+  background: #ffe562;
+}
+
+.el-table .success-row {
+  background: #acf389;
+}
+
+.el-table .denger-row {
+  background: #e13501;
+}
+
+.fiexTableBottm {
+  position: sticky;
+  bottom: 0;
+}
+</style>
+<style scoped lang="scss">
+>>> .el-radio__label {
+  // display: none;
+}
+
+.btnText {
+  cursor: pointer;
+}
+
+.mr-12 {
+  margin-right: 12px;
+}
+
+::v-deep .cell {
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+}
+::v-deep .el-table__row {
+  height: 60px !important;
+  background-color: #fcfcfc;
+}
+// ::v-deep .el-table .sort-caret.ascending {
+// 	top: 1px
+// }
+
+// ::v-deep .el-table .sort-caret.descending {
+// 	bottom: 2px
+// }
+
+// ::v-deep .el-table .caret-wrapper {
+// 	height: 23px;
+// }
+
+// 解决滚动条问题
+// div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;}
+// div ::v-deep .el-table__footer-wrapper {overflow-x: auto;border-top: 1px solid #f4f4f4;}
+// ::v-deep .el-table {
+//   overflow-x: auto;
+// }
+// ::v-deep .el-table__header-wrapper,
+// ::v-deep .el-table__body-wrapper,
+// ::v-deep .el-table__footer-wrapper {
+//   overflow: visible;
+// }
+// ::v-deep .el-table::after {
+//   position: relative;
+// }
+// ::v-deep .el-table--scrollable-x ::v-deep .el-table__body-wrapper {
+//   overflow: visible;
+// }
+// ::v-deep .el-table { .el-table__body-wrapper { z-index: 2; } }
+</style>
diff --git a/src/views/DataCenterOptions/compoments/baseUpload.vue b/src/views/DataCenterOptions/compoments/baseUpload.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/DataCenterOptions/configData.js b/src/views/DataCenterOptions/configData.js
new file mode 100644
index 0000000..bfad5c9
--- /dev/null
+++ b/src/views/DataCenterOptions/configData.js
@@ -0,0 +1,102 @@
+const addForm = [
+  {
+    elCol: [
+      {
+        type: 'input',
+        title: '主数据名称',
+        id: 'mdmName',
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16
+      }
+    ]
+  },
+  {
+    elCol: [
+      {
+        type: 'textrea',
+        title: '备注',
+        id: 'remark',
+        row: 24,
+        disabled: false,
+        fontSize: 16
+
+      }
+    ]
+  }
+]
+
+const tableColumn = [
+  {
+    id: 'mdmName',
+    title: '主数据名称',
+    align: 'left',
+    width: 130
+  },
+  {
+    id: 'mdmTypeName',
+    title: '主数据类型'
+  },
+  {
+    id: 'remark',
+    title: '备注',
+    tooltip: true
+  },
+  {
+    id: 'createUserId',
+    title: '创建人',
+    tooltip: true
+  },
+  {
+    id: 'createTime',
+    title: '创建日期',
+    tooltip: true
+  },
+  {
+    id: 'modifyUserId',
+    title: '修改人'
+  },
+  {
+    id: 'modifyTime',
+    title: '修改时间'
+  }
+]
+const settingMenu = [
+  {
+    title: '基本信息',
+    icon: 'masterDataMenu01',
+    path: 'masterDataEdit'
+  },
+  {
+    title: '数据源',
+    icon: 'masterDataMenu02',
+    path: 'dataOrigin'
+  },
+  {
+    title: '显示信息',
+    icon: 'masterDataMenu03',
+    path: 'displayInfo'
+  },
+  {
+    title: '数据来源',
+    icon: 'masterDataMenu04',
+    path: 'authorily'
+  },
+  {
+    title: '分发设置',
+    icon: 'masterDataMenu05',
+    path: 'distribute'
+  },
+  {
+    title: '日志',
+    icon: 'masterDataMenu06',
+    path: 'logsDeatil'
+  },
+]
+const configData = {
+  addForm,
+  tableColumn,
+  settingMenu
+}
+export default configData
diff --git a/src/views/DataCenterOptions/dataOrigin/configData.js b/src/views/DataCenterOptions/dataOrigin/configData.js
new file mode 100644
index 0000000..abace11
--- /dev/null
+++ b/src/views/DataCenterOptions/dataOrigin/configData.js
@@ -0,0 +1,281 @@
+const dataOriginFormRow = [
+  {
+    elCol: [
+      {
+        type: "input",
+        title: "表名",
+        id: "clientPath",
+
+        row: 12,
+        disabled: false,
+        required: true,
+        fontSize: 16
+      },
+      {
+        type: "input",
+        title: "备注",
+        id: "webPath",
+        row: 12,
+        disabled: false,
+        required: false,
+        fontSize: 16
+      },
+    ],
+  },
+]
+const optionFormRow = [
+  {
+    elCol: [
+      {
+        type: "input",
+        title: "中文名称",
+        id: "chName",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "input",
+        title: "英文名称",
+        id: "enName",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16,
+        pattern: /^[a-z][a-z0-9_]{0,50}$/,
+        message: "须以小写字母开头，只能包含小写字母，数字和下划线，不能包含中文字符其他符号。",
+        disabledOfId: true,
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "select",
+        title: "字段类型",
+        id: "filedType",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16,
+        options: [],
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "num",
+        title: "长度",
+        id: "filedLength",
+        max:255,
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "input",
+        title: "显示名",
+        id: "title",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16
+      },
+    ],
+  }
+  , {
+    elCol: [
+      {
+        type: "select",
+        title: "宽度",
+        id: "row",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16,
+        options: [
+          {
+            label: "3",
+            id: "3",
+          }, {
+            label: "6",
+            id: "6",
+          }, {
+            label: "9",
+            id: "9",
+          }, {
+            label: "12",
+            id: "12",
+          }, {
+            label: "15",
+            id: "15",
+          }, {
+            label: "18",
+            id: "18",
+          }, {
+            label: "21",
+            id: "21",
+          }, {
+            label: "24",
+            id: "24",
+          },
+        ]
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "num",
+        title: "单元格宽度",
+        id: "width",
+        row: 24,
+        disabled: false,
+        required: false,
+        fontSize: 16,
+        message:"px"
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "select",
+        title: "数据类型",
+        id: "type",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16,
+        options: [
+          {
+            label: "input",
+            id: "input",
+          }, {
+            label: "datepick",
+            id: "datepick",
+          }, {
+            label: "daterange",
+            id: "daterange",
+          }, {
+            label: "radio",
+            id: "radio",
+          }, {
+            label: "textrea",
+            id: "textrea",
+          }, {
+            label: "select",
+            id: "select",
+          }, {
+            label: "treeselect",
+            id: "treeselect",
+          }, {
+            label: "number",
+            id: "num",
+          },
+        ]
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "onecheck",
+        title: "必填",
+        id: "required",
+        row: 24,
+        disabled: false,
+        required: false,
+        fontSize: 16,
+        options: [
+          {
+            label: "是",
+            id: "true",
+          }, {
+            label: "否",
+            id: "false",
+          }
+        ]
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "onecheck",
+        title: "禁止修改",
+        id: "disabled",
+        row: 24,
+        disabled: false,
+        required: false,
+        fontSize: 16,
+        options: [
+          {
+            label: "是",
+            id: "true",
+          },
+        ]
+      },
+    ],
+  },
+]
+const mainOptionRow = [
+  {
+    elCol: [
+      {
+        type: "input",
+        title: "英文名",
+        id: "dbName",
+        disabledOfId: true,
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16,
+        pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,50}$/,
+        message: "须以字母开头且不能出现_外的字符与中文",
+      },
+    ],
+  },
+  {
+    elCol: [
+      {
+        type: "input",
+        title: "表说明",
+        id: "remark",
+        row: 24,
+        disabled: false,
+        required: true,
+        fontSize: 16
+      },
+    ],
+  },
+
+]
+const mainRule =
+  {
+    dbName: [
+      {
+        pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,29}$/,
+        message: "必须以字母开头，后续字符可包含字母、数字和下划线，总长度不超过30个字符。",
+        trigger: "change",
+      },
+    ],
+  }
+const config = {
+  dataOriginFormRow,
+  optionFormRow,
+  mainOptionRow,
+  mainRule
+}
+export default config
diff --git a/src/views/DataCenterOptions/dataOrigin/images/删除.png b/src/views/DataCenterOptions/dataOrigin/images/删除.png
new file mode 100644
index 0000000..c74a004
Binary files /dev/null and b/src/views/DataCenterOptions/dataOrigin/images/删除.png differ
diff --git a/src/views/DataCenterOptions/dataOrigin/images/设置.png b/src/views/DataCenterOptions/dataOrigin/images/设置.png
new file mode 100644
index 0000000..fa32cf3
Binary files /dev/null and b/src/views/DataCenterOptions/dataOrigin/images/设置.png differ
diff --git a/src/views/DataCenterOptions/dataOrigin/index.vue b/src/views/DataCenterOptions/dataOrigin/index.vue
new file mode 100644
index 0000000..65f9592
--- /dev/null
+++ b/src/views/DataCenterOptions/dataOrigin/index.vue
@@ -0,0 +1,664 @@
+<template>
+  <div class="wrap">
+    <!--数据表-->
+    <div class="mainTable">
+      <div class="rule">
+        <div class="name">单据规则</div>
+        <template v-if="!receiptsTableData.length">
+          <div class="value">尚未设置</div>
+        </template>
+        <template v-else>
+          <div class="value">
+            <div class="receiptsItem" v-for="(item,index) in receiptsTableData">{{ item.dbValue }}</div>
+          </div>
+        </template>
+        <div class="btn" @click="ruleAddHandle">
+          <img src="./images/设置.png" alt="">
+        </div>
+      </div>
+      <div class="bigTitle" style="margin: 10px 0">数据表</div>
+      <div class="table">
+        <BaseTable
+            ref="mainTable"
+            :tableData="mainTableData"
+            :tabLoading="mainTabLoading"
+            :tableColumn="mainTableColumn"
+            :border="false"
+            tableMaxHeight="600"
+            :highlightCurrent="true"
+            @radioChange="mainOnClick"
+        >
+          <template #dbType="{row}">
+            {{ row.dbType === '1' ? '主表' : '子表' }}
+          </template>
+          <template #operation="{row}">
+            <div class="btnList">
+              <div class="settingBtn" @click="mainTableEditHandle(row)">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="deleBtn" @click="mainDeleOnFunc(row)">
+                <img src="./images/删除.png" alt="">
+              </div>
+            </div>
+          </template>
+        </BaseTable>
+        <div class="mainAddRow">
+          <el-link
+              type="primary"
+              @click="addMainAddRow"
+              :underline="false"
+          >+ 数据表添加
+          </el-link
+          >
+        </div>
+      </div>
+    </div>
+    <!--    表字段-->
+    <div class="sonTable">
+      <div class="bigTitle">表字段</div>
+      <div class="table">
+        <BaseTable
+            ref="activedTable"
+            :tableData="activedTableData"
+            :tabLoading="activedTabLoading"
+            :tableColumn="activedTableColumn"
+            :border="false"
+            tableMaxHeight="650"
+            :highlightCurrent="true"
+            @radioChange="activedOnClick"
+            @onFunc="activedOnFunc"
+        >
+          <template #filedType="{row}">
+            {{ dataTypeDist[row.filedType] }}
+          </template>
+          <template #operation="{row}">
+            <div class="btnList">
+              <div class="settingBtn" @click="sonTableEditHandle(row)">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="deleBtn" @click="activedOnFunc(row)">
+                <img src="./images/删除.png" alt="">
+              </div>
+            </div>
+          </template>
+        </BaseTable>
+        <div class="mainAddRow" v-if="mainTempClick.id">
+          <el-link
+              v-if="mainTempClick.id"
+              type="primary"
+              @click="activedAddRow"
+              :underline="false"
+          >+ 表字段添加
+          </el-link
+          >
+        </div>
+      </div>
+    </div>
+    <!--    单据规则-->
+    <base-right-dialog
+        ref="baseRightDialog"
+        :footerShow="true"
+        :dialogVisible.sync="ruleAddDialogShow"
+        title="单据规则"
+        @handleClose="ruleAddDialogShow=false"
+        :submitShow="true"
+        :size="'50%'"
+        @handleConfirmClick="ruleAddSaveHanlde"
+    >
+      <div class="receiptsTable">
+        <ruleAddTable ref="ruleAddTable"></ruleAddTable>
+      </div>
+    </base-right-dialog>
+    <!--    数据表 -->
+    <base-right-dialog
+        ref="mainTableAddtDialog"
+        :footerShow="true"
+        :dialogVisible.sync="mainTableDialogShow"
+        title="数据表"
+        @handleClose="mainTableDialogShow=false"
+        :submitShow="true"
+        :size="'30%'"
+        @handleConfirmClick="mainTableSaveHandle"
+    >
+      <div class="mainTable">
+        <mainTable ref="mainTable"></mainTable>
+      </div>
+    </base-right-dialog>
+    <!--    表字段-->
+    <base-right-dialog
+        ref="sonTableAddtDialog"
+        :footerShow="true"
+        :dialogVisible.sync="sonTableDialogShow"
+        title="表字段"
+        @handleClose="sonTableDialogShow=false"
+        :submitShow="true"
+        :size="'40%'"
+        @handleConfirmClick="sonTableSaveHandle"
+    >
+      <div class="mainTable">
+        <sonTable ref="sonTable" :activedTableData="activedTableData" :mainTempClick="mainTempClick"
+                  @sonSaveHandle="sonSaveHandle"
+        ></sonTable>
+      </div>
+    </base-right-dialog>
+  </div>
+</template>
+
+<script>
+import sonTable from '@/views/masterDataOptions/dataOrigin/sonTable.vue'
+import mainTable from '@/views/masterDataOptions/dataOrigin/mainTable.vue'
+import ruleAddTable from '@/views/masterDataOptions/dataOrigin/ruleAddTable.vue'
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import configData from './configData'
+import { getApiModuleApi } from '@/api/apiChunks/index.js'
+import baseNewForm from '../compoments/baseNewForm'
+import { deepClone } from '@/utils/index.js'
+import baseDialog from '@/views/integrationOption/compoments/baseDialog'
+import baseForm from '@/components/base/baseNewForm/index.vue'
+import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  data() {
+    return {
+      mainTempClick: {},//数据表当前点击行
+      mainTableData: [],//主表数据
+      mainTabLoading: false,//主表loading
+      mainTableColumn: [
+        { title: '英文名', id: 'dbName' },
+        { title: '表类型', id: 'dbType' },
+        { title: '表说明', id: 'remark' },
+        { title: '操作', id: 'operation' }
+      ],
+      mainFunData: [],//主表操栏
+      activedTableData: [],//子表数据（单击主表后赋值）
+      activedTabLoading: false,//选中表loading
+      activedTableColumn: [
+        { title: '中文名', id: 'chName' },
+        { title: '英文名', id: 'enName' },
+        { title: '字段类型', id: 'filedType' },
+        { title: '长度', id: 'filedLength' },
+        { title: '操作', id: 'operation' }
+      ],//子表行数据
+      activedFunData: [
+        {
+          text: '删除',
+          color: 'red'
+        }
+      ],//子表操作栏
+      ruleAddDialogShow: false,//单据规则
+      receiptsTableData: [],//单据规则表单
+      mainTableDialogShow: false,//主数据弹窗
+      //数据类型字段
+      dataTypeDist: {},
+      //表字段下啦
+      fieldTypeOptions: [],
+      sonTableDialogShow: false,//字表dialog显示
+      serviceOptions: []//表字段服务名称下啦
+
+    }
+  },
+  methods: {
+    //表字段字段类型下啦初始化
+    async initSelect() {
+      //数据类型下拉
+      const type = await getApiModuleApi({
+        tl: 'generalServiceImpl',
+        as: 'dictionaryshop',
+        dj: 'selectDictionaryshop'
+      }, { tab_name: 'mdm', column_name: 'mdm_filed_type' })
+      this.fieldTypeOptions = []
+      type.attribute.forEach(item => {
+        //创造数据字段给表单插槽显示（字段类型）
+        this.$set(this.dataTypeDist, item.column_value, item.column_content)
+        this.fieldTypeOptions.push({
+          label: item.column_content,
+          id: item.column_value
+        })
+      })
+      this.serviceOptions = []
+      //服务名下拉
+      const service = await getApiModuleApi({
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'queryMdmService'
+      }, { remark: '' })
+      service.attribute.forEach(item => {
+        console.log(item, 'item')
+        this.serviceOptions.push({
+          id: item.dbName,
+          label: item.remark,
+          dbId: item.id,
+          mdmId: item.mdmId
+
+        })
+      })
+    },
+    // 主表上方表格行点击
+    async mainOnClick(val) {
+      if (val.index === -1) return
+      console.log(val)
+      //将当前点击行存储
+      this.mainTempClick = val
+      //请求数据表对应的表字段
+      const res = await authApi('mdmModuleService', '', 'queryMdmDbField', '', {
+        mdmId: this.$route.query.id,
+        dbId: this.mainTempClick.id
+      })
+      this.activedTableData = res.attribute
+    },
+    // 主表按钮(删除）
+    mainDeleOnFunc(row, item) {
+      console.log(row, 'row')
+      let msg = row.dbType == 1 ? '删除主表将会导致所有相关子表一并删除，是否确认继续删除操作？' : '是否确定删除？'
+      this.$confirm(msg)
+          .then(async(_) => {
+            this.openLoading('submit')
+            const res = await authApi('mdmModuleService', '', 'deleteMdmDb', '', {
+              mdmId: this.$route.query.id,
+              ...row
+            })
+            this.$vmNews('删除成功！', 'success')
+            if (this.mainTempClick.id === row.id || row.dbType == 1) {
+              this.activedTableData = []
+              this.mainTempClick = {}
+            }
+            this.getMainTableHandle()
+          })
+          .catch((_) => {
+          })
+    },
+    //数据表添加按钮
+    addMainAddRow() {
+      if (!this.receiptsTableData.length) {
+        this.$vmNews('请添加单据规则后，再添加数据表。')
+        return
+      }
+      this.mainTableDialogShow = true
+      this.$nextTick(() => {
+        //重置表单
+        this.$refs.mainTable.$refs.mainOptionForm.resetFields()
+        this.$refs.mainTable.mainOptionForm = {}
+        //将英文名改为可编辑状态
+        this.$refs.mainTable.mainOptionRow[0].elCol.disabled = false
+      })
+    },
+    //数据表编辑
+    mainTableEditHandle(row) {
+      this.mainTableDialogShow = true
+      this.$nextTick(() => {
+        //重置表单
+        this.$refs.mainTable.$refs.mainOptionForm.resetFields()
+        this.$refs.mainTable.mainOptionForm = JSON.parse(JSON.stringify(row))
+        //将英文名改为可编辑状态
+        this.$refs.mainTable.mainOptionRow[0].elCol.disabled = true
+      })
+    },
+    //表字段单击事件
+    activedOnClick(val) {
+    },
+    //表字段点击操作
+    activedOnFunc(row) {
+      this.$confirm('是否确定删除？')
+          .then(async(_) => {
+            this.openLoading('submit')
+            const res = await authApi('mdmModuleService', '', 'deleteMdmDbField', '', {
+              id: row.id,
+              mdmId: this.$route.query.id,
+              dbId: this.mainTempClick.id,
+              dbName: this.mainTempClick.dbName,
+              enName: row.enName,
+              filedType: row.filedType
+            })
+            this.$vmNews('删除成功', 'success')
+            this.mainOnClick(this.mainTempClick)
+            this.activedTableData.splice(row.index, 1)
+          })
+          .catch((_) => {
+          })
+    },
+    //表字段点击设置
+    sonTableEditHandle(row) {
+      this.sonTableDialogShow = true
+      this.$nextTick(() => {
+        //重置一切表单
+        this.$refs.sonTable.$refs.optionForm.resetFields()
+        this.$refs.sonTable.$refs.typeOptionForm.resetFields()
+        this.$refs.sonTable.$refs.propertyForm.resetFields()
+        this.$refs.sonTable.optionRuleForm = {}
+        this.$refs.sonTable.typeOptionRuleForm = {}
+        this.$refs.sonTable.propertyRuleForm = {}
+        this.$refs.sonTable.propertyActiveList = []
+        this.$refs.sonTable.propertyFormRow = []
+        this.$refs.sonTable.typeOptionFormRow = []
+        //字段类型下啦
+        this.$refs.sonTable.optionFormRow[2].elCol[0].options = this.fieldTypeOptions
+        this.$refs.sonTable.serviceOptions = this.serviceOptions
+        this.$refs.sonTable.activedOnClick(row)
+
+      })
+    },
+    //表字段添加按钮
+    activedAddRow() {
+      this.sonTableDialogShow = true
+      this.$nextTick(() => {
+        //重置一切表单
+        this.$refs.sonTable.$refs.optionForm.resetFields()
+        this.$refs.sonTable.$refs.typeOptionForm.resetFields()
+        this.$refs.sonTable.$refs.propertyForm.resetFields()
+        this.$refs.sonTable.optionRuleForm = {}
+        this.$set(this.$refs.sonTable.optionRuleForm, 'required', false)
+        this.$set(this.$refs.sonTable.optionRuleForm, 'disabled', false)
+        this.$refs.sonTable.typeOptionRuleForm = {}
+        this.$refs.sonTable.propertyRuleForm = {}
+        this.$refs.sonTable.propertyActiveList = []
+        this.$refs.sonTable.propertyFormRow = []
+        this.$refs.sonTable.typeOptionFormRow = []
+        this.$refs.sonTable.activedTableRow = {}
+        //字段类型下啦
+        this.$refs.sonTable.optionFormRow[2].elCol[0].options = this.fieldTypeOptions
+        this.$refs.sonTable.serviceOptions = this.serviceOptions
+
+      })
+    },
+    //单据规则方法打开
+    ruleAddHandle() {
+      this.ruleAddDialogShow = true
+      this.$nextTick(() => {
+        this.$refs.ruleAddTable.ruleAddTableData = JSON.parse(JSON.stringify(this.receiptsTableData))
+      })
+
+    },
+    //单据规则添加方法(保存）
+    async ruleAddSaveHanlde() {
+      let tempTableData = this.$refs.ruleAddTable.ruleAddTableData
+      let type = false
+      let flag = tempTableData.some((item, index) => {
+        if (!item.dbType || !item.dbValue) {
+          this.$vmNews(`请选择${index + 1}行的类型并填写或选择规则`, 'warning')
+          return true
+        } else if (item.dbType === '4' && index + 1 !== tempTableData.length) {
+          type = true
+          this.$vmNews(`流水号只允许在最后一行`, 'warning')
+          return true
+        } else if (item.dbType === '4') {
+          type = true
+        }
+      })
+      if (!type) {
+        this.$vmNews(`请添加流水号`, 'warning')
+        return
+      }
+      if (flag) return
+      this.openLoading('submit')
+      const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmTableCodeRule', '', {
+        id: this.$route.query.id,
+        mdmTableCodeRuleEntityList: tempTableData
+      })
+      this.ruleAddDialogShow = false
+      this.$vmNews('添加单据规则成功', 'success')
+      //调用单据规则
+      this.getRuleHandle()
+    },
+    //单据规则获取
+    async getRuleHandle() {
+      this.openLoading('submit')
+      const res = await authApi('mdmModuleService', '', 'getMdmTableCodeRule', '', {
+        mdmId: this.$route.query.id
+      })
+      this.receiptsTableData = res.attribute
+    },
+    //数据表保存
+    mainTableSaveHandle() {
+      this.$refs.mainTable.$refs.mainOptionForm.$refs['ruleForm'].validate(async(valid) => {
+        if (valid) {
+          //主数据英文名黑名单
+          let blacklist = ['id', 'document_rule', 'document_rule_num', 'data_status', 'add_status', 'update_status', 'delete_status', 'sorts', 'create_user_id', 'create_time', 'modify_user_id', 'modify_time', 'sts', 'org_id', 'company_id', 'data_id']
+          let form = this.$refs.mainTable.mainOptionForm
+          //判断黑名单
+          if (blacklist.includes(form.dbName)) {
+            this.$vmNews('当前英文名为系统默认字段，请修改')
+            return
+          }
+          //判断是主表还是子表 "dbType":"2",//类型 1、主表 2、明细
+          console.log(this.mainTableData.length && !form.id, 'this.mainTableData.length && !form.id', form, this.mainTableData.length)
+          if (!form.id) {
+            if (this.mainTableData.length) {
+              this.$set(form, 'dbType', 2)
+            } else {
+              this.$set(form, 'dbType', 1)
+            }
+          }
+
+          //判断有没有id如果有走编辑 没有走新增
+          if (form.id) {
+            this.openLoading('submit')
+            const res = await authApi('mdmModuleService', '', 'updateMdmDb', '', {
+              mdmId: this.$route.query.id,
+              ...form
+            })
+            if (res.status == 200) {
+              this.$vmNews('保存成功', 'success')
+              this.mainTableDialogShow = false
+              this.getMainTableHandle()
+              this.initSelect()
+            }
+          } else {
+            this.openLoading('submit')
+            const res = await authApi('mdmModuleService', '', 'saveMdmDb', '', {
+              mdmId: this.$route.query.id,
+              ...form
+            })
+            if (res.status == 200) {
+              this.$vmNews('保存成功', 'success')
+              this.mainTableDialogShow = false
+              this.getMainTableHandle()
+              this.initSelect()
+            }
+          }
+
+        } else {
+          return false
+        }
+      })
+    },
+    //表字段保存
+    sonTableSaveHandle() {
+      this.$refs.sonTable.$refs.optionForm.submitForm()
+
+    },
+    //获取数据表
+    async getMainTableHandle() {
+      const res = await authApi('mdmModuleService', '', 'queryMdmDb', '', {
+        mdmId: this.$route.query.id
+      })
+      this.mainTableData = res.attribute
+    },
+    //表字段校验通过正式开始保存
+    async sonSaveHandle(params) {
+      if (params.id) {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'updateMdmDbField', '', params)
+        this.$vmNews('保存成功！', 'success')
+        this.sonTableDialogShow = false
+        //重新请求表字段
+        this.mainOnClick(this.mainTempClick)
+
+      } else {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'saveMdmDbField', '', params)
+        this.$vmNews('保存成功！', 'success')
+        this.sonTableDialogShow = false
+        //重新请求表字段
+        this.mainOnClick(this.mainTempClick)
+      }
+
+    }
+  },
+  components: {
+    baseRightDialog, baseForm,
+    baseNewForm,
+    BaseTable,
+    baseDialog,
+    ruleAddTable,
+    mainTable,
+    sonTable
+  },
+  created() {
+    //调用单据规则
+    this.getRuleHandle()
+    //调用获取数据表
+    this.getMainTableHandle()
+    //表字段的数据类型下啦获取
+    this.initSelect()
+    //调用左侧选中状态
+    this.$emit('flashActive', 1)
+  },
+  watch: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+  display: block !important;
+}
+
+.wrap {
+  display: flex;
+  background-color: #fff;
+  margin-left: 5px;
+  border-radius: 8px;
+  height: calc(100%);
+
+  .mainAddRow {
+    margin-top: 10px;
+    border: 1px dotted #ccc;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .bigTitle {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 18px;
+    color: #333333;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .mainTable {
+    flex: 1;
+    padding: 30px 20px 20px;
+    border-right: 1px solid #EBEBEB;;
+
+    .rule {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .name {
+        margin-right: 10px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 16px;
+        color: #333333;
+        line-height: 22px;
+        text-align: left;
+        font-style: normal;
+      }
+
+      .value {
+        display: flex;
+        align-items: center;
+        border: 1px solid #ebebeb;
+        padding: 10px 15px;
+        border-radius: 5px;
+      }
+
+      .btn {
+        margin-left: 15px;
+        cursor: pointer;
+        width: 25px;
+        height: 25px;
+        background: #EBEBED;
+        border-radius: 6px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        > img {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .table {
+      margin-top: 20px;
+
+
+    }
+  }
+
+  .sonTable {
+    flex: 1;
+    padding: 30px 20px 20px;
+
+    .table {
+      margin-top: 20px;
+    }
+  }
+}
+
+.btnList {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .settingBtn {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .deleBtn {
+    cursor: pointer;
+    margin-left: 10px;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+::v-deep .el-table{
+  max-height: calc(100vh - 230px) !important;
+}
+::v-deep .el-table__body-wrapper{
+  max-height: calc(100vh - 230px) !important;
+}
+</style>
diff --git a/src/views/DataCenterOptions/dataOrigin/indexOld.vue b/src/views/DataCenterOptions/dataOrigin/indexOld.vue
new file mode 100644
index 0000000..d700277
--- /dev/null
+++ b/src/views/DataCenterOptions/dataOrigin/indexOld.vue
@@ -0,0 +1,1211 @@
+<script src="configData.js"></script>
+<template>
+  <div class="wrap">
+    <div class="btn">
+      <div class="chunk">
+        <el-button
+            icon="el-icon-back"
+            @click="
+            $router.replace({ path: '/integrationOption/masterDataOptions' })
+          "
+        >返回
+        </el-button
+        >
+      </div>
+      <div class="chunk">
+        <el-button
+            icon="el-icon-first-aid-kit"
+            type="primary"
+            @click="saveHandle"
+            :loading="saveLoading"
+        >保存
+        </el-button
+        >
+      </div>
+    </div>
+    <div class="main">
+      <div class="left" v-loading="mainLoading">
+        <div class="title">
+          数据表
+        </div>
+        <div class="receipts">
+          <div class="label">单据规则:</div>
+          <div class="receiptsList" @click="openReceiptsHandle">
+            <template v-if="!receiptsShowTableData.length">点击选择单据规则</template>
+            <template v-else>
+              <div class="receiptsItem" v-for="(item,index) in receiptsShowTableData">{{ item.dbValue }}</div>
+            </template>
+          </div>
+        </div>
+        <div class="mainTable">
+          <BaseTable
+              ref="mainTable"
+              :tableData="mainTableData"
+              :tabLoading="mainTabLoading"
+              :tableColumn="mainTableColumn"
+              :border="false"
+              :funData="mainFunData"
+              tableHeight="25vh"
+              :highlightCurrent="true"
+              @radioChange="mainOnClick"
+              @onFunc="mainOnFunc"
+          >
+            <template #dbType="{row}">
+              {{ row.dbType === '1' ? '主表' : '子表' }}
+            </template>
+          </BaseTable>
+          <div class="mainAddRow">
+            <el-link
+                type="primary"
+                @click="addMainAddRow"
+                :underline="false"
+            >+ 添加
+            </el-link
+            >
+          </div>
+        </div>
+        <div class="title">
+          表字段
+        </div>
+        <div class="activedTable">
+          <BaseTable
+              ref="activedTable"
+              :tableData="activedTableData"
+              :tabLoading="activedTabLoading"
+              :tableColumn="activedTableColumn"
+              :border="false"
+              :funData="activedFunData"
+              tableHeight="30vh"
+              :highlightCurrent="true"
+              @radioChange="activedOnClick"
+              @onFunc="activedOnFunc"
+          >
+            <template #filedType="{row}">
+              {{ dataTypeDist[row.filedType] }}
+            </template>
+          </BaseTable>
+          <div class="mainAddRow" v-if="mainActivedRow">
+            <el-link
+                type="primary"
+                @click="activedAddRow"
+                :underline="false"
+            >+ 添加
+            </el-link
+            >
+          </div>
+        </div>
+      </div v-loading=>
+      <div class="right">
+        <template v-if="activedTableRow">
+          <div class="btn">
+            <el-button
+                type="primary"
+                @click="activedRowSaveHandle"
+            >暂存
+            </el-button>
+          </div>
+          <div class="title">
+            表字段
+          </div>
+          <div class="optionForm">
+            <baseNewForm
+                ref="optionForm"
+                :spanNumber="24"
+                :isFunBtn="false"
+                :formRow="optionFormRow"
+                :ruleForm="optionRuleForm"
+                :labelPosition="'left'"
+                @onSelect="selectChangeHanlde"
+                @inputBlur="optionFormInputBlur"
+                @onSubmit="optionOnSubmit"
+                :disabled="sonFormDisabled"
+            >
+            </baseNewForm>
+            <baseNewForm
+                ref="typeOptionForm"
+                :spanNumber="24"
+                :isFunBtn="false"
+                :formRow="typeOptionFormRow"
+                :ruleForm="typeOptionRuleForm"
+                :labelPosition="'left'"
+                @onSelect="typeSelectChangeHanlde"
+                @onSubmit="typeOptionOnSubmit"
+                :disabled="sonFormDisabled"
+            >
+            </baseNewForm>
+            <baseNewForm
+                ref="propertyForm"
+                :spanNumber="24"
+                :isFunBtn="false"
+                :formRow="propertyFormRow"
+                :ruleForm="propertyRuleForm"
+                :labelPosition="'left'"
+                @onSubmit="propertyOnSubmit"
+                :disabled="sonFormDisabled"
+
+            >
+            </baseNewForm>
+          </div>
+          <div class="smtitle">
+            可选控间属性
+          </div>
+          <div class="checkBoxList">
+            <el-checkbox-group :disabled="sonFormDisabled" v-model="propertyActiveList"
+                               @change="propertyActiveListChangeHanlde"
+            >
+              <el-checkbox v-for="(item,index) in propertyList" :label="item.id" :key="item.id">{{
+                  item.label
+                }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </template>
+        <template v-else-if="mainActivedRow">
+          <div class="btn">
+            <el-button
+                type="primary"
+                @click="mainActivedRowSaveHandle"
+            >暂存
+            </el-button>
+          </div>
+          <div class="title">
+            数据表
+          </div>
+          <div class="optionForm">
+            <baseNewForm
+                ref="mainOptionForm"
+                :spanNumber="24"
+                :isFunBtn="false"
+                :formRow="mainOptionRow"
+                :ruleForm="mainOptionForm"
+                :labelPosition="'left'"
+                @onSubmit="mainOptionOnSubmit"
+            >
+            </baseNewForm>
+          </div>
+        </template>
+      </div>
+    </div>
+    <baseDialog v-model="receiptsShow" width="50%" @confirm="receiptsConfirm">
+      <div class="receiptsTable">
+        <BaseTable
+            ref="receiptsTable"
+            :showIndex="true"
+            :tableData="receiptsTableData"
+            :tableColumn="receiptsTableColumn"
+            :border="false"
+            :funData="receiptsFunData"
+            tableHeight="30vh"
+            @onFunc="receiptsOnFunc"
+        >
+          <template #dbType="{row}">
+            <el-select v-model="row['dbType']" placeholder="请选择"
+                       @change="(val)=>ruleTypeSeleceChangHandle(val,row)"
+            >
+              <el-option
+                  v-for="item in ruleTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+          <template #dbValue="{row}">
+            <div v-if="!row['dbType']">请选择格式类型</div>
+            <div v-else-if="row['dbType'] === '1'">{{ row.dbValue }}</div>
+            <div v-else-if="row['dbType'] === '2'">
+              <el-input v-model="row.dbValue"></el-input>
+            </div>
+            <div v-else-if="row['dbType'] === '3'">
+              <el-select v-model="row.dbValue" placeholder="请选择">
+                <el-option
+                    v-for="item in dateOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div v-else-if="row['dbType'] === '4'">
+              <el-input v-model="row.dbValue" @input="(val)=>integerNumber(val,row)"></el-input>
+            </div>
+          </template>
+        </BaseTable>
+        <div class="receiptsAddRow">
+          <el-link
+              type="primary"
+              @click="receiptsAddRow"
+              :underline="false"
+          >+ 添加
+          </el-link
+          >
+        </div>
+      </div>
+    </baseDialog>
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import configData from './configData'
+import { getApiModuleApi } from '@/api/apiChunks/index.js'
+import baseNewForm from '../compoments/baseNewForm'
+import { deepClone } from '@/utils/index.js'
+import baseDialog from '@/views/integrationOption/compoments/baseDialog'
+
+export default {
+  data() {
+    return {
+      sonFormDisabled: false,
+      saveLoading: false,
+      mainLoading: false,
+      //options表
+      optionFormRow: configData.optionFormRow,
+      //数据表option表
+      mainOptionRow: configData.mainOptionRow,
+      //type选中后的表
+      typeOptionFormRow: [],
+      propertyFormRow: [],//可选属性表表格（渲染）
+      mainTableData: [],//主表数据
+      activedTableData: [],//子表数据（单击主表后赋值）
+      mainTabLoading: false,//主表loading
+      activedTabLoading: false,//选中表loading
+      optionRuleForm: {},//表字段options数据
+      mainOptionForm: {},//数据表数据
+      typeOptionRuleForm: {},//表字段根据type数据
+      propertyRuleForm: {},//可选属性表数据
+      mainTableColumn: [
+        { title: '英文名', id: 'dbName' },
+        { title: '表类型', id: 'dbType' },
+        { title: '表说明', id: 'remark' }
+      ],
+      mainActivedRow: false, // 数据表选中行暂存
+      activedTableRow: false, //子表选中行暂存
+      activedTableColumn: [
+        { title: '中文名', id: 'chName' },
+        { title: '英文名', id: 'enName' },
+        { title: '字段类型', id: 'filedType' },
+        { title: '长度', id: 'filedLength' }
+      ],//子表行数据
+      mainFunData: [
+        {
+          text: '删除',
+          color: 'red'
+        }
+      ],//主表操作兰
+      activedFunData: [
+        {
+          text: '删除',
+          color: 'red'
+        }
+      ],//子表操作栏
+      propertyActiveList: [],//可选属性选中列表（v-model)
+      propertyList: [
+        {
+          label: '大于',
+          id: 'up'
+        }, {
+          label: '小于',
+          id: 'low'
+        },
+        {
+          label: '正则',
+          id: 'pattern'
+        },
+        { label: '正则提示', id: 'message' }
+      ],//可选属性列表
+      //radiolist属性数字字典
+      propertyDist: {
+        up: {
+          type: 'select',
+          id: 'up',
+          title: '大于',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16,
+          options: []
+        },
+        low: {
+          type: 'select',
+          id: 'low',
+          title: '小于',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16,
+          options: []
+        },
+        pattern: {
+          type: 'input',
+          id: 'pattern',
+          title: '正则',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16
+        },
+        message: {
+          type: 'input',
+          id: 'message',
+          title: '正则提示',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16
+        }
+      },
+      //可选属性表数据字典
+      typeDist: {
+        select: [
+          {
+            type: 'select',
+            id: 'service',
+            title: '服务名称',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'label',
+            title: 'label',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }, {
+            type: 'input',
+            id: 'value',
+            title: 'value',
+            row: 24,
+            disabled: true,
+            required: true,
+            fontSize: 16,
+            options: []
+          }
+        ],
+        radio: [
+          {
+            type: 'select',
+            id: 'service',
+            title: '服务名称',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'label',
+            title: 'label',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }, {
+            type: 'input',
+            id: 'value',
+            title: 'value',
+            row: 24,
+            disabled: true,
+            required: true,
+            fontSize: 16,
+            options: []
+          }
+        ],
+        treeselect: [
+          {
+            type: 'select',
+            id: 'service',
+            title: '服务名称',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'label',
+            title: 'label',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }, {
+            type: 'input',
+            id: 'value',
+            title: 'value',
+            row: 24,
+            disabled: true,
+            required: false,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'upId',
+            title: 'upId',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }
+        ]
+      },
+      serviceOptions: [],
+      labelOptions: [],
+      //单据规则相关
+      receiptsShow: false,//单据规则dialog
+      receiptsTableData: [{}],//表单数据
+      receiptsFunData: [
+        {
+          text: '删除',
+          color: 'red'
+        }
+      ],
+      receiptsTableColumn: [
+        {
+          title: '类型',
+          id: 'dbType'
+        },
+        {
+          title: '格式规则',
+          id: 'dbValue'
+        }
+      ],
+      ruleTypeOptions: [
+        {
+          label: '连接符号',
+          value: '1'
+        }, {
+          label: '字符串',
+          value: '2'
+        }, {
+          label: '日期',
+          value: '3'
+        }, {
+          label: '流水号',
+          value: '4'
+        }
+      ],
+      dateOptions: [
+        {
+          label: 'yyyy-MM-dd',
+          value: 'yyyy-MM-dd'
+        }, {
+          label: 'yyyyMMdd',
+          value: 'yyyyMMdd'
+        }, {
+          label: 'yyyy-MM-dd HH:mm:ss',
+          value: 'yyyy-MM-dd HH:mm:ss'
+        }, {
+          label: 'yyyyMMddHHmmss',
+          value: 'yyyyMMddHHmmss'
+        }, {
+          label: 'yyyyMMddHHmmssSSS',
+          value: 'yyyyMMddHHmmssSSS'
+        }
+      ],
+      receiptsShowTableData: [],
+      //数据类型字段
+      dataTypeDist: {}
+    }
+  },
+  methods: {
+    // 下拉初始化
+    async initSelect() {
+      //数据类型下拉
+      const type = await getApiModuleApi({
+        tl: 'generalServiceImpl',
+        as: 'dictionaryshop',
+        dj: 'selectDictionaryshop'
+      }, { tab_name: 'mdm', column_name: 'mdm_filed_type' })
+      this.optionFormRow[2].elCol[0].options = []
+      type.attribute.forEach(item => {
+        //创造数据字段给表单插槽显示（字段类型）
+        this.$set(this.dataTypeDist, item.column_value, item.column_content)
+        this.optionFormRow[2].elCol[0].options.push({
+          label: item.column_content,
+          id: item.column_value
+        })
+      })
+      //服务名下拉
+      const service = await getApiModuleApi({
+        tl: 'mdmService',
+        as: 'mdmService',
+        dj: 'queryMdmModuleServer'
+      }, { remark: '' })
+      service.attribute.forEach(item => {
+        this.serviceOptions.push({
+          id: item.dbName,
+          label: item.remark
+        })
+      })
+    },
+    //数据源初始化
+    async init() {
+      this.mainLoading = true
+      const res = await getApiModuleApi({
+        tl: 'mdmService',
+        as: 'mdmService',
+        dj: 'queryMdmModuleDb'
+      }, { id: this.$route.query.id })
+      this.mainTableData = []
+      this.receiptsShowTableData = res.attribute.mdmTableCodeRuleEntityList
+      if (res.attribute.mainMdmModuleDb.id) {
+        this.mainTableData.push({ ...res.attribute.mainMdmModuleDb })
+      } else {
+        console.log(123)
+        let tempObj = {
+          dbType: '1', sublistMdmModuleDbFileds: [{
+            'index': 0,
+            'chName': '数据状态',
+            'enName': 'dataStatus',
+            'filedType': '3',
+            'filedLength': '1',
+            'mdmModuleDbFiledsRules': [
+              {
+                'ruleName': '显示名',
+                'ruleCode': 'title',
+                'ruleValue': '数据状态',
+                'ruleType': 2,
+                'formName': 'optionRuleForm'
+              },
+              {
+                'ruleName': '宽度',
+                'ruleCode': 'row',
+                'ruleValue': '12',
+                'ruleType': 2,
+                'formName': 'optionRuleForm'
+              },
+              {
+                'ruleName': '单元格宽度',
+                'ruleCode': 'width',
+                'ruleType': 2,
+                'formName': 'optionRuleForm'
+              },
+              {
+                'ruleName': '数据类型',
+                'ruleCode': 'type',
+                'ruleValue': 'input',
+                'ruleType': 2,
+                'formName': 'optionRuleForm'
+              },
+              {
+                'ruleName': '必填',
+                'ruleCode': 'required',
+                'ruleType': 2,
+                'formName': 'optionRuleForm'
+              },
+              {
+                'ruleName': '禁止修改',
+                'ruleCode': 'disabled',
+                'ruleValue': true,
+                'ruleType': 2,
+                'formName': 'optionRuleForm'
+              }
+            ]
+          }]
+        }
+        this.mainTableData.push(tempObj)
+      }
+      res.attribute.sublistMdmModuleDb.forEach(item => {
+        if (item.id) {
+          this.mainTableData.push({ ...item })
+        }
+      })
+      this.mainLoading = false
+    },
+    //流水号添加行
+    receiptsAddRow() {
+      this.receiptsTableData.push({})
+    },
+    //流水号修改事件
+    integerNumber(val, row) {
+      row['dbValue'] = row['dbValue'].replace(/[^\d]/g, '')
+    },
+    //单据规则相关
+    openReceiptsHandle() {
+      this.receiptsTableData = deepClone(this.receiptsShowTableData)
+      this.receiptsShow = true
+
+    },
+    //单据规则下拉改变事件
+    ruleTypeSeleceChangHandle(val, row) {
+      this.$set(row, 'dbValue', '')
+      if (val === '1') {
+        row['dbValue'] = '-'
+      }
+    },
+    //表字段下拉触发（根据type类型动态对表
+    selectChangeHanlde(val, index, indexRow, row, init = false) {
+      if (row.id === 'type') {
+        this.typeOptionFormRow = []
+        if (!init) {
+          this.typeOptionRuleForm = {
+            value: 'id'
+          }
+        }
+        if (val && this.typeDist[val]) {
+          this.typeDist[val].forEach(item => {
+            // 如果是服务名称则将请求下来的服务名用上
+            if (item.id === 'service') {
+              item.options = deepClone(this.serviceOptions)
+            }
+            let tempObj = {
+              elCol: [
+                {
+                  ...item
+                }
+              ]
+            }
+            this.typeOptionFormRow.push(tempObj)
+          })
+        }
+      }
+    },
+    //type表下拉触发（目的是为了服务名称下拉后拿到label
+    async typeSelectChangeHanlde(val, index, indexRow, row, initFlag = false) {
+      if (row.id === 'service') {
+        if (val) {
+          const res = await getApiModuleApi({
+            tl: 'mdmService',
+            as: 'mdmService',
+            dj: 'queryMdmModuleServerFiled'
+          }, { dbName: val })
+          this.labelOptions = []
+          res.attribute.forEach(item => {
+            this.labelOptions.push({
+              id: item.enName,
+              label: item.chName
+            })
+          })
+        } else {
+          this.labelOptions = []
+        }
+
+        this.typeOptionFormRow.forEach(item => {
+          if (item.elCol[0].id === 'label' || item.elCol[0].id === 'upId') {
+            if (!initFlag) {
+              this.$set(this.typeOptionRuleForm, item.elCol[0].id, '')
+            }
+            item.elCol[0].options = deepClone(this.labelOptions)
+          }
+        })
+      }
+    },
+    //数据表主表暂存方法
+    mainActivedRowSaveHandle() {
+      //验证后跳转到mainOptionOnSubmit
+      this.$refs.mainOptionForm.submitForm()
+    },
+    //数据副表暂存方法(){
+    activedRowSaveHandle() {
+      //检测重名
+      let flag = this.activedTableData.some(item => {
+        if (item['enName'] === this.optionRuleForm['enName'] && item.index != this.optionRuleForm.index) {
+          this.$vmNews('英文名不允许重复', 'warning')
+          return true
+        } else {
+          return false
+        }
+      })
+      if (flag) return
+      this.$refs.optionForm.submitForm()
+    },
+    //主表验证通过
+    mainOptionOnSubmit() {
+      let disabledWords = ['id', 'document_rule', 'document_rule_num', 'sorts', 'create_user_id', 'create_time', 'modify_user_id', 'modify_time', 'sts', 'org_id']
+      if (disabledWords.includes(this.mainOptionForm.dbName)) {
+        this.$vmNews(`暂存失败，英文名${this.mainOptionForm.dbName}不合法。`)
+        return
+      }
+      //检测重名
+      let flag = this.mainTableData.some(item => {
+        if (item['dbName'] === this.mainOptionForm['dbName'] && item.index != this.mainOptionForm.index) {
+          this.$vmNews('英文名不允许重复', 'warning')
+          return true
+        } else {
+          return false
+        }
+      })
+      if (flag) return
+      // 将表值赋值给mainActivedRow
+      this.$set(this.mainActivedRow, 'dbName', this.mainOptionForm['dbName'])
+      this.$set(this.mainActivedRow, 'remark', this.mainOptionForm['remark'])
+      //重新将当前选中主表赋值给activedTableData （不给的话会丢失掉对象）
+      // this.activedTableData = this.mainActivedRow.sublistMdmModuleDbFileds
+      // 这里的代码是取消选中号 需要再给上
+      // this.$refs.mainTable.setCurrent({index: -1})
+      // this.mainActivedRow = false
+    },
+    // 可选属性表变更方法
+    propertyActiveListChangeHanlde(val) {
+      this.propertyFormRow = []
+      // 消除表单里被取消的值
+      Object.keys(this.propertyRuleForm).forEach(item => {
+        if (!val.includes(item)) {
+          this.$delete(this.propertyRuleForm, item)
+        }
+      })
+      if (val === 'up' || val === 'low') {
+        this.activedTableData.forEach(item => {
+          tempOptions.push({ label: item.id, chName: item.enName })
+        })
+      }
+
+      // 通过字典找到值的类型渲染在表单上
+      val.forEach(item => {
+        let tempOptions = []
+        if (item === 'up' || item === 'low') {
+          this.activedTableData.some(ele => {
+            if (this.activedTableRow.id === ele.id) return false
+            ele.mdmModuleDbFiledsRules.forEach(ele02 => {
+              if (ele02.ruleValue === 'datepick') {
+                tempOptions.push({ label: ele.chName, id: ele.enName })
+              }
+            })
+          })
+        }
+        let tempObj = {
+          elCol: [
+            {
+              ...this.propertyDist[item],
+              options: tempOptions
+            }
+          ]
+        }
+        this.propertyFormRow.push(tempObj)
+      })
+
+    },
+    // 上方表格行点击
+    mainOnClick(val) {
+      if (val.index === -1) return
+      this.activedTableRow = false
+      this.mainActivedRow = val
+      this.activedTableData = []
+      this.$nextTick(() => {
+        this.$refs.mainOptionForm.resetForm()
+        this.mainOptionForm = deepClone(val)
+        this.activedTableData = val.sublistMdmModuleDbFileds
+      })
+    },
+    //子表单机事件
+    activedOnClick(val) {
+      //若英文名称为dataStatus 且是主表 则禁止输出
+
+      if (val.enName === 'dataStatus' && this.mainActivedRow.dbType == 1) {
+        this.sonFormDisabled = true
+      } else {
+        this.sonFormDisabled = false
+      }
+      this.activedTableRow = val
+      //清空type带出来的ruleForm
+      this.typeOptionFormRow = []
+      this.typeOptionRuleForm = {
+        value: 'id'
+      }
+      this.propertyFormRow = []
+      this.propertyRuleForm = {}
+      this.propertyActiveList = []
+      let propertyRuleForm = []
+      let optionRuleForm = []
+      let typeOptionRuleForm = []
+
+      this.$nextTick(() => {
+        // 重置表单
+        this.$refs.optionForm.resetForm()
+        this.optionRuleForm = deepClone(val)
+        console.log(this.optionRuleForm, 'this.optionRuleForm')
+        let dom = document.querySelector('.optionForm')
+        dom.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        })
+        //表单规则处理
+        if (!val.mdmModuleDbFiledsRules) return
+        val.mdmModuleDbFiledsRules.forEach(item => {
+          if (item.ruleCode === 'required' || item.ruleCode === 'disabled') {
+            if (!item.ruleValue) {
+              this.$set(this[item.formName], item.ruleCode, false)
+            } else if (typeof item.ruleValue === 'boolean') {
+              this.$set(this[item.formName], item.ruleCode, item.ruleValue)
+            } else {
+              this.$set(this[item.formName], item.ruleCode, JSON.parse(item.ruleValue))
+            }
+          } else {
+            this.$set(this[item.formName], item.ruleCode, item.ruleValue)
+          }
+          if (item.formName === 'propertyRuleForm') {
+            propertyRuleForm.push(item.ruleCode)
+          }
+        })
+        if (this.typeOptionRuleForm.service) {
+          this.typeSelectChangeHanlde(this.typeOptionRuleForm.service, '', '', { id: 'service' }, true)
+        }
+        this.selectChangeHanlde(this.optionRuleForm.type, '', '', { id: 'type' }, true)
+        this.propertyActiveList = propertyRuleForm
+        this.propertyActiveListChangeHanlde(this.propertyActiveList)
+
+      })
+    },
+    //配置项表通过
+    optionOnSubmit() {
+      this.$refs.typeOptionForm.submitForm()
+    },
+    //type表通过
+    typeOptionOnSubmit() {
+      this.$refs.propertyForm.submitForm()
+    },
+    //可选属性表通过校验
+    propertyOnSubmit() {
+      //开始暂存
+      let tempDist = {
+        title: true,
+        row: true,
+        type: true,
+        required: true,
+        disabled: true,
+        width: true
+      }
+      let tempArr = []
+      let disabledWords = ['id', 'document_rule', 'document_rule_num', 'sorts', 'create_user_id', 'create_time', 'modify_user_id', 'modify_time', 'sts', 'org_id']
+      if (disabledWords.includes(this.optionRuleForm.enName)) {
+        this.$vmNews(`暂存失败，英文名${this.optionRuleForm.enName}不合法。`)
+        return
+      }
+      if (this.optionRuleForm.type === 'datepick' || this.optionRuleForm.type === 'daterange') {
+        if (this.optionRuleForm.filedType != 4) {
+          this.$vmNews('字段类型与数据类型不合法，请选择日期类型', 'warning')
+          return
+        }
+      }
+      if (this.optionRuleForm.filedType == 4) {
+        if (this.optionRuleForm.type !== 'datepick' && this.optionRuleForm.type !== 'daterange') {
+          this.$vmNews('字段类型与数据类型不合法', 'warning')
+          return
+        }
+      }
+      this.$set(this.activedTableRow, 'chName', this.optionRuleForm.chName)
+      this.$set(this.activedTableRow, 'enName', this.optionRuleForm.enName)
+      this.$set(this.activedTableRow, 'filedType', this.optionRuleForm.filedType)
+      this.$set(this.activedTableRow, 'filedLength', this.optionRuleForm.filedLength)
+      this.optionFormRow.forEach(item => {
+        if (tempDist[item.elCol[0].id]) {
+          tempArr.push({
+            ruleName: item.elCol[0].title,
+            ruleCode: item.elCol[0].id,
+            ruleValue: this.optionRuleForm[item.elCol[0].id],
+            ruleType: 2,
+            formName: 'optionRuleForm'
+          })
+        }
+      })
+      this.typeOptionFormRow.forEach(item => {
+        tempArr.push({
+          ruleName: item.elCol[0].title,
+          ruleCode: item.elCol[0].id,
+          ruleValue: this.typeOptionRuleForm[item.elCol[0].id],
+          ruleType: 2,
+          formName: 'typeOptionRuleForm'
+        })
+      })
+      this.propertyFormRow.forEach(item => {
+        tempArr.push({
+          ruleName: item.elCol[0].title,
+          ruleCode: item.elCol[0].id,
+          ruleValue: this.propertyRuleForm[item.elCol[0].id],
+          ruleType: 2,
+          formName: 'propertyRuleForm'
+        })
+      })
+      this.activedTableRow.mdmModuleDbFiledsRules = tempArr
+    },
+    // 保存
+    async saveHandle() {
+      console.log(this.mainTableData)
+      //判断认证规则
+      if (!this.receiptsShowTableData.length) {
+        this.$vmNews('单据规则不能为空', 'warning')
+        return
+      }
+      let flag = this.mainTableData.some((mainItem, index) => {
+        if (!mainItem.dbName) {
+          this.$vmNews(`数据表第${index + 1}行的英文名不能为空`, 'warning')
+          return true
+        }
+        return mainItem.sublistMdmModuleDbFileds.some((item, index02) => {
+          if (!item.chName) {
+            this.$vmNews(`数据表第${index + 1}行表中的${index02 + 1}行表字段数据填写不全`, 'warning')
+            return true
+
+          }
+        })
+      })
+      if (flag) return
+      this.saveLoading = true
+      let params = {
+        id: this.$route.query.id,
+        mainMdmModuleDb: this.mainTableData[0],
+        sublistMdmModuleDb: [],
+        mdmTableCodeRuleEntityList: this.receiptsShowTableData
+      }
+      this.mainTableData.forEach((item, index) => {
+        if (index > 0) {
+          params.sublistMdmModuleDb.push(item)
+        }
+      })
+      const res = await getApiModuleApi({
+        tl: 'mdmService',
+        as: 'mdmService',
+        dj: 'saveMdmModuleDb'
+      }, params)
+      if (res.status === '200') {
+        this.$vmNews('保存成功！', 'success')
+        this.init()
+      }
+      this.saveLoading = false
+    },
+    // 主表按钮
+    mainOnFunc(row, item) {
+      if (!row.newFlag) {
+        this.$vmNews('此行不允许删除', 'warning')
+        return
+      }
+      this.$confirm('确定删除？')
+          .then((_) => {
+            this.mainTableData.splice(row.index, 1)
+          })
+          .catch((_) => {
+          })
+    },
+    //选中表按钮
+    activedOnFunc(row) {
+      if (!row.newFlag) {
+        this.$vmNews('此行不允许删除', 'warning')
+        return
+      }
+      this.$confirm('确定删除？')
+          .then((_) => {
+            this.activedTableData.splice(row.index, 1)
+          })
+          .catch((_) => {
+          })
+    },
+    //规则表格删除
+    receiptsOnFunc(row) {
+      this.receiptsTableData.splice(row.index, 1)
+    },
+    //规则表提交
+    receiptsConfirm() {
+      let type = false
+      let flag = this.receiptsTableData.some((item, index) => {
+        if (!item.dbType || !item.dbValue) {
+          this.$vmNews(`请选择${index + 1}行的类型并填写或选择规则`, 'warning')
+          return true
+        } else if (item.dbType === '4' && index + 1 !== this.receiptsTableData.length) {
+          type = true
+          this.$vmNews(`流水号只允许在最后一行`, 'warning')
+          return true
+        } else if (item.dbType === '4') {
+          type = true
+        }
+      })
+      if (!type) {
+        this.$vmNews(`请添加流水号`, 'warning')
+        return
+      }
+      if (flag) return
+
+      this.receiptsShow = false
+      this.receiptsShowTableData = deepClone(this.receiptsTableData)
+
+    },
+    //主表添加按钮
+    addMainAddRow() {
+      this.mainTableData.push({
+        'dbName': ``,
+        'dbType': '2',
+        'remark': '',
+        sublistMdmModuleDbFileds: [],
+        newFlag: true
+      })
+    },
+    //选中表添加按钮
+    activedAddRow() {
+      this.activedTableData.push({ newFlag: true, disabled: false, required: false })
+    },
+    //表单输入框失焦事件（为了让中文名称可以给显示名）
+    optionFormInputBlur(id, row) {
+      if (id === 'chName' && !row.title) {
+        this.$set(row, 'title', row['chName'])
+      }
+    }
+  },
+  components: {
+    baseNewForm,
+    BaseTable,
+    baseDialog
+  },
+  created() {
+    this.initSelect()
+    this.init()
+    this.$emit('flashActive', 1)
+  },
+  watch: {},
+  computed: {
+    labelOptionsAuto() {
+      return this.labelOptions
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+  display: block !important;
+}
+
+.wrap {
+  background-color: #fbfbfb;
+  width: 100%;
+  position: relative;
+
+  > .btn {
+    display: flex;
+    justify-content: flex-end;
+
+    > .chunk {
+      margin-left: 10px;
+    }
+  }
+
+  > .main {
+    margin-top: 10px;
+    display: flex;
+
+    > .left {
+      flex: 0.75;
+      height: 85vh;
+      margin-right: 10px;
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 0 15px;
+      overflow: auto;
+
+      > .title {
+        color: #000;
+        font-weight: 600;
+        margin: 20px 0;
+      }
+
+      > .receipts {
+        display: flex;
+        align-items: center;
+
+        .receiptsList {
+          text-align: center;
+          cursor: pointer;
+          margin-left: 20px;
+          padding: 20px;
+          background-color: #fafafa;
+          display: flex;
+          align-items: center;
+
+          .receiptsItem {
+            margin-right: 10px;
+          }
+        }
+
+      }
+
+      .mainTable {
+        margin-top: 30px;
+
+        .mainAddRow {
+          margin-top: 30px;
+          border: 1px dotted #ccc;
+          text-align: center;
+          height: 50px;
+          line-height: 50px;
+        }
+      }
+
+      .activedTable {
+        margin-top: 30px;
+
+        .mainAddRow {
+          margin-top: 30px;
+          border: 1px dotted #ccc;
+          text-align: center;
+          height: 50px;
+          line-height: 50px;
+        }
+      }
+    }
+
+    > .right {
+      flex: 0.25;
+      height: 85vh;
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 0 10px;
+      overflow-y: auto;
+
+      > .btn {
+        margin-top: 10px;
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      > .title {
+        color: #000;
+        font-weight: 600;
+        padding: 20px 0;
+        border-bottom: 1px solid #EBEBEB;
+      }
+
+      .optionForm {
+        margin: 30px 0;
+        height: 50vh;
+        overflow-y: auto;
+      }
+
+      > .smtitle {
+        color: #000;
+        font-weight: 600;
+        padding: 20px 0;
+        border-top: 1px solid #EBEBEB;
+      }
+    }
+
+  }
+
+}
+
+</style>
+<style>
+.receiptsAddRow {
+  margin-top: 30px;
+  border: 1px dotted #ccc;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+}
+</style>
diff --git a/src/views/DataCenterOptions/dataOrigin/mainTable.vue b/src/views/DataCenterOptions/dataOrigin/mainTable.vue
new file mode 100644
index 0000000..81f8176
--- /dev/null
+++ b/src/views/DataCenterOptions/dataOrigin/mainTable.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="mainTable">
+    <baseNewForm
+      ref="mainOptionForm"
+      :spanNumber="24"
+      :isFunBtn="false"
+      :formRow="mainOptionRow"
+      :ruleForm="mainOptionForm"
+      :labelPosition="'top'"
+      :rules="rules"
+      @onSubmit="mainOptionOnSubmit"
+    >
+    </baseNewForm>
+  </div>
+</template>
+<script>
+import baseNewForm from '../compoments/baseNewForm'
+
+export default {
+  name: 'mainTable',
+  components: {
+    baseNewForm
+  },
+  data() {
+    return {
+      mainOptionRow: [
+        {
+          elCol: [
+            {
+              type: 'input',
+              title: '英文名',
+              id: 'dbName',
+              disabledOfId: true,
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,50}$/,
+              message: '须以字母开头且不能出现_外的字符与中文'
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'input',
+              title: '表说明',
+              id: 'remark',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16
+            }
+          ]
+        }
+      ],
+      mainOptionForm: {},
+      rules: {
+        dbName: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+      }
+    }
+  },
+  methods: {
+    mainOptionOnSubmit() {
+
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/DataCenterOptions/dataOrigin/ruleAddTable.vue b/src/views/DataCenterOptions/dataOrigin/ruleAddTable.vue
new file mode 100644
index 0000000..4d13e51
--- /dev/null
+++ b/src/views/DataCenterOptions/dataOrigin/ruleAddTable.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="ruleAddTable">
+    <BaseTable
+      ref="receiptsTable"
+      :showIndex="true"
+      :tableData="ruleAddTableData"
+      :tableColumn="receiptsTableColumn"
+      :border="false"
+      :funData="receiptsFunData"
+      tableHeight="60vh"
+      @onFunc="receiptsOnFunc"
+    >
+      <template #dbType="{row}">
+        <el-select v-model="row['dbType']" placeholder="请选择"
+                   @change="(val)=>ruleTypeSeleceChangHandle(val,row)"
+        >
+          <el-option
+            v-for="item in ruleTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </template>
+      <template #dbValue="{row}">
+        <div v-if="!row['dbType']">请选择格式类型</div>
+        <div v-else-if="row['dbType'] === '1'">{{ row.dbValue }}</div>
+        <div v-else-if="row['dbType'] === '2'">
+          <el-input v-model="row.dbValue"></el-input>
+        </div>
+        <div v-else-if="row['dbType'] === '3'">
+          <el-select v-model="row.dbValue" placeholder="请选择" style="width: 100%;">
+            <el-option
+              v-for="item in dateOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div v-else-if="row['dbType'] === '4'">
+          <el-input v-model="row.dbValue" @input="(val)=>integerNumber(val,row)"></el-input>
+        </div>
+      </template>
+      <template #operation="{row}">
+        <div class="deleBtn" @click="receiptsOnFunc(row)">
+          <img src="./images/删除.png" alt="">
+        </div>
+      </template>
+    </BaseTable>
+    <div class="receiptsAddRow" style="margin-top: 30px;
+  border: 1px dotted #ccc;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;"
+    >
+      <el-link
+        type="primary"
+        @click="receiptsAddRow"
+        :underline="false"
+      >+ 添加
+      </el-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+
+export default {
+  name: 'ruleAddTable',
+  components: { BaseTable },
+  data() {
+    return {
+      receiptsTableData: [],//单据规则表单
+      ruleAddTableData: [],//单据规则添加用表单
+      receiptsTableColumn: [
+        {
+          title: '类型',
+          id: 'dbType'
+        },
+        {
+          title: '格式规则',
+          id: 'dbValue'
+        },
+        {
+          title: '操作',
+          id: 'operation',
+          width: 70
+        }
+      ],//单据规则表单
+      ruleTypeOptions: [
+        {
+          label: '连接符号',
+          value: '1'
+        }, {
+          label: '字符串',
+          value: '2'
+        }, {
+          label: '日期',
+          value: '3'
+        }, {
+          label: '流水号',
+          value: '4'
+        }
+      ],//单据规则下啦
+      receiptsFunData: [],//单据规则按钮
+      dateOptions: [
+        {
+          label: 'yyyy-MM-dd',
+          value: 'yyyy-MM-dd'
+        }, {
+          label: 'yyyyMMdd',
+          value: 'yyyyMMdd'
+        }, {
+          label: 'yyyy-MM-dd HH:mm:ss',
+          value: 'yyyy-MM-dd HH:mm:ss'
+        }, {
+          label: 'yyyyMMddHHmmss',
+          value: 'yyyyMMddHHmmss'
+        }, {
+          label: 'yyyyMMddHHmmssSSS',
+          value: 'yyyyMMddHHmmssSSS'
+        }
+      ]
+    }
+  },
+  methods: {
+    //规则表格删除
+    receiptsOnFunc(row) {
+      this.ruleAddTableData.splice(row.index, 1)
+    },
+    //单据规则添加行
+    receiptsAddRow() {
+      this.ruleAddTableData.push({})
+    },
+    //单据规则下拉改变事件
+    ruleTypeSeleceChangHandle(val, row) {
+      this.$set(row, 'dbValue', '')
+      if (val === '1') {
+        row['dbValue'] = '-'
+      }
+    },
+    //流水号修改事件
+    integerNumber(val, row) {
+      row['dbValue'] = row['dbValue'].replace(/[^\d]/g, '')
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.deleBtn {
+  cursor: pointer;
+  margin-left: 10px;
+  width: 24px;
+  height: 24px;
+  background: #EBEBED;
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > img {
+    width: 10px;
+    height: 10px;
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/dataOrigin/sonTable.vue b/src/views/DataCenterOptions/dataOrigin/sonTable.vue
new file mode 100644
index 0000000..dbbe80c
--- /dev/null
+++ b/src/views/DataCenterOptions/dataOrigin/sonTable.vue
@@ -0,0 +1,866 @@
+<template>
+  <div class="sonTable">
+    <div class="optionForm">
+      <baseNewForm
+          ref="optionForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="optionFormRow"
+          :ruleForm="optionRuleForm"
+          :labelPosition="'top'"
+          @onSelect="selectChangeHanlde"
+          @inputBlur="optionFormInputBlur"
+          @onSubmit="optionOnSubmit"
+          :rules="rules"
+      >
+      </baseNewForm>
+      <baseNewForm
+        :rules="rules"
+          ref="typeOptionForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="typeOptionFormRow"
+          :ruleForm="typeOptionRuleForm"
+          :labelPosition="'top'"
+          @onSelect="typeSelectChangeHanlde"
+          @onSubmit="typeOptionOnSubmit"
+      >
+      </baseNewForm>
+      <baseNewForm
+        :rules="rules"
+          ref="propertyForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="propertyFormRow"
+          :ruleForm="propertyRuleForm"
+          :labelPosition="'top'"
+          @onSubmit="propertyOnSubmit"
+
+      >
+      </baseNewForm>
+    </div>
+    <div class="smtitle">
+      可选控间属性
+    </div>
+    <div class="checkBoxList">
+      <el-checkbox-group v-model="propertyActiveList"
+                         @change="propertyActiveListChangeHanlde"
+      >
+        <el-checkbox v-for="(item,index) in propertyList" :label="item.id" :key="item.id">{{
+            item.label
+          }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+<script>
+import baseNewForm from '../compoments/baseNewForm.vue'
+import { deepClone } from '@/utils'
+import { getApiModuleApi } from '@/api/apiChunks'
+
+export default {
+  name: 'sonTable',
+  props: {
+    activedTableData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    mainTempClick: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      rules:{
+        chName: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        enName: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        filedType: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        filedLength: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        title: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        row: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        service: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        label: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+        upId: [{
+          required: true,
+          message: '请输入源数据',
+          trigger: 'blur'
+        }],
+      },
+      activedTableRow: {},//当前选中行
+      optionFormRow: [
+        {
+          elCol: [
+            {
+              type: 'input',
+              title: '中文名称',
+              id: 'chName',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'input',
+              title: '英文名称',
+              id: 'enName',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              pattern: /^[a-z][a-z0-9_]{0,50}$/,
+              message: '必须以小写字母开头，只能包含小写字母、数字和下划线，不能包含中文字符或其他符号。',
+              disabledOfId: true
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '字段类型',
+              id: 'filedType',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'num',
+              title: '长度',
+              id: 'filedLength',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              max: 255
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'input',
+              title: '显示名',
+              id: 'title',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16
+            }
+          ]
+        }
+        , {
+          elCol: [
+            {
+              type: 'select',
+              title: '宽度',
+              id: 'row',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [
+                {
+                  label: '3',
+                  id: '3'
+                }, {
+                  label: '6',
+                  id: '6'
+                }, {
+                  label: '9',
+                  id: '9'
+                }, {
+                  label: '12',
+                  id: '12'
+                }, {
+                  label: '15',
+                  id: '15'
+                }, {
+                  label: '18',
+                  id: '18'
+                }, {
+                  label: '21',
+                  id: '21'
+                }, {
+                  label: '24',
+                  id: '24'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'num',
+              title: '单元格宽度',
+              id: 'width',
+              row: 24,
+              disabled: false,
+              required: false,
+              fontSize: 16,
+              message: 'px'
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '数据类型',
+              id: 'type',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [
+                {
+                  label: 'input',
+                  id: 'input'
+                }, {
+                  label: 'datepick',
+                  id: 'datepick'
+                },
+                // {
+                //   label: 'daterange',
+                //   id: 'daterange'
+                // },
+                {
+                  label: 'radio',
+                  id: 'radio'
+                }, {
+                  label: 'textrea',
+                  id: 'textrea'
+                }, {
+                  label: 'select',
+                  id: 'select'
+                }, {
+                  label: 'treeselect',
+                  id: 'treeselect'
+                },
+                {
+                  label: 'number',
+                  id: 'num'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'onecheck',
+              title: '必填',
+              id: 'required',
+              row: 24,
+              disabled: false,
+              required: false,
+              fontSize: 16,
+              options: [
+                {
+                  label: '是',
+                  id: 'true'
+                }, {
+                  label: '否',
+                  id: 'false'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'onecheck',
+              title: '禁止修改',
+              id: 'disabled',
+              row: 24,
+              disabled: false,
+              required: false,
+              fontSize: 16,
+              options: [
+                {
+                  label: '是',
+                  id: 'true'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      optionRuleForm: {},//表字段options数据
+      //type选中后的表
+      typeOptionFormRow: [],
+      typeOptionRuleForm: {},//表字段根据type数据
+      propertyFormRow: [],//可选属性表表格（渲染）
+      propertyRuleForm: {},//可选属性表数据
+      propertyActiveList: [],//可选属性选中列表（v-model)
+      propertyList: [
+        {
+          label: '大于',
+          id: 'up'
+        }, {
+          label: '小于',
+          id: 'low'
+        },
+        {
+          label: '正则',
+          id: 'pattern'
+        },
+        { label: '正则提示', id: 'message' }
+      ],//可选属性列表
+        //可选属性表数据字典
+      typeDist: {
+        select: [
+          {
+            type: 'select',
+            id: 'service',
+            title: '服务名称',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'label',
+            title: 'label',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }, {
+            type: 'input',
+            id: 'value',
+            title: 'value',
+            row: 24,
+            disabled: true,
+            required: true,
+            fontSize: 16,
+            options: []
+          }
+        ],
+        radio: [
+          {
+            type: 'select',
+            id: 'service',
+            title: '服务名称',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'label',
+            title: 'label',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }, {
+            type: 'input',
+            id: 'value',
+            title: 'value',
+            row: 24,
+            disabled: true,
+            required: true,
+            fontSize: 16,
+            options: []
+          }
+        ],
+        treeselect: [
+          {
+            type: 'select',
+            id: 'service',
+            title: '服务名称',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'label',
+            title: 'label',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }, {
+            type: 'input',
+            id: 'value',
+            title: 'value',
+            row: 24,
+            disabled: true,
+            required: false,
+            fontSize: 16,
+            options: []
+          },
+          {
+            type: 'select',
+            id: 'upId',
+            title: 'upId',
+            row: 24,
+            disabled: false,
+            required: true,
+            fontSize: 16,
+            options: []
+          }
+        ]
+      },
+      serviceOptions: [], //服务下啦
+      //radiolist属性数字字典
+      propertyDist: {
+        up: {
+          type: 'select',
+          id: 'up',
+          title: '大于',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16,
+          options: []
+        },
+        low: {
+          type: 'select',
+          id: 'low',
+          title: '小于',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16,
+          options: []
+        },
+        pattern: {
+          type: 'input',
+          id: 'pattern',
+          title: '正则',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16
+        },
+        message: {
+          type: 'input',
+          id: 'message',
+          title: '正则提示',
+          row: 24,
+          disabled: false,
+          required: true,
+          fontSize: 16
+        }
+      }
+    }
+  },
+  methods: {
+    //回显事件
+    activedOnClick(val) {
+      this.activedTableRow = val
+      //清空type带出来的ruleForm
+      this.typeOptionFormRow = []
+      this.typeOptionRuleForm = {
+        value: 'id'
+      }
+      this.propertyFormRow = []
+      this.propertyRuleForm = {}
+      this.propertyActiveList = []
+      let propertyRuleForm = []
+      let optionRuleForm = []
+      let typeOptionRuleForm = []
+
+      this.$nextTick(() => {
+        // 重置表单
+        this.$refs.optionForm.resetForm()
+        this.optionRuleForm = deepClone(val)
+        console.log(this.optionRuleForm, 'this.optionRuleForm')
+        let dom = document.querySelector('.optionForm')
+        dom.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        })
+        //表单规则处理
+        if (!val.mdmModuleDbFiledsRules) return
+        val.mdmModuleDbFiledsRules.forEach(item => {
+          if (item.ruleCode === 'required' || item.ruleCode === 'disabled') {
+            if (!item.ruleValue) {
+              this.$set(this[item.formName], item.ruleCode, false)
+            } else if (typeof item.ruleValue === 'boolean') {
+              this.$set(this[item.formName], item.ruleCode, item.ruleValue)
+            } else {
+              this.$set(this[item.formName], item.ruleCode, JSON.parse(item.ruleValue))
+            }
+          } else {
+            this.$set(this[item.formName], item.ruleCode, item.ruleValue)
+          }
+          if (item.formName === 'propertyRuleForm') {
+            propertyRuleForm.push(item.ruleCode)
+          }
+        })
+        if (this.typeOptionRuleForm.service) {
+          this.typeSelectChangeHanlde(this.typeOptionRuleForm.service, '', '', {
+            id: 'service',
+            options: this.serviceOptions
+          }, true)
+        }
+        this.selectChangeHanlde(this.optionRuleForm.type, '', '', { id: 'type' }, true)
+        this.selectChangeHanlde(this.optionRuleForm.filedType, '', '', { id: 'filedType' }, true)
+        this.propertyActiveList = propertyRuleForm
+        this.propertyActiveListChangeHanlde(this.propertyActiveList)
+
+      })
+    },
+    //表字段下拉触发（根据type类型动态对表
+    selectChangeHanlde(val, index, indexRow, row, init = false) {
+      if (row.id === 'type') {
+        this.typeOptionFormRow = []
+        if (!init) {
+          this.typeOptionRuleForm = {
+            value: 'id'
+          }
+        }
+        if (val && this.typeDist[val]) {
+          this.typeDist[val].forEach(item => {
+            // 如果是服务名称则将请求下来的服务名用上
+            if (item.id === 'service') {
+              item.options = deepClone(this.serviceOptions)
+            }
+            let tempObj = {
+              elCol: [
+                {
+                  ...item
+                }
+              ]
+            }
+            this.typeOptionFormRow.push(tempObj)
+          })
+        }
+      }
+      //字段类型下啦改变时 将数据类型下啦重置
+      if (row.id === 'filedType') {
+        if (val) {
+          let dist = {
+            1: [
+              {
+                label: 'number',
+                id: 'num'
+              }
+            ],
+            2: [
+              {
+                label: 'number',
+                id: 'num'
+              }
+            ],
+            3: [
+              {
+                label: 'input',
+                id: 'input'
+              },
+              {
+                label: 'radio',
+                id: 'radio'
+              },
+              {
+                label: 'textrea',
+                id: 'textrea'
+              },
+              {
+                label: 'select',
+                id: 'select'
+              },
+              {
+                label: 'treeselect',
+                id: 'treeselect'
+              }
+            ],
+            4: [
+              {
+                label: 'datepick',
+                id: 'datepick'
+              }
+              // {
+              //   label: 'daterange',
+              //   id: 'daterange'
+              // }
+            ]
+          }
+          this.optionFormRow[7].elCol[0].options = dist[val]
+          if (val == 4) {
+            this.optionFormRow[3].elCol[0].disabled = true
+            this.optionFormRow[3].elCol[0].required = false
+            this.$set(this.optionRuleForm, 'filedLength', '')
+          } else {
+            this.optionFormRow[3].elCol[0].disabled = false
+            this.optionFormRow[3].elCol[0].required = true
+          }
+        } else {
+          this.optionFormRow[3].elCol[0].disabled = false
+          this.optionFormRow[3].elCol[0].required = true
+        }
+        if (!init) {
+          this.$set(this.optionRuleForm, 'type', '')
+          this.typeOptionFormRow = []
+          this.typeOptionRuleForm = {}
+        }
+
+      }
+
+    }
+    ,
+    //表单输入框失焦事件（为了让中文名称可以给显示名）
+    optionFormInputBlur(id, row) {
+      if (id === 'chName' && !row.title) {
+        this.$set(row, 'title', row['chName'])
+      }
+    }
+    ,
+    //配置项表通过
+    optionOnSubmit() {
+      this.$refs.typeOptionForm.submitForm()
+    }
+    ,
+    //type表下拉触发（目的是为了服务名称下拉后拿到label
+    async typeSelectChangeHanlde(val, index, indexRow, row, initFlag = false) {
+      if (row.id === 'service') {
+        if (val) {
+          let obj = row.options.find(item => {
+            return val === item.id
+          })
+          console.log(obj, 'obj')
+          const res = await getApiModuleApi({
+            tl: 'mdmModuleService',
+            as: '',
+            dj: 'queryMdmServiceField'
+          }, { mdmId: obj.mdmId, dbId: obj.dbId })
+          this.labelOptions = []
+          res.attribute.forEach(item => {
+            this.labelOptions.push({
+              id: item.enName,
+              label: item.chName
+            })
+          })
+        } else {
+          this.labelOptions = []
+        }
+
+        this.typeOptionFormRow.forEach(item => {
+          if (item.elCol[0].id === 'label' || item.elCol[0].id === 'upId') {
+            if (!initFlag) {
+              this.$set(this.typeOptionRuleForm, item.elCol[0].id, '')
+            }
+            item.elCol[0].options = deepClone(this.labelOptions)
+          }
+        })
+      }
+    }
+    ,
+    //type表通过
+    typeOptionOnSubmit() {
+      this.$refs.propertyForm.submitForm()
+    }
+    ,
+    //可选属性表通过校验 准备开始保存
+    propertyOnSubmit() {
+      console.log('进入保存方法', this.activedTableRow)
+      let params = {
+        mdmId: this.$route.query.id,
+        dbId: this.mainTempClick.id,
+        dbType: this.mainTempClick.dbType,
+        dbName: this.mainTempClick.dbName,
+        id: this.activedTableRow.id
+      }
+      //开始暂存
+      let tempDist = {
+        title: true,
+        row: true,
+        type: true,
+        required: true,
+        disabled: true,
+        width: true
+      }
+      let tempArr = []
+      let disabledWords = ['id', 'formmain_id', 'data_status', 'sorts', 'create_user_id', 'create_time', 'modify_user_id', 'modify_time', 'sts', 'org_id', 'company_id', 'data_id']
+      if (disabledWords.includes(this.optionRuleForm.enName)) {
+        this.$vmNews(`暂存失败，英文名${this.optionRuleForm.enName}不合法。`)
+        return
+      }
+      if (this.optionRuleForm.type === 'datepick' || this.optionRuleForm.type === 'daterange') {
+        if (this.optionRuleForm.filedType != 4) {
+          this.$vmNews('字段类型与数据类型不合法，请选择日期类型', 'warning')
+          return
+        }
+      }
+      if (this.optionRuleForm.filedType == 4) {
+        if (this.optionRuleForm.type !== 'datepick' && this.optionRuleForm.type !== 'daterange') {
+          this.$vmNews('字段类型与数据类型不合法', 'warning')
+          return
+        }
+      }
+      if (this.optionRuleForm.filedLength * 1 > 255) {
+        this.$vmNews('长度不能大于255')
+        return
+      }
+      if (this.optionRuleForm.filedType == 2 && this.optionRuleForm.filedLength * 1 > 65) {
+        this.$vmNews('当字段类型为金额时长度不得大于65')
+        return
+      }
+      this.$set(params, 'chName', this.optionRuleForm.chName)
+      this.$set(params, 'enName', this.optionRuleForm.enName)
+      this.$set(params, 'filedType', this.optionRuleForm.filedType)
+      this.$set(params, 'filedLength', this.optionRuleForm.filedLength)
+      this.optionFormRow.forEach(item => {
+        if (tempDist[item.elCol[0].id]) {
+          tempArr.push({
+            ruleName: item.elCol[0].title,
+            ruleCode: item.elCol[0].id,
+            ruleValue: this.optionRuleForm[item.elCol[0].id],
+            ruleType: 2,
+            formName: 'optionRuleForm'
+          })
+        }
+      })
+      this.typeOptionFormRow.forEach(item => {
+        tempArr.push({
+          ruleName: item.elCol[0].title,
+          ruleCode: item.elCol[0].id,
+          ruleValue: this.typeOptionRuleForm[item.elCol[0].id],
+          ruleType: 2,
+          formName: 'typeOptionRuleForm'
+        })
+      })
+      this.propertyFormRow.forEach(item => {
+        tempArr.push({
+          ruleName: item.elCol[0].title,
+          ruleCode: item.elCol[0].id,
+          ruleValue: this.propertyRuleForm[item.elCol[0].id],
+          ruleType: 2,
+          formName: 'propertyRuleForm'
+        })
+      })
+      params.mdmModuleDbFiledsRules = tempArr
+      console.log(params)
+      this.$emit('sonSaveHandle', params)
+
+    }
+    ,
+    // 可选属性表变更方法
+    propertyActiveListChangeHanlde(val) {
+      this.propertyFormRow = []
+      // 消除表单里被取消的值
+      Object.keys(this.propertyRuleForm).forEach(item => {
+        if (!val.includes(item)) {
+          this.$delete(this.propertyRuleForm, item)
+        }
+      })
+      if (val === 'up' || val === 'low') {
+        this.activedTableData.forEach(item => {
+          tempOptions.push({ label: item.id, chName: item.enName })
+        })
+      }
+
+      // 通过字典找到值的类型渲染在表单上
+      val.forEach(item => {
+        let tempOptions = []
+        //若是大于和小于则需要将datepick拿到放进来选
+        if (item === 'up' || item === 'low') {
+          this.activedTableData.some(ele => {
+            console.log(ele, 'ele')
+            if (this.activedTableRow.id === ele.id || !ele.mdmModuleDbFiledsRules) return false
+            ele.mdmModuleDbFiledsRules.forEach(ele02 => {
+              if (ele02.ruleValue === 'datepick') {
+                tempOptions.push({ label: ele.chName, id: ele.enName })
+              }
+            })
+          })
+        }
+        let tempObj = {
+          elCol: [
+            {
+              ...this.propertyDist[item],
+              options: tempOptions
+            }
+          ]
+        }
+        this.propertyFormRow.push(tempObj)
+      })
+
+    }
+  },
+  components: {
+    baseNewForm
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.smtitle {
+  color: #333;
+  font-weight: 400;
+  padding: 20px 0;
+  border-top: 1px solid #EBEBEB;
+}
+
+.checkBoxList {
+  padding-bottom: 50px;
+}
+</style>
diff --git a/src/views/DataCenterOptions/displayInfo/images/删除.png b/src/views/DataCenterOptions/displayInfo/images/删除.png
new file mode 100644
index 0000000..c74a004
Binary files /dev/null and b/src/views/DataCenterOptions/displayInfo/images/删除.png differ
diff --git a/src/views/DataCenterOptions/displayInfo/images/设置.png b/src/views/DataCenterOptions/displayInfo/images/设置.png
new file mode 100644
index 0000000..b6fd71a
Binary files /dev/null and b/src/views/DataCenterOptions/displayInfo/images/设置.png differ
diff --git a/src/views/DataCenterOptions/displayInfo/index.vue b/src/views/DataCenterOptions/displayInfo/index.vue
new file mode 100644
index 0000000..69b771a
--- /dev/null
+++ b/src/views/DataCenterOptions/displayInfo/index.vue
@@ -0,0 +1,608 @@
+<template>
+  <div class="displayInfo" v-loading="mainLoading">
+    <div class="typeSetting">
+      <div class="btn">
+        <div class="title">显示类型</div>
+        <div class="chunk">
+          <el-button
+            v-if="!editFlag"
+            icon="el-icon-edit"
+            type="primary"
+            @click="editFlag=true"
+          >编辑
+          </el-button>
+          <el-button
+            v-if="editFlag"
+            icon="el-icon-close"
+            @click="getRuleForm"
+            :loading="saveLoading"
+          >取消
+          </el-button>
+          <el-button
+            v-if="editFlag"
+            icon="el-icon-first-aid-kit"
+            type="primary"
+            @click="saveHandle"
+            :loading="saveLoading"
+          >保存
+          </el-button>
+        </div>
+      </div>
+      <template v-if="!editFlag">
+        <div class="radio" style="margin-bottom: 20px">
+          <el-radio-group v-model="displayType" :disabled="true">
+            <el-radio label="1">树形</el-radio>
+            <el-radio label="2">列表</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="form" v-if="displayType == 1">
+          <baseNewForm
+            ref="optionForm"
+            :spanNumber="24"
+            :isFunBtn="false"
+            :formRow="formRow"
+            :ruleForm="ruleForm"
+            :labelPosition="'right'"
+            labelWidth="100px"
+            @onSubmit="onSubmit"
+            :lookFlag="true"
+          >
+          </baseNewForm>
+        </div>
+      </template>
+      <template v-else>
+        <div class="radio" style="margin-bottom: 20px">
+          <el-radio-group v-model="displayType">
+            <el-radio label="1">树形</el-radio>
+            <el-radio label="2">列表</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="form" v-if="displayType == 1">
+          <baseNewForm
+            ref="optionForm"
+            :spanNumber="24"
+            :isFunBtn="false"
+            :formRow="formRow"
+            :ruleForm="ruleForm"
+            :labelPosition="'right'"
+            labelWidth="100px"
+            @onSubmit="onSubmit"
+          >
+          </baseNewForm>
+        </div>
+      </template>
+
+    </div>
+    <div class="main">
+      <div class="content">
+        <div class="showItem">
+          <div class="itemTitle">查询</div>
+          <div class="setting">
+            <div class="settingBox" @click="settingHandle('查询')">
+              <div class="img">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="value">设置</div>
+            </div>
+          </div>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="index">
+              <div class="name">{{ item.viewName }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem">
+          <div class="itemTitle">列表</div>
+          <div class="setting">
+            <div class="settingBox" @click="settingHandle('列表')">
+              <div class="img">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="value">设置</div>
+            </div>
+          </div>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in dbListFiled" :key="index">
+              <div class="name">{{ item.viewName }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem">
+          <div class="itemTitle">新增</div>
+          <div class="setting">
+            <div class="settingBox" @click="settingHandle('新增')">
+              <div class="img">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="value">设置</div>
+            </div>
+          </div>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in dbAddFiled" :key="index">
+              <div class="name">{{ item.viewName }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem">
+          <div class="itemTitle">修改</div>
+          <div class="setting">
+            <div class="settingBox" @click="settingHandle('修改')">
+              <div class="img">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="value">设置</div>
+            </div>
+          </div>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in dbEditFiled" :key="index">
+              <div class="name">{{ item.viewName }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem">
+          <div class="itemTitle">查看</div>
+          <div class="setting">
+            <div class="settingBox" @click="settingHandle('查看')">
+              <div class="img">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="value">设置</div>
+            </div>
+          </div>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in dbShowFiled" :key="index">
+              <div class="name">{{ item.viewName }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem">
+          <div class="itemTitle">按钮</div>
+          <div class="setting">
+            <div class="settingBox" @click="settingHandle('按钮')">
+              <div class="img">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="value">设置</div>
+            </div>
+          </div>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in btnShowList" :key="index">
+              <div class="name">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--     -->
+    <base-right-dialog
+      ref="mainTableAddtDialog"
+      :footerShow="true"
+      :dialogVisible.sync="mainTableDialogShow"
+      :title="activeTitle + '设置'"
+      :submitShow="true"
+      :size="'50%'"
+      @handleConfirmClick="mainTableSaveHandle"
+      @handleClose="mainTableDialogShow=false"
+    >
+      <div class="mainTable">
+        <settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
+      </div>
+    </base-right-dialog>
+  </div>
+</template>
+<script>
+import settingChunk from '@/views/masterDataOptions/displayInfo/settingChunk.vue'
+import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
+import { getApiModuleApi } from '@/api/apiChunks/index.js'
+import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  name: 'index.vue',
+  data() {
+    return {
+      formRow: [
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '显示字段',
+              id: 'viewFiled',
+              row: 6,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            },
+            {
+              type: 'select',
+              title: '上级id字段',
+              id: 'upIdFiled',
+              row: 6,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        }
+      ],
+      ruleForm: {},
+      ainLoading: false,
+      displayType: '1',//显示类型
+      saveLoading: false,//保存loading
+      activeTitle: '',//当前选中的key名用于右弹窗
+      mainTableDialogShow: false,
+      mainLoading: false,
+      'dbQueryFiled': [],//查询
+      'dbAddFiled': [],//新增
+      'dbEditFiled': [],//修改
+      'dbShowFiled': [],//查看
+      'dbListFiled': [],//列表
+      btnShowList: [],//已选中的按钮
+      allFiledList: [
+        {
+          buttonName: '新建',
+          buttonValue: 'new',
+          buttonType: '1'
+        }, {
+          buttonName: '重置',
+          buttonValue: 'resize',
+          buttonType: '2'
+        }, {
+          buttonName: '查询',
+          buttonValue: 'search',
+          buttonType: '3'
+        }, {
+          buttonName: '修改',
+          buttonValue: 'edit',
+          buttonType: '4'
+        }, {
+          buttonName: '删除',
+          buttonValue: 'dele',
+          buttonType: '5'
+        }, {
+          buttonName: '查看',
+          buttonValue: 'view',
+          buttonType: '6'
+        }, {
+          buttonName: '下发',
+          buttonValue: 'send',
+          buttonType: '7'
+        }
+      ],//所有按钮
+      dist: {
+        '查询': ['queryFiled', 'dbQueryFiled', 1],
+        '列表': ['listFiled', 'dbListFiled', 2],
+        '新增': ['addFiled', 'dbAddFiled', 3],
+        '修改': ['editFiled', 'dbEditFiled', 4],
+        '查看': ['showFiled', 'dbShowFiled', 5]
+      },//字典
+      editFlag: false
+    }
+  },
+  methods: {
+    async initSelect() {
+      const res = await getApiModuleApi({
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'queryMdmMainDBField'
+      }, {
+        mdmId: this.$route.query.id
+      })
+      if (res.status === '200') {
+        this.formRow[0].elCol[1].options = []
+        this.formRow[0].elCol[0].options = []
+        res.attribute.forEach(item => {
+          this.formRow[0].elCol[1].options.push({
+            label: item.chName,
+            id: item.enName
+          })
+          this.formRow[0].elCol[0].options.push({
+            label: item.chName,
+            id: item.enName
+          })
+        })
+      }
+    },
+    //设置保存成功
+    saveSuccessEmit() {
+      this.mainTableDialogShow = false
+      this.getAllField()
+    },
+    //验证通过
+    async onSubmit() {
+      if (this.ruleForm.id) {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
+          ...this.ruleForm,
+          mdmId: this.$route.query.id,
+          viewName: this.displayType
+        })
+        this.$vmNews('保存成功', 'success')
+        this.editFlag = false
+        this.getRuleForm()
+      } else {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'saveMdmView', '', {
+          ...this.ruleForm,
+          mdmId: this.$route.query.id,
+          viewName: this.displayType
+
+        })
+        this.$vmNews('保存成功', 'success')
+        this.editFlag = false
+        this.getRuleForm()
+      }
+
+    },
+    //获取类型
+    async getRuleForm() {
+      this.ruleForm = {}
+      const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
+        mdmId: this.$route.query.id
+      })
+      console.log(res.attribute, 'res.attribute', res)
+      this.ruleForm = res.attribute ? res.attribute : {}
+      this.displayType = this.ruleForm.viewName ? this.ruleForm.viewName : '1'
+      this.editFlag = false
+    },
+    //保存
+    saveHandle() {
+      if (this.displayType === '1') {
+        this.$refs.optionForm.submitForm()
+      } else {
+        this.onSubmit()
+      }
+    },
+    //点击设置
+    settingHandle(key) {
+      if (!this.ruleForm.id) {
+        this.$vmNews('请先添加显示类型后再配置按钮')
+        return
+      }
+      this.activeTitle = key
+      this.mainTableDialogShow = true
+      this.$nextTick(() => {
+        this.$refs.settingChunk.getAllBtn(key)
+      })
+    },
+    //右弹窗点击保存
+    mainTableSaveHandle() {
+      this.$refs.settingChunk.saveHandle()
+    },
+    //获取所有字段
+    async getAllField() {
+      //字段相关
+      const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
+        id: this.$route.query.id
+      })
+      console.log(res, 'res')
+      this.dbQueryFiled = res.attribute.dbQueryFiled
+      this.dbListFiled = res.attribute.dbListFiled
+      this.dbAddFiled = res.attribute.dbAddFiled
+      this.dbEditFiled = res.attribute.dbEditFiled
+      this.dbShowFiled = res.attribute.dbShowFiled
+      //按钮相关
+      const res2 = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
+        mdmId: this.$route.query.id
+      })
+      res2.attribute.forEach(item => {
+        item.name = this.allFiledList[item.buttonType - 1].buttonName
+      })
+      this.btnShowList = res2.attribute
+    }
+  },
+  components: {
+    baseRightDialog,
+    baseNewForm,
+    settingChunk
+  },
+  created() {
+    //获取显示类型和显示字段
+    this.getRuleForm()
+    //获取下啦
+    this.initSelect()
+    //获取所有显示字段
+    this.getAllField()
+    this.$emit('flashActive', 2)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-form-item__content {
+  margin: 0 !important;
+}
+
+::v-deep .el-menu-item {
+  padding: 0 35px;
+}
+
+::v-deep .el-transfer-panel {
+  width: 25vw;
+  height: 60vh;
+}
+
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-transfer-panel__list {
+  height: 50vh;
+}
+
+::v-deep .el-transfer-panel__body {
+  height: 50vh;
+}
+
+.displayInfo {
+  background-color: #f5f5f5;
+  position: relative;
+  margin-left: 5px;
+  width: 99.5%;
+
+  > .btn {
+    display: flex;
+    justify-content: flex-end;
+
+    > .chunk {
+      margin-left: 10px;
+    }
+  }
+
+  .typeSetting {
+    background-color: #fff;
+    padding: 20px 10px 0px;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    border-radius: 16px;
+    width: 100%;
+
+    > .btn {
+      padding-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        font-weight: 600;
+        margin-left: 20px;
+        margin-bottom: 20px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 18px;
+        color: #333333;
+        line-height: 25px;
+        text-align: left;
+        font-style: normal;
+      }
+    }
+
+    > .title {
+      font-weight: 600;
+      margin-left: 20px;
+      margin-bottom: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 18px;
+      color: #333333;
+      line-height: 25px;
+      text-align: left;
+      font-style: normal;
+    }
+
+    > .radio {
+      margin: 10px 20px;
+    }
+
+    > .tabIndex {
+      margin-top: 10px;
+    }
+  }
+
+  .main {
+    border-radius: 16px;
+    background-color: #fff;
+    padding: 15px 10px;
+    width: 100%;
+    overflow: auto;
+
+    .content {
+      margin-top: 1vh;
+      display: flex;
+      align-items: center;
+      width: 2000px;
+
+      .showItem {
+        flex: 1;
+        margin-left: 15px;
+        height: 55vh;
+        background: #FFFFFF;
+        border-radius: 8px;
+        border: 1px solid #EBEBEB;
+        padding: 14px 20px;
+        position: relative;
+
+        .itemTitle {
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 500;
+          font-size: 16px;
+          color: #333333;
+          line-height: 22px;
+          font-style: normal;
+          text-align: center;
+          padding-bottom: 20px;
+          border-bottom: 1px #ebebeb solid;
+        }
+
+        .setting {
+          width: 100%;
+          height: 15vh;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          border-radius: 8px;
+          display: none;
+          justify-content: center;
+          align-items: center;
+          background-color: rgba(0, 0, 0, .6);
+
+          .settingBox {
+            cursor: pointer;
+
+            .img {
+              width: 5vh;
+              height: 5vh;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .value {
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 600;
+              font-size: 16px;
+              color: #FFFFFF;
+              line-height: 22px;
+              text-align: center;
+              font-style: normal;
+            }
+          }
+        }
+
+        &:hover {
+          .setting {
+            display: flex !important;
+          }
+        }
+
+        .showCheckBoxList {
+          height: 90%;
+          overflow: auto;
+        }
+
+        .showCheckBoxItem {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin: 16px 0 16px;
+          border-radius: 4px;
+          font-size: 14px;
+
+
+          .btn {
+            color: grey;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+
+}
+</style>
diff --git a/src/views/DataCenterOptions/displayInfo/indexOldCopy.vue b/src/views/DataCenterOptions/displayInfo/indexOldCopy.vue
new file mode 100644
index 0000000..2afae3c
--- /dev/null
+++ b/src/views/DataCenterOptions/displayInfo/indexOldCopy.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="displayInfo">
+    <div class="btn">
+      <div class="chunk">
+        <el-button
+            icon="el-icon-back"
+            @click="
+            $router.replace({ path: '/integrationOption/masterDataOptions' })
+          "
+        >返回
+        </el-button
+        >
+      </div>
+      <div class="chunk">
+        <el-button
+            icon="el-icon-first-aid-kit"
+            type="primary"
+            @click="saveHandle"
+            :loading="saveLoading"
+        >保存
+        </el-button
+        >
+      </div>
+    </div>
+    <div class="main" v-loading="mainLoading">
+      <div class="title">显示类型</div>
+      <div class="radio">
+        <el-radio-group v-model="displayType">
+          <el-radio label="1">树形</el-radio>
+          <el-radio label="2">列表</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="form" v-if="displayType == 1">
+        <baseNewForm
+            ref="optionForm"
+            :spanNumber="24"
+            :isFunBtn="false"
+            :formRow="formRow"
+            :ruleForm="ruleForm"
+            :labelPosition="'left'"
+            labelWidth="80px"
+            @onSubmit="onSubmit">
+        </baseNewForm>
+      </div>
+      <div class="tabIndex">
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <el-menu-item index="1">查询</el-menu-item>
+          <el-menu-item index="2">列表</el-menu-item>
+          <el-menu-item index="3">新增</el-menu-item>
+          <el-menu-item index="4">修改</el-menu-item>
+          <el-menu-item index="5">查看</el-menu-item>
+        </el-menu>
+      </div>
+      <div class="content">
+        <el-transfer
+            style="text-align: left; display: inline-block;"
+            v-model="contentFormArr"
+            filterable
+            :titles="['全部字段', '显示字段']"
+            target-order="push"
+            @change="handleChange"
+            @right-check-change="rightCheckChange"
+            :props="propsKey"
+            :data="data">
+          <span slot-scope="{ option }">{{ option.name }}</span>
+        </el-transfer>
+        <div class="buttonList">
+          <div class="upBtn">
+            <el-button type="primary" icon="el-icon-top" @click="upHanlde"
+                       :disabled="rightActived.length !== 1"></el-button>
+          </div>
+          <div class="downBtn">
+            <el-button type="primary" icon="el-icon-bottom" @click="downHanlde"
+                       :disabled="rightActived.length !==1"></el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
+import {getApiModuleApi} from "@/api/apiChunks/index.js";
+
+export default {
+  name: "index.vue",
+  data() {
+    return {
+      mainLoading:false,
+      saveLoading:false,
+      id: "",
+      propsKey: {
+        key: "id",
+        label: "name",
+        disabled: "disabled"
+      },
+      displayType: "1",
+      formRow: [
+        {
+          elCol: [
+            {
+              type: "select",
+              title: "显示字段",
+              id: "viewFiled",
+              row: 12,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [],
+            },
+            {
+              type: "select",
+              title: "上级id字段",
+              id: "upIdFiled",
+              row: 12,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [],
+            },
+          ]
+        }
+      ],
+      ruleForm: {},
+      activeIndex: "1",
+      contentFormArr: [],
+      data: [],
+      rightActived: [],
+      addFiled: [],
+      dbAddFiled: [],
+      editFiled: [],
+      dbEditFiled: [],
+      showFiled: [],
+      dbShowFiled: [],
+      queryFiled: [],
+      dbQueryFiled: [],
+      listFiled: [],
+      dbListFiled: [],
+    }
+  },
+  methods: {
+    async init() {
+      this.mainLoading = true
+      this.activeIndex = "1"
+      const res = await getApiModuleApi({
+        tl: "mdmService",
+        as: "mdmService",
+        dj: "queryMdmModuleView",
+      }, {
+        id: this.$route.query.id
+      })
+      this.mainLoading = false
+      this.addFiled = res.attribute.addFiled
+      this.dbAddFiled = res.attribute.dbAddFiled
+      this.initDispose(this.addFiled, this.dbAddFiled)
+      this.editFiled = res.attribute.editFiled
+      this.dbEditFiled = res.attribute.dbEditFiled
+      this.initDispose(this.editFiled, this.dbEditFiled)
+      this.showFiled = res.attribute.showFiled
+      this.dbShowFiled = res.attribute.dbShowFiled
+      this.initDispose(this.showFiled, this.dbShowFiled)
+      this.queryFiled = res.attribute.queryFiled
+      this.dbQueryFiled = res.attribute.dbQueryFiled
+      this.initDispose(this.queryFiled, this.dbQueryFiled)
+      this.listFiled = res.attribute.listFiled
+      this.dbListFiled = res.attribute.dbListFiled
+      this.initDispose(this.listFiled, this.dbListFiled)
+      this.data = this.queryFiled
+      this.contentFormArr = []
+      this.dbQueryFiled.forEach(item => {
+        this.contentFormArr.push(item.id)
+      })
+
+      this.id = res.attribute.mdmModuleViewEntity.id
+      if (!res.attribute.mdmModuleViewEntity.viewName) return
+      this.displayType = res.attribute.mdmModuleViewEntity.viewName
+      this.ruleForm = {
+        viewFiled: res.attribute.mdmModuleViewEntity.viewFiled,
+        upIdFiled: res.attribute.mdmModuleViewEntity.upIdFiled,
+      }
+
+    },
+    async initSelect() {
+      const res = await getApiModuleApi({
+        tl: "mdmService",
+        as: "mdmService",
+        dj: "queryMdmModuleServerMainFiled"
+      }, {
+        mdmId: this.$route.query.id
+      })
+      console.log(res, 'select')
+      if (res.status === '200') {
+        this.formRow[0].elCol[1].options = []
+        this.formRow[0].elCol[0].options = []
+        res.attribute.forEach(item => {
+          this.formRow[0].elCol[1].options.push({
+            label: item.chName,
+            id: item.enName,
+          })
+          this.formRow[0].elCol[0].options.push({
+            label: item.chName,
+            id: item.enName,
+          })
+        })
+      }
+    },
+    async saveHandle() {
+      if (this.displayType === '1') {
+        this.$refs.optionForm.submitForm()
+      } else {
+        this.saveLoading = true
+        let params = {
+          id: this.$route.query.id,
+          mdmModuleViewEntity: {
+            id: this.id,
+            viewName: this.displayType
+          },
+          addFiled: this.dbAddFiled,
+          editFiled: this.dbEditFiled,
+          showFiled: this.dbShowFiled,
+          queryFiled: this.dbQueryFiled,
+          listFiled: this.dbListFiled,
+        }
+        const res = await getApiModuleApi({
+          tl: "mdmService",
+          as: "mdmService",
+          dj: "doSaveMdmModuleView",
+        }, params)
+        if (res.status === '200') {
+          this.$vmNews("保存成功！", "success")
+          this.init()
+          this.$store.dispatch("GenerateRoutes")
+        }
+        this.saveLoading = false
+      }
+
+    },
+    //验证通过
+    async onSubmit() {
+      if (this.ruleForm.viewFiled === this.ruleForm.upIdFiled) {
+        this.$vmNews("显示字段与上级id字段不能相同", "warning")
+        return
+      }
+      this.saveLoading = true
+      let params = {
+        id: this.$route.query.id,
+        mdmModuleViewEntity: {
+          id: this.id,
+          viewName: this.displayType,
+          ...this.ruleForm
+        },
+        addFiled: this.dbAddFiled,
+        editFiled: this.dbEditFiled,
+        showFiled: this.dbShowFiled,
+        queryFiled: this.dbQueryFiled,
+        listFiled: this.dbListFiled,
+      }
+      const res = await getApiModuleApi({
+        tl: "mdmService",
+        as: "mdmService",
+        dj: "doSaveMdmModuleView",
+      }, params)
+      if (res.status === '200') {
+        this.$vmNews("保存成功！", "success")
+        this.$store.dispatch("GenerateRoutes")
+        this.init()
+      }
+      this.saveLoading = false
+    },
+    handleSelect(key, keyPath) {
+      this.activeIndex = key
+      this.rightActived = []
+      let tempObj = {
+        1: ['queryFiled', 'dbQueryFiled'],
+        2: ['listFiled', 'dbListFiled'],
+        3: ['addFiled', 'dbAddFiled'],
+        4: ['editFiled', 'dbEditFiled'],
+        5: ['showFiled', 'dbShowFiled']
+      }
+      this.data = this[tempObj[key][0]]
+      this.contentFormArr = []
+      this[tempObj[key][1]].forEach(item => {
+        this.contentFormArr.push(item.id)
+      })
+    },
+    handleChange(value, direction, movedKeys) {
+      let tempObj = {
+        1: ['queryFiled', 'dbQueryFiled'],
+        2: ['listFiled', 'dbListFiled'],
+        3: ['addFiled', 'dbAddFiled'],
+        4: ['editFiled', 'dbEditFiled'],
+        5: ['showFiled', 'dbShowFiled']
+      }
+      this.disposeDataArr(value)
+      this.rightActived = []
+    },
+    initDispose(arr1, arr2) {
+      arr2.forEach(item => {
+        arr1.some(ele => {
+          if (item.viewFiled === ele.id) {
+            item.id = ele.id
+            item.name = ele.name
+            return true
+          }
+          return false
+        })
+      })
+    },
+    rightCheckChange(arr) {
+      this.rightActived = arr
+    },
+    // 向上方法
+    upHanlde() {
+      const index = this.contentFormArr.findIndex(ele => {
+        return this.rightActived[0] === ele
+      })
+      if (index === 0) {
+        this.$vmNews("排序为1时无法向上")
+        return
+      }
+      const tempDele = this.contentFormArr.splice(index, 1)
+      this.contentFormArr.splice(index - 1, 0, tempDele[0])
+      this.disposeDataArr(this.contentFormArr)
+    },
+    // 向下方法
+    downHanlde() {
+      const index = this.contentFormArr.findIndex(ele => {
+        return this.rightActived[0] === ele
+      })
+      if (index === this.contentFormArr.length - 1) {
+        this.$vmNews("末尾排序无法向下排序")
+        return
+      }
+      const tempDele = this.contentFormArr.splice(index, 1)
+      this.contentFormArr.splice(index + 1, 0, tempDele[0])
+      this.disposeDataArr(this.contentFormArr)
+    },
+    disposeDataArr(arr) {
+      let tempObj = {
+        1: ['queryFiled', 'dbQueryFiled'],
+        2: ['listFiled', 'dbListFiled'],
+        3: ['addFiled', 'dbAddFiled'],
+        4: ['editFiled', 'dbEditFiled'],
+        5: ['showFiled', 'dbShowFiled']
+      }
+      this[tempObj[this.activeIndex][1]] = []
+      arr.forEach((idNum, index) => {
+        this.data.some(item => {
+          if (item.id === idNum) {
+            this[tempObj[this.activeIndex][1]].push({...item, sort: index})
+            return true
+          } else {
+            return false
+          }
+        })
+      })
+    }
+  },
+  components: {
+    baseNewForm
+  },
+  created() {
+    this.init()
+    this.initSelect()
+    this.$emit("flashActive", 2)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-menu-item {
+  padding: 0 35px;
+}
+
+::v-deep .el-transfer-panel {
+  width: 25vw;
+  height: 60vh;
+}
+
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-transfer-panel__list {
+  height: 50vh;
+}
+::v-deep .el-transfer-panel__body {
+  height: 50vh;
+}
+
+.displayInfo {
+  background-color: #fbfbfb;
+  width: 100%;
+  position: relative;
+
+  > .btn {
+    display: flex;
+    justify-content: flex-end;
+
+    > .chunk {
+      margin-left: 10px;
+    }
+  }
+
+  > .main {
+    background-color: #fff;
+    border-right: 8px;
+    height: 85vh;
+    overflow: auto;
+    margin-top: 10px;
+    padding: 0px 15px;
+
+    > .title {
+      font-weight: 600;
+      margin: 15px 0;
+    }
+
+    > .radio {
+      margin: 15px 20px;
+    }
+
+    > .tabIndex {
+      margin-top: 10px;
+    }
+
+    > .content {
+      margin-top: 30px;
+      display: flex;
+      align-items: center;
+
+      .buttonList {
+        margin-left: 50px;
+
+        .downBtn {
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+
+}
+</style>
diff --git a/src/views/DataCenterOptions/displayInfo/settingChunk.vue b/src/views/DataCenterOptions/displayInfo/settingChunk.vue
new file mode 100644
index 0000000..bc41bb3
--- /dev/null
+++ b/src/views/DataCenterOptions/displayInfo/settingChunk.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="settingChunk">
+    <div class="leftAll">
+      <div class="search">
+        <el-input
+            placeholder="搜索"
+            prefix-icon="el-icon-search"
+            v-model="searchValue"
+        >
+        </el-input>
+      </div>
+      <div class="checkBoxList">
+        <!--        字段-->
+        <template v-if="showFiledFlag">
+          <el-checkbox-group v-model="pickList" @change="checkBoxChangeHandle">
+            <template v-for="(item,index) in allBtnList">
+              <div class="checkBoxItem" :key="item.id" v-if="item.name.includes(searchValue)">
+                <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
+              </div>
+            </template>
+          </el-checkbox-group>
+        </template>
+        <!--        按钮类型-->
+        <template v-else>
+          <el-checkbox-group v-model="pickList" @change="changeBtnBoxHandle">
+            <template v-for="(item,index) in allFiledList">
+              <div class="checkBoxItem" :key="item.buttonType" v-if="item.buttonName.includes(searchValue)">
+                <el-checkbox :label="item.buttonType">{{ item.buttonName }}</el-checkbox>
+              </div>
+            </template>
+          </el-checkbox-group>
+        </template>
+      </div>
+    </div>
+    <div class="rightAdd">
+      <div class="pickTitle">已选择（{{ pickShowList.length }}）</div>
+      <div class="showCheckBoxList">
+        <draggable v-model="pickShowList">
+          <template v-if="showFiledFlag">
+            <div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.viewFiled">
+              <div class="name">{{ item.name }}</div>
+              <div class="btn" @click="deleShowList(item,index)">x</div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.buttonType">
+              <div class="name">{{ item.buttonName }}</div>
+              <div class="btn" @click="deleBtnShowList(item,index)">x</div>
+            </div>
+          </template>
+        </draggable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  name: 'settingChunk',
+  data() {
+    return {
+      searchValue: '',//搜索值
+      allBtnList: [],//所有选项
+      allFiledList: [
+        {
+          buttonName: '新建',
+          buttonValue: 'new',
+          buttonType: '1'
+        }, {
+          buttonName: '重置',
+          buttonValue: 'resize',
+          buttonType: '2'
+        }, {
+          buttonName: '查询',
+          buttonValue: 'search',
+          buttonType: '3'
+        }, {
+          buttonName: '修改',
+          buttonValue: 'edit',
+          buttonType: '4'
+        }, {
+          buttonName: '删除',
+          buttonValue: 'dele',
+          buttonType: '5'
+        }, {
+          buttonName: '查看',
+          buttonValue: 'view',
+          buttonType: '6'
+        }, {
+          buttonName: '下发',
+          buttonValue: 'send',
+          buttonType: '7'
+        }
+      ],//所有按钮
+      //key字段【'待选字段'，‘选中字段’，viewType】
+      dist: {
+        '查询': ['queryFiled', 'dbQueryFiled', 1],
+        '列表': ['listFiled', 'dbListFiled', 2],
+        '新增': ['addFiled', 'dbAddFiled', 3],
+        '修改': ['editFiled', 'dbEditFiled', 4],
+        '查看': ['showFiled', 'dbShowFiled', 5]
+      },
+      pickDist: {},//多选框字典
+      pickList: [],//用于绑定选中的多选框
+      pickShowList: [],//用于展示选中的多选框
+      thisKey: '',//当前key
+      showFiledFlag: true//判断当前是字段还是按钮
+    }
+  },
+  methods: {
+    //显示字段获取
+    async getAllBtn(key) {
+      this.showFiledFlag = true
+      this.thisKey = key
+      //重置数据
+      this.pickShowList = []
+      this.pickList = []
+      this.searchValue = ''
+      this.allBtnList = []
+      this.pickDist = {}
+
+      //有就走字段逻辑 没有则走按钮逻辑
+      if (this.dist[key]) {
+        const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
+          id: this.$route.query.id
+        })
+        let tempArr = this.dist[key]
+        res.attribute[tempArr[0]].forEach(item => {
+          this.$set(this.pickDist, item.id, item.name)
+        })
+        this.allBtnList = res.attribute[tempArr[0]]
+        res.attribute[tempArr[1]].forEach(item => {
+          this.pickList.push(item.viewFiled)
+          this.checkBoxChangeHandle()
+        })
+      } else {
+        this.showFiledFlag = false
+        const res = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
+          mdmId: this.$route.query.id
+        })
+        res.attribute.forEach(item => {
+          this.pickList.push(item.buttonType)
+        })
+        this.changeBtnBoxHandle()
+
+      }
+    },
+    //当多选框改变时
+    checkBoxChangeHandle() {
+      let tempList = []
+      this.pickShowList = []
+      //这边需要将选中的list通过dist变成一个可用的结构
+      this.pickList.forEach(item => {
+        this.pickShowList.push({
+          name: this.pickDist[item],
+          viewFiled: item
+        })
+      })
+    },
+    //当按钮多选改变时
+    changeBtnBoxHandle() {
+      this.pickShowList = []
+      this.pickList.forEach(item => {
+        let obj = this.allFiledList[item - 1]
+        this.pickShowList.push(obj)
+      })
+    },
+    //选择栏目删除按钮
+    deleShowList(item, index) {
+      this.pickShowList.splice(index, 1)
+      //这里是为了让右边选中box同步修改
+      let tempArr = []
+      this.pickShowList.forEach((item) => {
+        tempArr.push(item.viewFiled)
+      })
+      this.pickList = tempArr
+    },
+    //删除按钮
+    deleBtnShowList(item, index) {
+      this.pickShowList.splice(index, 1)
+      let tempArr = []
+      this.pickShowList.forEach((item) => {
+        tempArr.push(item.buttonType)
+      })
+      this.pickList = tempArr
+    },
+    //保存方法
+    async saveHandle() {
+      //首先需要判断是字段设置还是按钮
+      if (this.showFiledFlag) {
+        //字段
+        let keyArr = this.dist[this.thisKey]
+        let params = {
+          mdmId: this.$route.query.id,
+          viewType: keyArr[2]
+        }
+        params[keyArr[1]] = this.pickShowList
+        this.openLoading("submit")
+        const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewField', '', params)
+        this.$vmNews('保存成功！', 'success')
+        this.$emit('saveSuccessEmit')
+      } else {
+        //按钮
+        let params = {
+          mdmId: this.$route.query.id,
+          dbButtonFiled: this.pickShowList
+        }
+        this.openLoading("submit")
+        const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewButton', '', params)
+        this.$vmNews('保存成功！', 'success')
+        this.$emit('saveSuccessEmit')
+      }
+
+    }
+  },
+  mounted() {
+  },
+  components: {
+    draggable
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.settingChunk {
+  display: flex;
+  height: 80vh;
+
+  .leftAll {
+    flex: 1;
+    padding: 0 20px;
+    border-right: 1px solid #EBEBEB;
+
+    .search {
+      width: 100%;
+    }
+
+    .checkBoxList {
+      height: 70vh;
+      overflow: auto;
+    }
+
+    .checkBoxItem {
+      margin: 20px 0 16px;
+    }
+  }
+
+  .rightAdd {
+    flex: 1;
+    padding: 0 20px;
+
+    .pickTitle {
+
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
+    }
+
+    .showCheckBoxList {
+      height: 70vh;
+      overflow: auto;
+    }
+
+    .showCheckBoxItem {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 10px 0 10px;
+      padding: 15px 10px;
+      background: #F8F8F8;
+      border-radius: 4px;
+      cursor: move; /* 将指针换成拖动样式 */
+      user-select: none; /* 禁止选择文字 */
+      .btn {
+        color: grey;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/distribute/baseLink/index.vue b/src/views/DataCenterOptions/distribute/baseLink/index.vue
new file mode 100644
index 0000000..0498095
--- /dev/null
+++ b/src/views/DataCenterOptions/distribute/baseLink/index.vue
@@ -0,0 +1,614 @@
+<template>
+  <div class="linkk" ref="link" :style="style">
+    <div class="left">
+      <div class="title">
+        <h1>执行动作入参数</h1>
+      </div>
+      <template v-for="(item, index) in leftData">
+        <div
+          class="treebox"
+          @mouseenter="leftMouseenterHandle(item)"
+          @mouseleave="leftMouseleaveHandle(item)"
+        >
+          <div class="tree" :key="index">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: gray; padding-left: 10px">{{
+              item.type
+            }}</span>
+          </div>
+          <div class="btn">
+            <el-checkbox
+              :fill="item.stroke ? item.stroke : '#000000'"
+              v-model="item.value"
+              :disabled="!!lookFlag"
+              @change="
+                (val, $event) =>
+                  leftCheckBoxHandle(val, item, $event, [item.id], item.label)
+              "
+            ></el-checkbox>
+          </div>
+        </div>
+        <template v-if="item.children">
+          <template v-for="(item01, index01) in item.children">
+            <div
+              class="treebox"
+              @mouseenter="leftMouseenterHandle(item01)"
+              @mouseleave="leftMouseleaveHandle(item01)"
+            >
+              <div class="tree" style="margin-left: 15px">
+                <span>{{ item01.label }}</span>
+                <span
+                  style="font-size: 12px; color: gray; padding-left: 10px"
+                  >{{ item01.type }}</span
+                >
+              </div>
+              <div class="btn">
+                <el-checkbox
+                  v-model="item01.value"
+                  :disabled="!!lookFlag"
+                  @change="
+                    (val, $event) =>
+                      leftCheckBoxHandle(
+                        val,
+                        item01,
+                        $event,
+                        [item.id, item01.id],
+                        item.label + '.' + item01.label
+                      )
+                  "
+                ></el-checkbox>
+              </div>
+            </div>
+            <template v-if="item01.children">
+              <template v-for="(item02, index02) in item01.children">
+                <div
+                  class="treebox"
+                  @mouseenter="leftMouseenterHandle(item02)"
+                  @mouseleave="leftMouseleaveHandle(item02)"
+                >
+                  <div class="tree" style="margin-left: 30px">
+                    <span>{{ item02.label }}</span>
+                    <span
+                      style="font-size: 12px; color: gray; padding-left: 10px"
+                      >{{ item02.type }}</span
+                    >
+                  </div>
+                  <div class="btn">
+                    <el-checkbox
+                      v-model="item02.value"
+                      :disabled="!!lookFlag"
+                      @change="
+                        (val, $event) =>
+                          leftCheckBoxHandle(
+                            val,
+                            item02,
+                            $event,
+                            [item.id, item01.id, item02.id],
+                            item.label + '.' + item01.label + '.' + item02.label
+                          )
+                      "
+                    ></el-checkbox>
+                  </div>
+                </div>
+                <template v-if="item02.children">
+                  <template v-for="(item03, index03) in item02.children">
+                    <div
+                      class="treebox"
+                      @mouseenter="leftMouseenterHandle(item03)"
+                      @mouseleave="leftMouseleaveHandle(item03)"
+                    >
+                      <div class="tree" style="margin-left: 45px">
+                        <span>{{ item03.label }}</span>
+                        <span
+                          style="
+                            font-size: 12px;
+                            color: gray;
+                            padding-left: 10px;
+                          "
+                          >{{ item03.type }}</span
+                        >
+                      </div>
+                      <div class="btn">
+                        <el-checkbox
+                          v-model="item03.value"
+                          :disabled="!!lookFlag"
+                          @change="
+                            (val, $event) =>
+                              leftCheckBoxHandle(
+                                val,
+                                item03,
+                                $event,
+                                [item.id, item01.id, item02.id, item03.id],
+                                item.label +
+                                  '.' +
+                                  item01.label +
+                                  '.' +
+                                  item02.label +
+                                  '.' +
+                                  item03.label
+                              )
+                          "
+                        ></el-checkbox>
+                      </div>
+                    </div>
+                  </template>
+                </template>
+              </template>
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+    <div class="svg">
+      <svg
+        ref="svg"
+        class="line"
+        xmlns="http://www.w3.org/2000/svg"
+        :style="{ height: svgHeight }"
+        style="position: absolute; z-index: 2"
+        version="1.1"
+      >
+        <line
+          v-for="item in line"
+          :key="item.leftid"
+          :x1="item.x1"
+          :y1="item.y1"
+          :x2="item.x2"
+          :y2="item.y2"
+          :style="{
+            position: 'absolute',
+            stroke: item.stroke,
+            strokeWidth: item.width,
+            zIndex: item.z,
+          }"
+        />
+
+        <!-- <path
+          v-for="item in line"
+          :key="item.leftid"
+          :d="`M ${item.x1},${item.y2} C${item.centerX},${item.y1} ${item.centerX},${item.y2} ${item.x2},${item.y2}`"
+          style="stroke: #660000; fill: none"
+        /> -->
+      </svg>
+    </div>
+    <div class="right">
+      <div class="title">
+        <h1>API入参</h1>
+      </div>
+      <template v-for="(item, index) in rightData">
+        <div
+          class="treebox"
+          @mouseenter="rightMouseenterHandle(item)"
+          @mouseleave="rightMouseleaveHandle(item)"
+        >
+          <div class="btn">
+            <el-checkbox
+              :disabled="!!lookFlag"
+              size="mini"
+              v-model="item.value"
+              @change="
+                (val, $event) =>
+                  rightCheckBoxHandle(val, item, $event, [item.id], item.label)
+              "
+            ></el-checkbox>
+          </div>
+          <div class="tree" :key="index">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: gray; padding-left: 10px">{{
+              item.type
+            }}</span>
+          </div>
+        </div>
+        <template v-if="item.children">
+          <template v-for="(item01, index01) in item.children">
+            <div
+              class="treebox"
+              @mouseenter="rightMouseenterHandle(item01)"
+              @mouseleave="rightMouseleaveHandle(item01)"
+            >
+              <div class="btn">
+                <el-checkbox
+                  :disabled="!!lookFlag"
+                  v-model="item01.value"
+                  @change="
+                    (val, $event) =>
+                      rightCheckBoxHandle(
+                        val,
+                        item01,
+                        $event,
+                        [item.id, item01.id],
+                        item.label + '.' + item01.label
+                      )
+                  "
+                ></el-checkbox>
+              </div>
+              <div class="tree" style="margin-left: 15px">
+                <span>{{ item01.label }}</span>
+                <span
+                  style="font-size: 12px; color: gray; padding-left: 10px"
+                  >{{ item01.type }}</span
+                >
+              </div>
+            </div>
+            <template v-if="item01.children">
+              <template v-for="(item02, index02) in item01.children">
+                <div
+                  class="treebox"
+                  @mouseenter="rightMouseenterHandle(item02)"
+                  @mouseleave="rightMouseleaveHandle(item02)"
+                >
+                  <div class="btn">
+                    <el-checkbox
+                      :disabled="!!lookFlag"
+                      v-model="item02.value"
+                      @change="
+                        (val, $event) =>
+                          rightCheckBoxHandle(
+                            val,
+                            item02,
+                            $event,
+                            [item.id, item01.id, item02.id],
+                            item.label + '.' + item01.label + '.' + item02.label
+                          )
+                      "
+                    ></el-checkbox>
+                  </div>
+                  <div class="tree" style="margin-left: 30px">
+                    <span>{{ item02.label }}</span>
+                    <span
+                      style="font-size: 12px; color: gray; padding-left: 10px"
+                      >{{ item02.type }}</span
+                    >
+                  </div>
+                </div>
+                <template v-if="item01.children">
+                  <template v-for="(item03, index03) in item02.children">
+                    <div
+                      class="treebox"
+                      @mouseenter="rightMouseenterHandle(item03)"
+                      @mouseleave="rightMouseleaveHandle(item03)"
+                    >
+                      <div class="btn">
+                        <el-checkbox
+                          :disabled="!!lookFlag"
+                          v-model="item03.value"
+                          @change="
+                            (val, $event) =>
+                              rightCheckBoxHandle(
+                                val,
+                                item03,
+                                $event,
+                                [item.id, item01.id, item02.id, item03.id],
+                                item.label +
+                                  '.' +
+                                  item01.label +
+                                  '.' +
+                                  item02.label +
+                                  '.' +
+                                  item03.label
+                              )
+                          "
+                        ></el-checkbox>
+                      </div>
+                      <div class="tree" style="margin-left: 30px">
+                        <span>{{ item03.label }}</span>
+                        <span
+                          style="
+                            font-size: 12px;
+                            color: gray;
+                            padding-left: 10px;
+                          "
+                          >{{ item03.type }}</span
+                        >
+                      </div>
+                    </div>
+                  </template>
+                </template>
+              </template>
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    lookFlag: {
+      type: [Boolean, String],
+      default: false,
+    },
+    lineData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    leftData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    rightData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      style: {
+        "--clickBoxColor": "pink",
+      },
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      leftActive: {},
+      rightActive: {},
+      line: [],
+      leftActiveItem: {},
+      rightActiveItem: {},
+      svgHeight: 0,
+    };
+  },
+  methods: {
+    leftMouseenterHandle(item) {
+      if (item.isline) {
+        let temp = this.line.find((ele) => {
+          return ele.leftid == item.id;
+        });
+        if (temp) {
+          temp.stroke = "red";
+          temp.width = 2;
+          temp.z = 9;
+        }
+      }
+    },
+    leftMouseleaveHandle(item) {
+      if (item.isline) {
+        let temp = this.line.find((ele) => {
+          return ele.leftid == item.id;
+        });
+        if (temp) {
+          temp.stroke = "#409EFF";
+          temp.width = 1;
+          temp.z = 4;
+        }
+      }
+    },
+    rightMouseenterHandle(item) {
+      if (item.isline) {
+        let temp = this.line.find((ele) => {
+          return ele.rightid == item.id;
+        });
+        if (temp) {
+          temp.stroke = "red";
+          temp.width = 2;
+          temp.z = 9;
+        }
+      }
+    },
+    rightMouseleaveHandle(item) {
+      if (item.isline) {
+        let temp = this.line.find((ele) => {
+          return ele.rightid == item.id;
+        });
+        if (temp) {
+          temp.stroke = "#409EFF";
+          temp.width = 1;
+          temp.z = 4;
+        }
+      }
+    },
+    leftCheckBoxHandle(val, item, e, arrId, name) {
+      if (val) {
+        let svginfo = this.$refs.svg.getBoundingClientRect();
+        let info = e.target.getBoundingClientRect();
+        this.leftActiveItem = item;
+        this.leftActive["leftidarr"] = arrId;
+        this.leftActive["leftid"] = item.id;
+        this.leftActive["leftTitle"] = name;
+        this.leftActive["x1"] = svginfo.x - info.x - 5;
+        this.leftActive["y1"] = info.y - svginfo.y + 10;
+        if (this.leftActive.leftid && this.rightActive.rightid) {
+          let obj = {
+            stroke: "#409EFF",
+            width: 1,
+            z: 4,
+          };
+          this.line.push({ ...this.leftActive, ...this.rightActive, ...obj });
+          this.$set(this.leftActiveItem, "isline", true);
+          this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
+          this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
+          this.$set(this.rightActiveItem, "isline", true);
+          this.leftActive = {};
+          this.rightActive = {};
+        }
+        this.deepSearchBox(this.leftData, item.id);
+      } else {
+        if (item.isline) {
+          this.line = this.line.filter((ele) => {
+            return ele.leftid != item.id;
+          });
+          this.cloaseBox(this.rightData, item.rightid);
+          item.isline = false;
+        } else {
+          this.leftActive = {};
+          this.leftActiveItem = {};
+        }
+      }
+    },
+    rightCheckBoxHandle(val, item, e, arrId, name) {
+      if (val) {
+        let svginfo = this.$refs.svg.getBoundingClientRect();
+        let info = e.target.getBoundingClientRect();
+        this.rightActiveItem = item;
+        this.rightActive["rightidarr"] = arrId;
+        this.rightActive["rightid"] = item.id;
+        this.rightActive["rightTitle"] = name;
+        this.rightActive["x2"] = info.x - svginfo.x - 30;
+        this.rightActive["y2"] = info.y - svginfo.y + 10;
+        if (this.leftActive.leftid && this.rightActive.rightid) {
+          let obj = {
+            stroke: "#409EFF",
+            width: 1,
+            z: 4,
+          };
+          this.line.push({ ...this.leftActive, ...this.rightActive, ...obj });
+          this.$set(this.leftActiveItem, "isline", true);
+          this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
+          this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
+          this.$set(this.rightActiveItem, "isline", true);
+          item["isline"] = true;
+          this.leftActive = {};
+          this.rightActive = {};
+        }
+        this.deepSearchBox(this.rightData, item.id);
+      } else {
+        if (item.isline) {
+          this.line = this.line.filter((ele) => {
+            return ele.rightid != item.id;
+          });
+          this.cloaseBox(this.leftData, item.leftid);
+          item.isline = false;
+        } else {
+          this.rightActive = {};
+          this.rightActiveItem = {};
+        }
+      }
+    },
+    deepSearchBox(arr, id) {
+      arr.forEach((item) => {
+        if (item.id != id && item.value && !item.isline) {
+          item.value = false;
+        }
+        if (item.children && item.children.length) {
+          this.deepSearchBox(item.children, id);
+        }
+      });
+    },
+    cloaseBox(arr, id) {
+      arr.some((item) => {
+        if (item.id == id) {
+          item.value = false;
+          item.isline = false;
+          return true;
+        } else if (item.children && item.children.length) {
+          this.cloaseBox(item.children, id);
+        }
+      });
+    },
+    handleNodeClick(data) {},
+    resizeHeight() {
+      console.log(this.$refs.link.getBoundingClientRect())
+      this.svgHeight = this.$refs.link.getBoundingClientRect().height + "px";
+    },
+    cleanActive(str) {
+      if (str == "left") {
+        this.leftActive = {};
+        this.leftActiveItem = {};
+      } else {
+        this.rightActive = {};
+        this.rightActiveItem = {};
+      }
+      this.line = [];
+    },
+    acivteData(flag, obj) {
+      if (flag == "left") {
+        this.leftActive = obj;
+        this.leftActive["leftid"] = obj.id;
+      } else {
+        this.rightActive = obj;
+        this.leftActive["rightid"] = obj.id;
+      }
+    },
+  },
+  mounted() {
+    this.svgHeight = this.$refs.link.getBoundingClientRect().height + "px";
+  },
+  watch: {
+    line: {
+      deep: true,
+      handler: function (newV, oldV) {
+        this.$emit("linechange", newV);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-checkbox__inner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50% !important;
+  text-align: center;
+  line-height: 20px;
+}
+::v-deep .el-checkbox__inner::after {
+  border: none !important;
+}
+.linkk {
+  border-top: 1px solid #ccc;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  overflow: hidden;
+  position: relative;
+  .left {
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    padding: 0 0 20px 20px;
+    width: 300px;
+    .title {
+      border-bottom: 1px solid #ccc;
+      padding: 20px;
+    }
+    .treebox {
+      margin-top: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .btn {
+      }
+    }
+  }
+  .right {
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    padding: 0 20px 20px 0;
+    width: 300px;
+    .title {
+      display: flex;
+      justify-content: flex-end;
+      border-bottom: 1px solid #ccc;
+      padding: 20px;
+    }
+    .treebox {
+      align-items: center;
+      margin-top: 25px;
+      display: flex;
+      .btn {
+        margin-right: 60px;
+      }
+    }
+  }
+  .svg {
+    width: 400px;
+  }
+  svg {
+    background-color: #f5f5f6;
+    width: 400px;
+    min-height: 300px;
+  }
+  line {
+    transition: all 0.1s;
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/distribute/baseNewSelect.vue b/src/views/DataCenterOptions/distribute/baseNewSelect.vue
new file mode 100644
index 0000000..cef9fb9
--- /dev/null
+++ b/src/views/DataCenterOptions/distribute/baseNewSelect.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <template v-if="!lookflag">
+      <el-select
+        v-loading="selLoading"
+        class="w-100"
+        v-model="selectValue"
+        :placeholder="placeholder"
+        :clearable="false"
+        style="width: 240px"
+        size="mini"
+        refs="mySelect"
+        :reserve-keyword="true"
+        :disabled="disabled"
+        filterable
+        popper-class="sele"
+        :filter-method="filter"
+        @change="fun"
+        @focus="funx"
+        @blur="funb"
+        @visible-change="hidden"
+        clearable
+      >
+        <el-option
+          v-for="item in options"
+          :key="item[itemObj.value]"
+          :label="item[itemObj.label]"
+          remote
+          :value="item[itemObj.value]"
+          placeholder="请输入"
+        >
+        </el-option>
+
+        <div style="bottom: -10px">
+          <el-pagination
+            v-if="pageModel.total > pageModel.limit"
+            small
+            @current-change="handleCurrentChange"
+            :current-page="pageModel.pageIndex"
+            :page-size="pageModel.limit"
+            layout="prev, pager,next,total"
+            :total="pageModel.total"
+          >
+          </el-pagination>
+        </div>
+      </el-select>
+    </template>
+    <template v-else
+    >
+      <div v-loading="selLoading">{{ showValue }}</div>
+    </template
+    >
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+::v-deep .el-input--mini .el-input__inner {
+  height: 38px;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.drop > > > .el-input__inner {
+  background: #5183ff !important;
+  color: white;
+  border: none;
+  height: 26px;
+  padding: 10px 22px 10px 10px;
+  text-align: center;
+}
+
+.drop {
+  width: 250px;
+}
+
+.drop > > > .el-select .el-input .el-select__caret {
+  display: none;
+}
+</style>
+
+<el-select
+  v-loading="selLoading"
+  class="w-100"
+  v-model="selectValue"
+  :placeholder="placeholder"
+  :clearable="false"
+  style="width: 240px"
+  size="mini"
+  refs="mySelect"
+  :reserve-keyword="true"
+  :disabled="disabled"
+  filterable
+  popper-class="sele"
+  :filter-method="filter"
+  @change="fun"
+  @focus="funx"
+  @blur="funb"
+  @visible-change="hidden"
+>
+<el-option
+  v-for="item in options"
+  :key="item.id"
+  :label="item.label"
+  remote
+  :value="item.id"
+  placeholder="请输入"
+>
+</el-option>
+
+<div style="bottom: -10px">
+  <el-pagination
+    v-if="pageTotal > pageSize"
+    small
+    @current-change="handleCurrentChange"
+    :current-page="currentpage"
+    :page-size="pageSize"
+    layout="prev, pager,next,total"
+    :total="pageTotal"
+  >
+  </el-pagination>
+</div>
+</el-select>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";
+import panelGroup from "@/views/dashboard/PanelGroup.vue";
+
+export default {
+  props: {
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: String,
+    value: {
+      type: String,
+    },
+    appId: {
+      type: String,
+      default: ""
+    },
+    itemObj: {
+      type: Object,
+      default: () => {
+        return {
+          label: "label",
+          value: "value"
+        };
+      },
+    },
+    lookflag: {
+      type: Boolean,
+      default: false,
+    },
+    flag: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      options: [], //当前页码的数据
+      pageModel: {
+        total: 0,
+        pageIndex: 1,
+        limit: 10,
+      },
+      selLoading: false,
+      showValue: "",
+      lookLoading: false,
+    };
+  },
+  computed: {
+    selectValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  created() {
+    // if (Object.keys(this.ruleForm).length && this.ruleForm[this.itemObj.id]) {
+    //   this.getSelectdata(this.ruleForm[this.itemObj.id]);
+    // }
+  },
+  methods: {
+    // 请求select信息（分页）
+    async getUserModuleHandle(obj = {}) {
+      if (this.flag) {
+        if (this.appId) {
+          this.selLoading = true;
+          const res = await getUserModuleApi({
+            tl: "sysApplicationService",
+            as: "application",
+            dj: "queryAppApi"
+          }, {
+            pageNum: this.pageModel.pageIndex,
+            pageSize: this.pageModel.limit,
+            appId: this.appId,
+            ...obj
+          })
+          console.log(res)
+          if (res.status === '200') {
+            this.selLoading = false;
+            this.pageModel.total = res.attribute.total;
+            this.options = res.attribute.list;
+          }
+        }
+      } else {
+        this.selLoading = true;
+        const res = await getUserModuleApi(
+          {
+            tl: "sysApplicationService",
+            as: "application",
+            dj: "queryApp",
+          },
+          {
+            pageNum: this.pageModel.pageIndex,
+            pageSize: this.pageModel.limit,
+            ...obj,
+          }
+        );
+        if (res.status == 200) {
+          console.log(res)
+          this.pageModel.total = res.attribute.total;
+          this.selLoading = false;
+          this.options = res.attribute.list;
+        }
+      }
+    },
+    // 根据selectid找到value
+    async getSelectdata(id) {
+      if (this.flag) {
+        this.selLoading = true;
+        const res = await getUserModuleApi({
+          tl: "sysApplicationService",
+          as: "application",
+          dj: "debugAppApi",
+        }, {
+          id: this.value,
+          appId: this.appId,
+        })
+        console.log(res, 'api查询')
+        this.options = []
+        this.options.push({...res.attribute.api})
+        this.selLoading = false;
+      } else {
+        this.selLoading = true;
+        const res = await getUserModuleApi({
+          tl: "sysApplicationService",
+          as: "application",
+          dj: "getApp",
+        }, {
+          id: id
+        })
+        this.selLoading = false;
+        console.log(res, '应用查询')
+        this.options = []
+        this.options.push({
+          ...res.attribute
+        })
+      }
+    },
+    // 页码改变事件
+    handleCurrentChange(val) {
+      this.pageModel.pageIndex = val;
+      this.getUserModuleHandle();
+    },
+    // select选中更改事件
+    fun(val) {
+      this.$emit("seleChange", this.value);
+    },
+    // 获得焦点
+    funx() {
+      this.getUserModuleHandle();
+    },
+    // 失去焦点
+    funb() {
+    },
+    hidden() {
+    },
+    //搜索方法,将符合的数据存入options中，并分页展示
+    filter: debounce(function (val) {
+      //   this.pageModel.pageIndex = 1;
+      //   this.getUserModuleApi({ lableValue: val });
+      // }, 300),
+    })
+  },
+  //监听来自父组件的数据，当数据更新时，重置展示
+  watch: {
+    value: {
+      immediate: true,
+      handler(NewV, oldV) {
+        if (this.flag) {
+          if (!NewV) {
+            this.options = []
+          }
+        }
+        if (NewV && this.options.length === 0) {
+          console.log(1)
+          this.getSelectdata(this.value)
+        }
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/DataCenterOptions/distribute/images/删除.png b/src/views/DataCenterOptions/distribute/images/删除.png
new file mode 100644
index 0000000..c74a004
Binary files /dev/null and b/src/views/DataCenterOptions/distribute/images/删除.png differ
diff --git a/src/views/DataCenterOptions/distribute/images/设置.png b/src/views/DataCenterOptions/distribute/images/设置.png
new file mode 100644
index 0000000..fa32cf3
Binary files /dev/null and b/src/views/DataCenterOptions/distribute/images/设置.png differ
diff --git a/src/views/DataCenterOptions/distribute/index.vue b/src/views/DataCenterOptions/distribute/index.vue
new file mode 100644
index 0000000..1a176dc
--- /dev/null
+++ b/src/views/DataCenterOptions/distribute/index.vue
@@ -0,0 +1,379 @@
+<template>
+  <div class="wrap">
+    <div class="main" v-loading="mainLoading">
+      <baseTable :tableData="tableData" :tabLoading="tabLoading"
+
+                 :tableColumn="tableColumn" :border="false"
+      >
+        <!--        触发类型-->
+        <template #enabledType="{row}">
+          {{ row.enabledType == 0 ? '手动' : '自动' }}
+        </template>
+        <!--        启用/停用-->
+        <template #enabledState="{row}">
+          <el-switch
+            :disabled="true"
+            v-model="row.enabledState"
+            active-value="1"
+            inactive-value="0"
+          >
+          </el-switch>
+        </template>
+        <!--        操作-->
+        <template #operation="{row}">
+          <div class="btnList">
+            <div class="settingBtn" @click="sonTableEditHandle(row)">
+              <img src="./images/设置.png" alt="">
+            </div>
+            <div class="deleBtn" @click="activedOnFunc(row)">
+              <img src="./images/删除.png" alt="">
+            </div>
+          </div>
+        </template>
+      </baseTable>
+      <div class="receiptsAddRow">
+        <el-link
+          type="primary"
+          @click="addRowHandle"
+          :underline="false"
+        >+ 添加
+        </el-link
+        >
+      </div>
+    </div>
+    <baseRightDialog ref="settingForm"
+                     :footerShow="true"
+                     :dialogVisible.sync="settingFormShow"
+                     title="分发设置"
+                     @handleClose="settingFormShow=false"
+                     :submitShow="true"
+                     :size="'50%'"
+                     @handleConfirmClick="sonTableSaveHandle"
+
+    >
+      <settingForm ref="settingForm" v-if="settingFormShow" @saveSuccessHandle="saveSuccessHandle"></settingForm>
+    </baseRightDialog>
+  </div>
+</template>
+
+<script>
+import settingForm from './settingForm.vue'
+import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
+import baseNewSelect from '@/views/applicationList/com/baseNewSelect.vue'
+import baseDialog from '@/views/integrationOption/compoments/baseDialog'
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
+import { getApiModuleApi } from '@/api/apiChunks'
+import { deepClone } from '@/utils/index.js'
+import { getUserModuleApi } from '@/api/integrationOption/integrationOption'
+import basePage from '@/views/intergrationTask/compoments/basePage.vue'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  data() {
+    return {
+      mainLoading: false,
+      saveLoading: false,
+      options: [],
+      // 角色字典
+      roleDist: {},
+      addSwitch: false,
+      tabLoading: false,
+      tableColumn: [
+        {
+          title: '应用列表',
+          id: 'appName'
+        },
+        {
+          title: '触发类型',
+          id: 'enabledType'
+        },
+        {
+          title: '新增接口',
+          id: 'addName'
+        },
+        {
+          title: '修改接口',
+          id: 'updateName'
+        },
+        {
+          title: '删除接口',
+          id: 'deleteName'
+        },
+        {
+          title: '数据权限',
+          id: 'permission',
+          tooltip: true
+        },
+        {
+          title: '启用/停用',
+          id: 'enabledState'
+        },
+        { title: '操作', id: 'operation' }
+      ],
+      tableData: [],
+      pageModel: {
+        pageIndex: 1,
+        total: 10,
+        limit: 10
+      },
+      addRole: '',
+      settingFormShow: false,
+      serviceOptions: []
+    }
+  },
+  methods: {
+    //保存/编辑成功
+    saveSuccessHandle() {
+      this.settingFormShow = false
+      this.getTableData()
+    },
+    //这里需要拿到应用下啦为后续找中文环节做准备
+    async initSelect() {
+      const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
+      console.log(res)
+      this.serviceOptions.options = []
+      res.attribute.forEach(item => {
+        this.serviceOptions.push({
+          id: item.id,
+          label: item.name
+        })
+      })
+      return true
+    },
+    //获取tableData
+    async getTableData() {
+      const res = await authApi('mdmModuleService', '', 'queryMdmDistribute', '', {
+        mdmId: this.$route.query.id
+      })
+      this.tableData = res.attribute
+      console.log(this.tableData, 'table')
+      //这边需要开始处理应用列表、新增修改删除接口找中文环节
+      //需要将数据权限拼起来
+      let compareTypeDist = {
+        '1': '=',
+        '2': '!=',
+        '3': '>',
+        '4': '<'
+      }
+      let connectionSymbolDist = {
+        '1': 'and',
+        '2': 'or'
+      }
+      this.tableData.forEach(async(item) => {
+        this.$set(item, 'permission', '')
+        //找中文名环节
+        let obj = this.serviceOptions.find(ele => {
+          console.log(ele.id, item.appId, '13')
+          return ele.id === item.appId
+        })
+        this.$set(item, 'appName', obj.label)
+        let labelDist = {}
+        const res2 = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
+          appId: item.appId
+        })
+        res2.attribute.forEach((item) => {
+          labelDist[item.id] = item.apiName
+        })
+        if (item.deleteApi) {
+          this.$set(item, 'deleteName', labelDist[item.deleteApi])
+        }
+        if (item.updateApi) {
+          this.$set(item, 'updateName', labelDist[item.updateApi])
+        }
+        if (item.addApi) {
+          this.$set(item, 'addName', labelDist[item.addApi])
+        }
+        //开始拼凑权限字段
+        item.mdmModuleDistributeDetailEntities.forEach(ele => {
+          console.log(ele, 'ele')
+          let leftBracket = ele.leftBracket ? ele.leftBracket : ''
+          let rightParenthesis = ele.rightParenthesis ? ele.rightParenthesis : ''
+          let compareType = compareTypeDist[ele.compareType]
+          let connectionSymbol = connectionSymbolDist[ele.connectionSymbol] ? connectionSymbolDist[ele.connectionSymbol] : ''
+          item.permission += leftBracket + ele.filedId + ' ' + compareType + ' ' + ele.filedVaule + rightParenthesis + ' ' + connectionSymbol + ' '
+        })
+      })
+
+    },
+    //保存
+    sonTableSaveHandle() {
+      this.$refs.settingForm.$refs.typeOptionForm.submitForm()
+    },
+    //设置
+    sonTableEditHandle(row) {
+      this.settingFormShow = true
+      this.$nextTick(() => {
+        this.$refs.settingForm.getrowDetails(row.id)
+      })
+    },
+    //删除
+    activedOnFunc(row) {
+      this.$confirm('确定删除？')
+        .then(async(_) => {
+          const res = await authApi('mdmModuleService', '', 'deleteMdmDistribute', '', {
+            id: row.id
+          })
+          this.$vmNews('删除成功', 'success')
+          this.getTableData()
+        })
+        .catch((_) => {
+        })
+    },
+    //添加
+    addRowHandle() {
+      this.settingFormShow = true
+    },
+    async init() {
+      this.mainLoading = true
+      const res = await getApiModuleApi({
+        tl: 'mdmService',
+        as: 'mdmService',
+        dj: 'queryMdmModuleRule'
+      }, { id: this.$route.query.id })
+      res.attribute.forEach(item => {
+        item.mdmModuleRoleButtonEntities.forEach(ele => {
+          item[ele.buttonType] = true
+        })
+      })
+      this.mainLoading = false
+      this.tableData = res.attribute
+    },
+    //close
+    dialogCloseHandle() {
+      this.addRole = ''
+    },
+    //add
+    addHandle() {
+      this.addSwitch = true
+    },
+    // 页码
+    currentChangeHandle(pageModel) {
+      this.pageModel = pageModel
+      this.$nextTick(() => {
+      })
+    }
+
+  },
+  components: {
+    baseNewForm,
+    BaseTable,
+    baseDialog,
+    baseNewSelect,
+    basePage,
+    baseRightDialog,
+    settingForm
+  },
+  created() {
+    this.initSelect().then(() => {
+      this.getTableData()
+    })
+
+    this.$emit('flashActive', 4)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.receiptsAddRow {
+  margin-top: 15px;
+  border: 1px dotted #ccc;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+
+}
+
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+  display: block !important;
+}
+
+.checkChunk {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wrap {
+  margin-left: 5px;
+  background-color: #fbfbfb;
+  width: 99.5%;
+  overflow: auto;
+
+  > .btn {
+    display: flex;
+    justify-content: flex-end;
+
+    > .chunk {
+      margin-left: 10px;
+    }
+  }
+
+  > .main {
+    margin-top: 10px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+
+    .btn {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 10px;
+    }
+  }
+
+}
+
+footer {
+  margin-top: 20px;
+}
+
+.addBox {
+  > .chunk {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.btnList {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .settingBtn {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  .deleBtn {
+    cursor: pointer;
+    margin-left: 10px;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/distribute/settingForm.vue b/src/views/DataCenterOptions/distribute/settingForm.vue
new file mode 100644
index 0000000..b0296b6
--- /dev/null
+++ b/src/views/DataCenterOptions/distribute/settingForm.vue
@@ -0,0 +1,649 @@
+<template>
+  <div class="settingForm">
+    <baseNewForm
+        ref="typeOptionForm"
+        :spanNumber="18"
+        :isFunBtn="false"
+        :formRow="formRow"
+        :ruleForm="ruleForm"
+        :labelPosition="'top'"
+        @onSelect="typeSelectChangeHanlde"
+        @onSubmit="typeOptionOnSubmit"
+    >
+    </baseNewForm>
+    <div class="bigTitle">数据权限设置</div>
+    <div class="tableName">
+      <div class="title">数据主表名称</div>
+      <div class="input">
+        <el-select clearable v-model="tableId" @change="serviceSeleChangHadle">
+          <el-option v-for="(item,index) of serviceOptions" :key="index" :label="item.label"
+                     :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="main" v-loading="mainLoading">
+      <!--      此处逻辑当拥有左括号或者右括号时 连接符清除并禁用-->
+      <baseTable :tableData="tableData" :tabLoading="tabLoading"
+                 :tableColumn="tableColumn" :border="false"
+      >
+        <!--        左括号-->
+        <template #leftBracket="{row}">
+          <el-select clearable v-model="row.leftBracket"
+          >
+            <el-option v-for="(item,index) of leftBracketOptions" :key="index" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </template>
+        <!--        字段名称-->
+        <template #filedName="{row}">
+          <el-select clearable v-model="row.filedId" @change="(val)=>{filedIdChangHandle(val,row)}">
+            <el-option v-for="(item,index) of labelOptions" :key="index" :label="item.label" :value="item.id">
+            </el-option>
+          </el-select>
+        </template>
+        <!--        对比类型-->
+        <template #compareType="{row}">
+          <el-select clearable v-model="row.compareType">
+            <el-option v-for="(item,index) of compareTypeOptions" :key="index" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </template>
+        <!--        运算值-->
+        <template #filedVaule="{row}">
+          <el-input v-model="row.filedVaule"></el-input>
+        </template>
+        <!--        连接符-->
+        <template #connectionSymbol="{row}">
+          <el-select clearable v-model="row.connectionSymbol"
+          >
+            <el-option v-for="(item,index) of connectionSymbolOptions" :key="index" :label="item.label"
+                       :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <!--        右括号-->
+        <template #rightParenthesis="{row}">
+          <el-select clearable v-model="row.rightParenthesis">
+            <el-option v-for="(item,index) of rightParenthesisOptions" :key="index" :label="item.label"
+                       :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <!--        操作-->
+        <template #operation="{row}">
+          <div class="btnList">
+            <div class="deleBtn" @click="activedOnFunc(row)">
+              <img src="./images/删除.png" alt="">
+            </div>
+          </div>
+        </template>
+      </baseTable>
+      <div class="receiptsAddRow">
+        <el-link
+            type="primary"
+            @click="addRowHandle"
+            :underline="false"
+        >+ 添加
+        </el-link
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import baseNewForm from '../compoments/baseNewForm'
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import { authApi } from '@/api/apis/auth'
+import { getApiModuleApi } from '@/api/apiChunks'
+import { retrieveRawAttr } from 'echarts/lib/data/helper/dataProvider'
+
+export default {
+  name: 'settingForm',
+  data() {
+    return {
+      formRow: [
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '应用列表',
+              id: 'appId',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '触发类型',
+              id: 'enabledType',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: [
+                {
+                  label: '手动',
+                  id: '0'
+                },
+                {
+                  label: '自动',
+                  id: '1'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '新增接口',
+              id: 'addApi',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '修改接口',
+              id: 'updateApi',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '删除接口',
+              id: 'deleteApi',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '新增脚本',
+              id: 'addScript',
+              row: 24,
+              disabled: false,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '修改脚本',
+              id: 'updateScript',
+              row: 24,
+              disabled: false,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'select',
+              title: '删除脚本',
+              id: 'deleteScript',
+              row: 24,
+              disabled: false,
+              fontSize: 16,
+              options: []
+            }
+          ]
+        },
+        {
+          elCol: [
+            {
+              type: 'switch',
+              title: '启用/停用',
+              id: 'enabledState',
+              row: 24,
+              disabled: false,
+              required: true,
+              fontSize: 16,
+              activeValue: '1',
+              inactiveValue: '0'
+            }
+          ]
+        }
+      ],
+      ruleForm: {},
+      tableId: '',//数据源主表名称
+      mainLoading: false,
+      tabLoading: false,
+      tableData: [],
+      tableColumn: [
+        {
+          title: '括号',
+          id: 'leftBracket'
+        },
+        {
+          title: '字段名称',
+          id: 'filedName'
+        },
+        {
+          title: '字段编码',
+          id: 'filedId'
+        },
+        {
+          title: '运算符',
+          id: 'compareType'
+        },
+        {
+          title: '运算值',
+          id: 'filedVaule'
+        },
+        {
+          title: '连接符',
+          id: 'connectionSymbol'
+        },
+        {
+          title: '括号',
+          id: 'rightParenthesis'
+        },
+        { title: '操作', id: 'operation' }
+      ],
+      compareTypeOptions: [
+        {
+          label: '=',
+          value: '1'
+        },
+        {
+          label: '!=',
+          value: '2'
+        },
+        {
+          label: '>',
+          value: '3'
+        },
+        {
+          label: '<',
+          value: '4'
+        }
+
+      ],//对比类型options
+      connectionSymbolOptions: [
+        {
+          label: 'and',
+          value: '1'
+        },
+        {
+          label: 'or',
+          value: '2'
+        }
+      ],//连接符号options
+      leftBracketOptions: [
+        {
+          label: '(',
+          value: '('
+        }
+      ],//左括号
+      rightParenthesisOptions: [
+        {
+          label: ')',
+          value: ')'
+        }
+      ],//右括号
+      serviceOptions: [],//主表
+      labelOptions: [],//字段名称下啦
+      labelDist: {}//字段名称字典
+    }
+  },
+  methods: {
+    //字段名称修改事件 需要存filedName
+    filedIdChangHandle(val, row) {
+      row.filedName = this.labelDist[val]
+    },
+    //主表名称下啦改变事件 1.请求字段名称做成下啦 2.清除表单内所有字段名称和编码
+    async serviceSeleChangHadle(val, flag = true) {
+      if (flag) {
+        this.labelOptions = []
+        this.labelDist = {}
+        this.tableData.forEach(item => {
+          item.filedName = ''
+          item.filedId = ''
+        })
+      }
+      if (val) {
+        let obj = this.serviceOptions.find(item => {
+          return val === item.id
+        })
+        const res = await getApiModuleApi({
+          tl: 'mdmModuleService',
+          as: '',
+          dj: 'queryMdmServiceField'
+        }, { mdmId: obj.mdmId, dbId: obj.dbId })
+        res.attribute.forEach(item => {
+          this.$set(this.labelDist, item.enName, item.chName)
+          this.labelOptions.push({
+            id: item.enName,
+            label: item.chName
+          })
+        })
+      }
+    },
+    //表字段字段类型下啦初始化
+    async initSelect() {
+      //服务名下拉
+      this.serviceOptions = []
+      const service = await getApiModuleApi({
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'queryMdmService'
+      }, { remark: '' })
+      service.attribute.forEach(item => {
+        console.log(item.dbName, 'item')
+        this.serviceOptions.push({
+          id: item.id,
+          label: item.remark,
+          dbId: item.id,
+          mdmId: item.mdmId
+        })
+      })
+      console.log(this.serviceOptions, 'this.serviceOptions')
+    },
+    async typeSelectChangeHanlde(val, index, indexRow, row, flag = true) {
+      if (flag && row.id === 'appId') {
+        this.formRow[2].elCol[0].options = []
+        this.formRow[3].elCol[0].options = []
+        this.formRow[4].elCol[0].options = []
+        this.formRow[5].elCol[0].options = []
+        this.formRow[6].elCol[0].options = []
+        this.formRow[7].elCol[0].options = []
+        this.$set(this.ruleForm, 'addApi', '')
+        this.$set(this.ruleForm, 'updateApi', '')
+        this.$set(this.ruleForm, 'deleteApi', '')
+        this.$set(this.ruleForm, 'addScript', '')
+        this.$set(this.ruleForm, 'updateScript', '')
+        this.$set(this.ruleForm, 'deleteScript', '')
+      }
+      //当下啦是appid时条用接口查询该app下的所有接口用在新增、修改、删除上
+      if (row.id === 'appId' && val) {
+        const res = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
+          appId: val
+        })
+        res.attribute.forEach((item) => {
+          this.formRow[2].elCol[0].options.push({
+            id: item.id,
+            label: item.apiName
+          })
+          this.formRow[3].elCol[0].options.push({
+            id: item.id,
+            label: item.apiName
+          })
+          this.formRow[4].elCol[0].options.push({
+            id: item.id,
+            label: item.apiName
+          })
+        })
+        //插件
+        const res2 = await authApi('sysApplicationService', '', 'queryAppScript', '', {
+          appId: val
+        })
+        res2.attribute.forEach((item) => {
+          this.formRow[5].elCol[0].options.push({
+            id: item.id,
+            label: item.scriptName
+          })
+          this.formRow[6].elCol[0].options.push({
+            id: item.id,
+            label: item.scriptName
+          })
+          this.formRow[7].elCol[0].options.push({
+            id: item.id,
+            label: item.scriptName
+          })
+        })
+      }
+
+    },
+    //测试通过
+    async typeOptionOnSubmit() {
+      let flag
+      //校验规则：1.允许表单为0行 2.当表单为1行时只需要判断 字段、运算符、运算值的填写 3.当表单>1行时第一行必须要填写左括号 。最后一行表单则必填右括号，非最后一行必填连接符，一行中不能同时出现左括号和右括号
+      if (this.tableData.length === 1) {
+        flag = this.tableData.some(item => {
+          if (item.leftBracket || item.rightParenthesis || item.connectionSymbol) {
+            this.$vmNews(`当仅有一行时不允许填写左右括号及连接符`)
+            return true
+          }
+          if (!item.filedName) {
+            this.$vmNews('请选择字段名称')
+            return true
+          }
+          if (!item.compareType) {
+            this.$vmNews('请选择运算符')
+            return true
+          }
+          if (!item.filedVaule) {
+            this.$vmNews('请填写运算值')
+            return true
+          }
+        })
+      } else if (this.tableData.length > 1) {
+        //这边需要开始计算左括号和右括号数量 两者括号只允许左括号-右括号=1或者左括号-右括号=0否则报错
+        let leftBracketNum = 0
+        let rightParenthesisNum = 0
+        flag = this.tableData.some((item, index) => {
+          //最后一行右括号为必填
+          if (index + 1 === this.tableData.length && !item.rightParenthesis) {
+            this.$vmNews(`最后一行请填写右括号`)
+            return true
+          }
+          //第一行必须填写左括号
+          if (index + 1 === 1 && !item.leftBracket) {
+            this.$vmNews(`首行请填写左括号`)
+            return true
+          }
+          //除了最后一行每一行的连接符为必填
+          if (index + 1 != this.tableData.length && !item.connectionSymbol) {
+            this.$vmNews(`第${index + 1}请填写连接符`)
+            return true
+          }
+          //最后一行不允许填写连接符
+          if (index + 1 == this.tableData.length && item.connectionSymbol) {
+            this.$vmNews(`最后一行不允许填写连接符`)
+            return true
+          }
+          if (!item.filedName) {
+            this.$vmNews(`第${index + 1}行请填写字段名称`)
+            return true
+          }
+          if (!item.compareType) {
+            this.$vmNews(`第${index + 1}行请填写运算符`)
+            return true
+          }
+          if (!item.filedVaule) {
+            this.$vmNews(`第${index + 1}行请填写运算值`)
+            return true
+          }
+          if (item.leftBracket && item.rightParenthesis) {
+            this.$vmNews(`第${index + 1}行中不允许同时存在左括号和右括号`)
+            return true
+          }
+          //开始判断左右括号是否一致
+          if (item.leftBracket) {
+            leftBracketNum++
+            let num = leftBracketNum - rightParenthesisNum
+            if (num !== 0 && num !== 1) {
+              this.$vmNews(`第${index + 1}行中左括号填写不符合规则请重新填写`)
+              return true
+            }
+          }
+          if (item.rightParenthesis) {
+            rightParenthesisNum++
+            let num = leftBracketNum - rightParenthesisNum
+            if (num !== 0 && num !== 1) {
+              this.$vmNews(`第${index + 1}行中右括号填写不符合规则请重新填写`)
+              return true
+            }
+          }
+        })
+      }
+      if (flag) return
+      let params = {
+        ...this.ruleForm,
+        dbId: this.tableId,
+        mdmId: this.$route.query.id,
+        mdmModuleDistributeDetailEntities: this.tableData
+      }
+      if (params.id) {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'updateMdmDistribute', '', params)
+        this.$vmNews('保存成功', 'success')
+        this.$emit('saveSuccessHandle')
+      } else {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'saveMdmDistribute', '', params)
+        this.$vmNews('保存成功', 'success')
+        this.$emit('saveSuccessHandle')
+      }
+    },
+    addRowHandle() {
+      this.tableData.push({
+        'leftBracket': '',//左括号
+        'filedName': '',//字段名
+        'compareType': '',//对比类型 1、等于 2、不等于 3、大于 4、小于
+        'filedVaule': '',//值
+        'connectionSymbol': '',// 连接符号 1\and 2\or
+        'rightParenthesis': ''// 右括号
+      })
+    },
+    //删除
+    activedOnFunc(row) {
+      this.tableData.splice(row.index, 1)
+    },
+    //获取应用下啦
+    async getAppList() {
+      const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
+      console.log(res)
+      this.formRow[0].elCol[0].options = []
+      res.attribute.forEach(item => {
+        this.formRow[0].elCol[0].options.push({
+          id: item.id,
+          label: item.name
+        })
+      })
+
+    },
+    //编辑获取数据
+    async getrowDetails(id) {
+      const res = await authApi('mdmModuleService', '', 'getMdmDistribute', '', {
+        id
+      })
+      this.ruleForm = res.attribute
+      this.tableId = this.ruleForm.dbId
+      this.tableData = res.attribute.mdmModuleDistributeDetailEntities
+      console.log(this.tableData, '?')
+      this.typeSelectChangeHanlde(this.ruleForm.appId, 0, 0, { id: 'appId' }, false)
+      this.serviceSeleChangHadle(this.ruleForm.dbId, false)
+    }
+  },
+  created() {
+    this.getAppList()
+    this.initSelect()
+  },
+  components: {
+    BaseTable,
+    baseNewForm
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.bigTitle {
+  border-top: 1px solid #EBEBEB;
+  padding-top: 20px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 600;
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+}
+
+.tableName {
+  display: flex;
+  align-items: center;
+  margin: 30px 0;
+
+  .title {
+    margin-right: 20px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+}
+
+.receiptsAddRow {
+  margin-top: 30px;
+  border: 1px dotted #ccc;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+}
+
+.btnList {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .deleBtn {
+    cursor: pointer;
+    margin-left: 10px;
+    width: 24px;
+    height: 24px;
+    background: #EBEBED;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/images/1.png b/src/views/DataCenterOptions/images/1.png
new file mode 100644
index 0000000..dea5cfa
Binary files /dev/null and b/src/views/DataCenterOptions/images/1.png differ
diff --git a/src/views/DataCenterOptions/images/2.png b/src/views/DataCenterOptions/images/2.png
new file mode 100644
index 0000000..18b3437
Binary files /dev/null and b/src/views/DataCenterOptions/images/2.png differ
diff --git a/src/views/DataCenterOptions/images/3.png b/src/views/DataCenterOptions/images/3.png
new file mode 100644
index 0000000..0e818e6
Binary files /dev/null and b/src/views/DataCenterOptions/images/3.png differ
diff --git a/src/views/DataCenterOptions/images/4.png b/src/views/DataCenterOptions/images/4.png
new file mode 100644
index 0000000..b17c19a
Binary files /dev/null and b/src/views/DataCenterOptions/images/4.png differ
diff --git a/src/views/DataCenterOptions/images/5.png b/src/views/DataCenterOptions/images/5.png
new file mode 100644
index 0000000..afc7666
Binary files /dev/null and b/src/views/DataCenterOptions/images/5.png differ
diff --git a/src/views/DataCenterOptions/images/icon.png b/src/views/DataCenterOptions/images/icon.png
new file mode 100644
index 0000000..dfa057c
Binary files /dev/null and b/src/views/DataCenterOptions/images/icon.png differ
diff --git a/src/views/DataCenterOptions/images/删除.png b/src/views/DataCenterOptions/images/删除.png
new file mode 100644
index 0000000..c74a004
Binary files /dev/null and b/src/views/DataCenterOptions/images/删除.png differ
diff --git a/src/views/DataCenterOptions/images/设置.png b/src/views/DataCenterOptions/images/设置.png
new file mode 100644
index 0000000..b6fd71a
Binary files /dev/null and b/src/views/DataCenterOptions/images/设置.png differ
diff --git a/src/views/DataCenterOptions/index.vue b/src/views/DataCenterOptions/index.vue
new file mode 100644
index 0000000..96594cd
--- /dev/null
+++ b/src/views/DataCenterOptions/index.vue
@@ -0,0 +1,587 @@
+<template>
+  <div class="monitoring">
+    <header>
+      <div class="left">
+        <div class="search">
+          <div class="chunk">
+            <el-input placeholder="主数据名称" v-model="searchForm.mdmName"
+                      @change="submitsearchForm"
+            >
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="submitsearchForm"></i>
+            </el-input>
+          </div>
+          <!--          <div class="chunk">-->
+          <!--            <el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">-->
+          <!--              <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">-->
+          <!--              </el-option>-->
+          <!--            </el-select>-->
+          <!--          </div>-->
+        </div>
+      </div>
+      <div class="right" style="display: flex;align-items: center">
+        <div style="margin-right: 5px;color: #333;font-size: 12px">共 <span>{{ tableData.length }}个主数据</span></div>
+        <!--        <el-button type="primary" icon="el-icon-plus" @click="addApp">新增</el-button>-->
+        <el-button type="primary" icon="el-icon-plus" @click="tableButtonHandle({},{type:'new'})">新增</el-button>
+      </div>
+    </header>
+    <main>
+      <div class="tableData">
+        <div class="tableChunk" v-for="(row,index) in tableData" :key="index">
+          <div class="topInfo">
+            <div class="left">
+              <div class="icon">
+                <template v-if="row.imgUrl">
+                  <img :src="row.imgUrl" alt="">
+                </template>
+                <template v-else>
+                  <img src="./images/icon.png" alt="">
+                </template>
+              </div>
+              <div class="vision"></div>
+            </div>
+            <div class="tableInfo">
+              <div class="tableName">
+                <div class="name">{{ row.mdmName }}</div>
+              </div>
+              <div class="tableType">{{ row.mdmType == 1 ? '档案' : '数据' }}</div>
+              <div class="tableContent">
+                {{ row.remark }}
+              </div>
+            </div>
+            <!--            遮罩层（显示两按钮）-->
+
+          </div>
+          <div class="shade">
+            <div class="btnList">
+              <div class="setting" @click="tableButtonHandle(row,{type:'setting'})">
+                <div class="icon">
+                  <img src="./images/设置.png" alt="">
+                </div>
+                <div class="name">设置</div>
+              </div>
+              <div class="dele" @click="deleteHandle(row)">
+                <div class="icon">
+                  <img src="./images/删除.png" alt="">
+                </div>
+                <div class="name">删除</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <!--      <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>-->
+    </footer>
+  </div>
+</template>
+<script>
+import configData from './configData.js'
+import dayjs from 'dayjs'
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import basePage from '@/views/intergrationTask/compoments/basePage.vue'
+import { getApiModuleApi } from '@/api/apiChunks/index.js'
+import { downloadLogo } from '@/api/apis/logo.js'
+import request from '@/utils/request'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  name: 'listOfApps',
+  data() {
+    return {
+      refreshLoading: false,
+      searchForm: {
+        task_name: ''
+      },
+      imgLoading: false,
+      mainTabLoading: false,
+      funData: [
+        {
+          type: 'setting',
+          text: '设置',
+          color: '#5a9cf8'
+        }
+      ],
+      tableColumn: configData.tableColumn,
+      tableData: [],
+      imgUrl: '',
+      pageModel: {
+        pageIndex: 1,
+        total: 10,
+        limit: 10
+      },
+      classOptions: [],
+      stateOptions: [
+        {
+          label: '启用',
+          value: '1'
+        },
+        {
+          label: '停用',
+          value: '2'
+        }
+      ],
+      methods_dist: {
+        1: '接口',
+        2: 'H5',
+        3: 'PC网页',
+        4: 'PC应用程序'
+      }
+    }
+  },
+  methods: {
+    //删除
+    deleteHandle(row) {
+      this.$confirm('该操作将删除所有数据。确定删除吗？', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'error'
+      }).then(async() => {
+        this.openLoading('del')
+        const res = await authApi('mdmModuleService', '', 'deleteMdm', '', {
+          id: row.id
+        })
+        this.$vmNews('删除成功！', 'success')
+        this.initMainTableData()
+      })
+
+    },
+    // 状态改变
+    async appStatusChange(val, row) {
+      const res = await getApiModuleApi({
+        tl: 'sysApplicationService',
+        as: 'application',
+        dj: 'enableOrDisableApp'
+      }, { id: row.id, appStatus: val })
+      this.$vmNews(res.msg, 'success')
+    },
+    async initSelectOptions() {
+      let params = {
+        tab_name: 'mdm',
+        column_name: 'mdm_type'
+      }
+      const res = await getApiModuleApi({
+        tl: 'generalServiceImpl',
+        as: 'dictionaryshop',
+        dj: 'selectDictionaryshop'
+      }, params)
+      this.classOptions = []
+      res.attribute.forEach((item) => {
+        this.classOptions.push({
+          label: item.column_content,
+          value: item.column_value
+        })
+      })
+    },
+    // 添加应用
+    addApp() {
+      this.$router.push({
+        path: '/integrationOption/masterDataAdd',
+        query: { flag: 'add' }
+      })
+    },
+    // 时间处理
+    getTimeHandler(time) {
+      var days = parseInt(time / (1000 * 60 * 60 * 24))
+      var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+      var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60))
+      var seconds = (time % (1000 * 60)) / 1000
+      return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
+    },
+    // 初始化表单
+    async initMainTableData(obj = {}) {
+      this.refreshLoading = true
+      const res = await getApiModuleApi(
+          {
+            tl: 'mdmModuleService',
+            as: '',
+            dj: 'queryMdm'
+          },
+          {
+            ...obj,
+            mdmType: 2
+          }
+      )
+      this.refreshLoading = false
+      if (res.status == 200) {
+        // this.pageModel.total = res.attribute.total
+        this.imgLoading = true
+        res.attribute.map(el => {
+          this.$set(el, 'imgLoading', true)
+          return request({
+            url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + el.mdmLogo,
+            method: 'get',
+            responseType: 'arraybuffer'
+          }).then((res) => {
+            el.imgLoading = false
+            if (!res.byteLength) return
+            let tempImgUrl =
+                'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+            this.$set(el, 'imgUrl', tempImgUrl)
+          })
+        })
+        console.log(res, 'res')
+        this.tableData = res.attribute
+      }
+    },
+    //下载头像
+    async getImageUrl(id) {
+      // const res = await downloadLogo(id);
+      // const blob = new Blob([res]);
+      // return URL.createObjectURL(blob);
+      // this.imgUrl = URL.createObjectURL(blob)
+
+    },
+    // 点击提交
+    submitsearchForm() {
+      this.initMainTableData(this.searchForm)
+    },
+    // 表单操作
+    tableButtonHandle(val, item) {
+      if (item.type === 'setting') {
+        this.$router.push({
+          path: '/integrationOption/settingMenu/masterDataEdit',
+          query: { flag: 'setting', id: val.id, name: val.name, appLogo: val.appLogo, mdmCode: val.mdmCode, type: 2 }
+        })
+      } else if (item.type === 'copy') {
+        this.$router.push({
+          path: '/applicationList/applicationAdd/masterDataEdit',
+          query: { flag: 'copy', id: val.id, appLogo: val.appLogo }
+        })
+      } else if (item.type === 'new') {
+        this.$router.push({
+          path: '/integrationOption/settingMenu/masterDataEdit',
+          query: { flag: 'new', type: 2 }
+        })
+      }
+    },
+    // 页码
+    currentChangeHandle(pageModel) {
+      this.pageModel = pageModel
+      this.$nextTick(() => {
+        this.initMainTableData(this.searchForm)
+      })
+    }
+  },
+  computed: {
+    // 操作框的宽度
+    funWidth() {
+      return this.funData.length * 70
+    }
+  },
+  components: {
+    BaseTable,
+    basePage
+  },
+  created() {
+    // this.initMainTableData();
+    this.initSelectOptions()
+  },
+  activated() {
+    this.initMainTableData(this.searchForm)
+  },
+  beforeRouteLeave(to, from, next) {
+    if (!to.path.includes('applicationList')
+    ) {
+      next()
+      this.$destroy('listOfApps')
+    } else {
+      next()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.monitoring {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  overflow: auto;
+  border-radius: 8px;
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 20px;
+
+    .left {
+      align-items: center;
+      display: flex;
+
+      .search {
+        margin-left: 30px;
+        display: flex;
+
+        > .chunk {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  main {
+    margin-top: 5px;
+    padding: 5px 20px 5px;
+    height: calc(100vh - 200px);
+    border-radius: 20px;
+    background-color: #fff;
+    overflow: auto;
+
+    .tableData {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+
+      .tableChunk {
+        width: 30%;
+        margin-bottom: 15px;
+        margin-left: 2.5%;
+        border-radius: 24px;
+        border: 1px solid #E5E5E5;
+        padding-bottom: 10px;
+        position: relative;
+        overflow: hidden;
+
+        .topInfo {
+          display: flex;
+          margin: 15px 0 0 15px;
+
+          .left {
+            .icon {
+              width: 70px;
+              height: 70px;
+              border-radius: 16px;
+              border: 1px solid #F0F0F2;
+              padding: 14px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              > img {
+                width: 50px;
+                height: 50px;
+                border-radius: 13px;
+              }
+            }
+
+            //.vision{
+            //  margin-top: 10px;
+            //  margin-left: 30px;
+            //  width: 29px;
+            //  height: 16px;
+            //  border-radius: 2px;
+            //  border: 1px solid #FF8B0F;
+            //}
+          }
+
+          .tableInfo {
+            margin-left: 15px;
+
+            .tableName {
+              display: flex;
+              align-items: center;
+
+              > .name {
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 18px;
+                color: #333333;
+                line-height: 33px;
+                text-align: left;
+                font-style: normal;
+              }
+            }
+
+            .tableType {
+              width: 38px;
+              height: 24px;
+              background: #1478F6;
+              border-radius: 5px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 12px;
+              color: #FFFFFF;
+              text-align: center;
+              line-height: 24px;
+              font-style: normal;
+            }
+
+            .tableContent {
+              margin-top: 5px;
+              width: 95%;
+              height: 40px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 14px;
+              color: #999999;
+              line-height: 20px;
+              text-align: left;
+              font-style: normal;
+              display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
+              -webkit-box-orient: vertical; /*作为弹性伸缩盒子模型显示。*/
+              -webkit-line-clamp: 2; //*显示的行*/
+              overflow: hidden; /*溢出隐藏*/
+              /* 对于连字情况或者纯字母，可以解决 */
+              word-break: break-all;
+            }
+          }
+        }
+
+        .shade {
+          display: none;
+          position: absolute;
+          z-index: 10;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          background-color: rgba(0, 0, 0, .7);
+
+          .btnList {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .setting {
+              cursor: pointer;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+
+              .icon {
+                img {
+                  width: 44px;
+                  height: 44px;
+                }
+              }
+
+              .name {
+                margin-top: 10px;
+                color: #fff;
+                font-weight: 700;
+              }
+            }
+
+            .dele {
+              cursor: pointer;
+              margin-left: 50px;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+
+              .icon {
+                img {
+                  width: 44px;
+                  height: 44px;
+                }
+              }
+
+              .name {
+                margin-top: 10px;
+                color: #FF3B30;
+                font-weight: 700;
+              }
+            }
+          }
+
+
+        }
+
+        &:hover {
+          .shade {
+            display: block !important;
+          }
+        }
+
+      }
+    }
+  }
+
+  footer {
+    margin-top: 20px;
+  }
+
+  .nameCard {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+
+    .image {
+      width: 29px;
+      height: 29px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .nameInfo {
+      margin-left: 5px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+
+      > .name {
+        text-align: left;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      > .version {
+        margin-top: 1px;
+        color: #ff8b0f;
+        font-size: 12px;
+        height: 20px;
+        border: 0.5px solid #ff8b0f;
+        padding: 0 1px;
+      }
+    }
+  }
+}
+
+.taskClasses {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin-top: 5px;
+    border-radius: 2px;
+    padding: 2px 10px;
+    margin-left: 8px;
+    color: #fff;
+  }
+
+  .state1 {
+    background-color: #1478f6;
+  }
+
+  .state2 {
+    background-color: #f64114;
+  }
+
+  .state3 {
+    background-color: #00bd72;
+  }
+
+  .state4 {
+    background-color: #b700bd;
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/logsDeatil/index.vue b/src/views/DataCenterOptions/logsDeatil/index.vue
new file mode 100644
index 0000000..8a46b01
--- /dev/null
+++ b/src/views/DataCenterOptions/logsDeatil/index.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="logsDeatil">
+    <div class="tabs">
+      <div class="chunk" :class="{acivted:activeName==='1'}" @click="tabsHandleClick('1')">下发日志</div>
+      <div class="chunk" :class="{acivted:activeName==='2'}" @click="tabsHandleClick('2')">写入日志</div>
+    </div>
+    <div class="search-container">
+      <el-input
+        v-model="inputValue"
+        placeholder="源数据"
+
+        @input="handleInput"
+        class="search-text"
+        type="text"
+      ></el-input>
+      <el-select
+        v-model="selectedValue"
+        class="search-text"
+        @change="handleSelectChange"
+        placeholder="请选择状态">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button
+        icon="el-icon-search"
+        type="primary"
+        class="searchIcon"
+        @click="handleSearch"
+      ></el-button>
+      <el-button
+        icon="el-icon-refresh"
+        type="primary"
+        class="searchIcon"
+        @click="clearInput"
+      ></el-button>
+
+
+    </div>
+
+    <div class="table" v-loading="tableLoading">
+      <baseTable :tableData="tableData" :tabLoading="tabLoading"
+                 :tableColumn="tableColumn" :border="false" tableHeight="73vh"
+      >
+        <!--        状态-->
+        <template #dataType="{row}">
+          {{ row.dataType == 1 ? '成功' : '失败' }}
+        </template>
+        <!--        操作类型-->
+        <template #optionType="{row}">
+          {{ row.optionType }}
+        </template>
+      </baseTable>
+    </div>
+
+
+    <footer>
+      <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>
+    </footer>
+  </div>
+</template>
+
+<!--<template>-->
+<!--  <div>-->
+
+<!--    <base-layout-->
+
+<!--    >-->
+<!--      <div slot="main" slot-scope="{ tableHeight }">-->
+<!--          <div class="logsDeatil">-->
+<!--            <div class="tabs">-->
+<!--              <div class="chunk" :class="{acivted:activeName==='1'}" @click="tabsHandleClick('1')">下发日志</div>-->
+<!--              <div class="chunk" :class="{acivted:activeName==='2'}" @click="tabsHandleClick('2')">写入日志</div>-->
+<!--            </div>-->
+
+<!--            <div class="table" v-loading="tableLoading">-->
+<!--              <baseTable :tableData="tableData" :tabLoading="tabLoading"-->
+<!--                         :tableColumn="tableColumn" :border="false" tableHeight="73vh"-->
+<!--              >-->
+<!--                &lt;!&ndash;        状态&ndash;&gt;-->
+<!--                <template #dataType="{row}">-->
+<!--                  {{ row.dataType == 1 ? '成功' : '失败' }}-->
+<!--                </template>-->
+<!--                &lt;!&ndash;        操作类型&ndash;&gt;-->
+<!--                <template #optionType="{row}">-->
+<!--                  {{ row.optionType }}-->
+<!--                </template>-->
+<!--              </baseTable>-->
+<!--            </div>-->
+
+
+<!--            <footer>-->
+<!--              <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>-->
+<!--            </footer>-->
+<!--          </div>-->
+<!--      </div>-->
+<!--    </base-layout>-->
+<!--  </div>-->
+<!--</template>-->
+
+
+
+
+
+<script>
+import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
+import basePage from '@/views/intergrationTask/compoments/basePage.vue'
+import { authApi } from '@/api/apis/auth'
+import baseLayout from "@/components/base/baseLayout/index.vue";
+
+export default {
+  name: 'index',
+  components: {baseLayout,basePage, BaseTable },
+  data() {
+    return {
+      inputValue:'',
+      selectedValue:'',
+      options:[
+        {value:'1',label:'成功'},
+        {value:'2',label:'失败'},
+        {value:'',label:'不筛选'},
+      ],
+      activeName: '1',
+      tableData: [],
+      tableColumn: [
+        {
+          title: '目标应用',
+          id: 'targetApp'
+        },
+        {
+          title: '目标api',
+          id: 'targetApi'
+        },
+        {
+          title: '源数据',
+          id: 'sourceData',
+          tooltip: true
+        },
+        {
+          title: '状态',
+          id: 'dataType'
+        },
+        {
+          title: '返回信息',
+          id: 'remark',
+          tooltip: true
+        },
+        {
+          title: '操作类型',
+          id: 'optionType'
+        }
+      ],
+      requirementList: [
+        {
+          placeholder: "源数据",
+          prop: "sourceData",
+          tag: "elInput",
+        }
+      ],
+      tabLoading: false,
+      tableColumnTypeOne: [
+        {
+          title: '目标应用',
+          id: 'targetApp'
+        },
+        {
+          title: '目标api',
+          id: 'targetApi'
+        },
+        {
+          title: '源数据',
+          id: 'sourceData',
+          tooltip: true
+        },
+        {
+          title: '状态',
+          id: 'dataType'
+        },
+        {
+          title: '返回信息',
+          id: 'remark',
+          tooltip: true
+        },
+        {
+          title: '创建时间',
+          id: 'create_time'
+        },
+        {
+          title: '操作类型',
+          id: 'optionType'
+        }
+      ],//下发日志用
+      tableColumnTypeTwo: [
+        {
+          title: '来源名称',
+          id: 'sourceName'
+        },
+        {
+          title: '编码',
+          id: 'code'
+        },
+        {
+          title: '源数据',
+          id: 'sourceData',
+          tooltip: true
+        },
+        {
+          title: '状态',
+          id: 'dataType'
+        },
+        {
+          title: '返回信息',
+          id: 'remark',
+          tooltip: true
+        },
+        {
+          title: '创建时间',
+          id: 'create_time'
+        },
+        {
+          title: '操作类型',
+          id: 'optionType'
+        },
+        {
+          title: '操作人',
+          id: 'optionName'
+        }
+
+      ],//写入日志用
+      pageModel: {
+        pageIndex: 1,
+        total: 10,
+        limit: 10
+      },
+      optionTypeDist: {
+        '1': '新增',
+        '2': '修改',
+        '3': '删除'
+      },
+      tableLoading: false
+    }
+  },
+  methods: {
+    //选项卡切换事件
+    tabsHandleClick(num) {
+      if (this.activeName === num) return
+      this.activeName = num
+      this.pageModel.pageIndex = 1
+      this.initMainTableData()
+    },
+    handleSelectChange(){
+
+      this.initMainTableData()
+    },
+    clearInput() {
+      this.inputValue = ''; // 将inputValue重置为空字符串
+    },
+    handleSearch() {
+      this.initMainTableData()
+    },
+
+    // 页码
+    currentChangeHandle(pageModel) {
+      this.pageModel = pageModel
+      this.$nextTick(() => {
+        this.initMainTableData(this.searchForm)
+      })
+    },
+    async initMainTableData() {
+      if (this.activeName === '2') {
+        const res = await authApi('mdmModuleService', '', 'queryMdmOptionLogPage', '', {
+          pageNum: this.pageModel.pageIndex,
+          pageSize: this.pageModel.limit,
+          mdmCode: this.$route.query.mdmCode,
+          sourceData: this.inputValue,
+          dataType:this.selectedValue,
+        })
+        this.tableColumn = this.tableColumnTypeTwo
+        this.tableData = res.attribute.list
+        this.pageModel.total = res.attribute.total
+      } else {
+        const res = await authApi('mdmModuleService', '', 'queryMdmDistributeLogPage', '', {
+          pageNum: this.pageModel.pageIndex,
+          pageSize: this.pageModel.limit,
+          mdmCode: this.$route.query.mdmCode,
+          sourceData: this.inputValue,
+          dataType:this.selectedValue,
+        })
+        this.tableColumn = this.tableColumnTypeOne
+        this.tableData = res.attribute.list
+        this.pageModel.total = res.attribute.total
+      }
+    }
+  },
+  mounted() {
+    this.initMainTableData()
+    this.$emit('flashActive', 5)
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.search-container {
+  display: flex;           /* 使用Flexbox布局 */
+  align-items: center;     /* 垂直居中对齐 */
+  justify-content: flex-start; /* 水平起始对齐 */
+  margin-bottom: 15px;
+  margin-top: 15px;
+}
+
+.searchIcon {
+  font-size: 18px;
+  /* padding: 0 12px; */
+  height: 32px;
+  /* line-height: 32px; */
+  margin-left: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-text {
+  //flex-grow: 1; /* 让输入框占据剩余空间 */
+  margin-right: 10px; /* 与按钮保持一定间距 */
+  width: 15%;
+}
+
+.logsDeatil {
+  margin-left: 5px;
+  background-color: #fff;
+  padding: 10px;
+
+  .tabs {
+    display: flex;
+    border-bottom: 1px solid #EBEBEB;
+    padding-left: 118px;
+
+    .chunk {
+      cursor: pointer;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+      text-align: left;
+      font-style: normal;
+      padding: 20px 12px;
+      margin-left: 80px;
+    }
+
+    .acivted {
+      border-bottom: 2px #1478F6 solid !important;
+      color: #1478F6 !important;
+      font-weight: 700;
+
+    }
+  }
+
+  .table {
+    margin-top: 10px;
+  }
+
+  footer {
+    padding-bottom: 20px;
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/masterDataAdd.vue b/src/views/DataCenterOptions/masterDataAdd.vue
new file mode 100644
index 0000000..1be220c
--- /dev/null
+++ b/src/views/DataCenterOptions/masterDataAdd.vue
@@ -0,0 +1,482 @@
+<script src="configData.js"></script>
+<template>
+  <div class="wrap">
+
+    <div class="main">
+      <div class="btn">
+        <div class="title" style="margin-top: 0">{{ bigTitle }}</div>
+        <div class="chunkList">
+          <div class="chunk">
+          </div>
+          <div class="chunk">
+            <el-button
+              v-if="showForm"
+              icon="el-icon-close"
+              @click="showForm=false"
+            >取消
+            </el-button>
+            <el-button v-if="showForm" icon="el-icon-first-aid-kit" type="primary" @click="saveHandle"
+                       :loading="saveLoading"
+            >保存
+            </el-button>
+            <el-button v-if="!showForm" icon="el-icon-first-aid-kit" type="primary" @click="showForm=true">编辑
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <!--      展示页-->
+      <template v-if="!showForm">
+        <div class="planInfo">
+          <div class="img">
+            <img v-if="imgUrl" :src="imgUrl" class="avatar">
+            <img v-else src="./images/icon.png" alt="">
+          </div>
+          <div class="info">
+            <div class="name">{{ this.ruleForm.mdmName }}</div>
+            <div class="remark">{{ this.ruleForm.remark }}</div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="showForm">
+        <!--      编辑页-->
+        <div class="upload">
+          <div class="uploadMain">
+            <div class="left">
+              <div class="smalltitle">主数据logo</div>
+              <el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
+                         :on-preview="handlePreview" :before-upload="handleProgress"
+                         list-type="picture" :limit="1" :disabled="lookFlag"
+                         :show-file-list="false"
+              >
+                <div class="line">
+                  <div class="left" v-loading="imgLoading">
+                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                    <img v-else src="./images/icon.png" alt="">
+                  </div>
+                  <div class="right" v-if="!lookFlag">
+                    <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
+                  </div>
+                </div>
+                <div slot="tip" class="el-upload__tip" v-if="!lookFlag">
+                  只能上传jpg/png文件，且不超过2MB
+                </div>
+              </el-upload>
+            </div>
+            <div class="right">
+
+            </div>
+          </div>
+        </div>
+        <div class="form">
+          <baseNewForm ref="mainForm" :spanNumber="24" :isFunBtn="false" :lookFlag="lookFlag" :formRule="!lookFlag"
+                       :formRow="formRow" :ruleForm="ruleForm" @onSubmit="onSubmit"
+          ></baseNewForm>
+        </div>
+      </template>
+    </div>
+    <div class="rule">
+      <div class="title">数据源</div>
+      <div class="line">
+        <div class="name">单据规则</div>
+        <template v-if="!receiptsTableData.length">
+          <div class="value">尚未设置</div>
+        </template>
+        <template v-else>
+          <div class="value">
+            <div class="receiptsItem" v-for="(item,index) in receiptsTableData">{{ item.dbValue }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getApiModuleApi } from '@/api/apiChunks/index.js'
+import configData from './configData'
+import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
+import request from '@/utils/request'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  data() {
+    return {
+      fileList: [],
+      iconBase64: '',
+      imgUrl: '',
+      loading: false,
+      appLogo: '',
+      ruleForm: {
+        accessMode: []
+      },
+      lookFlag: false,
+      formRow: configData.addForm,
+      imgLoading: false,
+      saveLoading: false,
+      showForm: false,
+      billid: '',
+      receiptsTableData: [],
+      bigTitle: '主数据信息',
+      mdmType: 1
+    }
+  },
+  methods: {
+    // 文件上传相关时间
+    handleProgress(fileList, file) {
+      console.log(fileList, 'file')
+      if (!fileList) return
+      if (
+        fileList.type.split('/')[1] != 'jpeg' &&
+        fileList.type.split('/')[1] != 'png'
+      ) {
+        this.$message({
+          type: 'warning',
+          message: '只能上传jpg/png文件'
+        })
+        return false
+      }
+      if (fileList.size >= 2000000) {
+        this.$message({
+          type: 'warning',
+          message: '文件大小不超过2MB'
+        })
+        return false
+      }
+      this.handleAvatarSuccess({}, fileList).then(res => {
+      })
+    },
+    handlePreview(file) {
+    },
+    async handleAvatarSuccess(res, file) {
+      this.loading = true
+      this.$refs.upload.clearFiles()//清理文件上传状态
+      this.imgUrl = URL.createObjectURL(file)
+      let formData = new FormData()
+      formData.append('file', file)
+      formData.append('fileFlag', true)
+      formData.append('businessType', 'application')
+      return request({
+        url: '/kangarooDataCenterV3/entranceController/fileUpload',
+        method: 'post',
+        data: formData
+      }).then((res) => {
+        if (res.status === '200') {
+          console.log(res)
+          this.$vmNews('上传成功', 'success')
+          this.appLogo = res.attribute.id
+          this.loading = false
+        }
+      })
+      this.loading = false
+      return true
+
+    },
+    async beforeUpload(file) {
+    },
+    // 保存按钮、列表验证
+    saveHandle() {
+      this.$refs.mainForm.submitForm()
+
+    },
+    //验证成功准备上传
+    async onSubmit() {
+      this.saveLoading = true
+      if (!this.billid) {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'saveMdm', '', {
+          updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: this.mdmType
+        })
+        this.$vmNews('保存成功', 'success')
+        this.saveLoading = false
+        this.$emit('saveSuccessInit', res, this.initEditFormData)
+        this.showForm = false
+      } else {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'updateMdm', '', {
+          ...this.ruleForm,
+          mdmLogo: this.appLogo,
+          mdmType: this.mdmType
+        })
+        this.$vmNews('保存成功', 'success')
+        this.saveLoading = false
+        this.showForm = false
+        this.$emit('saveSuccess')
+      }
+    },
+    // 获取下拉数据(作废）
+    async initSelectOptions() {
+      let params = {
+        tab_name: 'mdm',
+        column_name: 'mdm_type'
+      }
+      const res = await getApiModuleApi({
+        tl: 'generalServiceImpl',
+        as: 'dictionaryshop',
+        dj: 'selectDictionaryshop'
+      }, params)
+      this.formRow[1].elCol[0].options = []
+      res.attribute.forEach((item) => {
+        this.formRow[1].elCol[0].options.push({
+          label: item.column_content,
+          id: item.column_value
+        })
+      })
+      console.log(this.formRow[1].elCol[0].options)
+    },
+    // 复制-获取表单数据
+    async initCopyFormData() {
+      const res = await getApiModuleApi({
+        tl: 'sysApplicationService',
+        as: 'application',
+        dj: 'getCopyApp'
+      }, { id: this.$route.query.id })
+      this.ruleForm = res.attribute
+      this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode)
+    },
+    async initEditFormData() {
+      const res = await getApiModuleApi({
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'getMdm'
+      }, { id: this.billid })
+      this.ruleForm = res.attribute
+      if (res.attribute.mdmLogo) {
+        this.appLogo = res.attribute.mdmLogo
+        this.getLogoUrl()
+      } else {
+        // this.imgUrl = false
+      }
+    },
+    //下载logo
+    getLogoUrl() {
+      this.imgLoading = true
+      let id = this.appLogo ? this.appLogo : this.$route.query.appLogo
+      return request({
+        url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + id,
+        method: 'get',
+        responseType: 'arraybuffer'
+      }).then((res) => {
+        this.imgLoading = false
+        if (!res.byteLength) {
+          this.imgUrl = false
+          return
+        }
+        this.imgUrl =
+          'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+      })
+    },
+    //单据规则获取
+    async getRuleHandle() {
+      this.openLoading('submit')
+      const res = await authApi('mdmModuleService', '', 'getMdmTableCodeRule', '', {
+        mdmId: this.billid
+      })
+      this.receiptsTableData = res.attribute
+    }
+
+  },
+  components: {
+    baseNewForm
+  },
+  created() {
+    // 请求下拉options
+    // this.initSelectOptions()
+    // 判断是什么类型进来的
+    if (this.$route.query.id) {
+      this.billid = this.$route.query.id
+      this.initEditFormData()
+      this.getRuleHandle()
+    }
+    if (this.$route.query.type) {
+      this.bigTitle = '数据中心信息'
+      this.mdmType = 2
+    } else {
+      this.bigTitle = '主数据信息'
+      this.mdmType = 1
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+  display: block !important;
+}
+
+.wrap {
+  width: 99.5%;
+  overflow: auto;
+  border-radius: 8px;
+  margin-left: 5px;
+
+  .title {
+    margin-bottom: 10px;
+    margin-left: 32px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 18px;
+    color: #333333;
+    text-align: left;
+    font-style: normal;
+  }
+
+  > .main {
+    background-color: #fff;
+    border-radius: 16px;
+
+    > .btn {
+      padding-top: 20px;
+      padding-right: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .chunkList {
+        display: flex;
+
+        > .chunk {
+          margin-left: 10px;
+        }
+      }
+
+    }
+
+    > .planInfo {
+      margin-top: 17px;
+      padding-bottom: 20px;
+      display: flex;
+      align-items: center;
+
+      > .img {
+        margin-left: 24px;
+        width: 64px;
+        height: 64px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+      }
+
+      .info {
+        margin-left: 11px;
+
+        .name {
+          margin-bottom: 14px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 18px;
+          color: #333333;
+          line-height: 25px;
+          text-align: left;
+          font-style: normal;
+        }
+
+        .remark {
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 16px;
+          color: #999999;
+          line-height: 25px;
+          text-align: left;
+          font-style: normal;
+        }
+      }
+    }
+
+    > .upload {
+      background-color: #fff;
+      border-radius: 16px;
+      padding: 12px 30px 0px;
+
+      > .title {
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      > .uploadMain {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        > .left {
+          > .smalltitle {
+            font-size: 18px;
+            color: #999999;
+            margin-bottom: 10px;
+          }
+
+          .line {
+            display: flex;
+            align-items: center;
+
+            .left {
+              border: 1px dashed #999999;
+              width: 64px;
+              height: 64px;
+
+              > img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .right {
+              margin-left: 15px;
+            }
+          }
+        }
+      }
+    }
+
+    > .form {
+      overflow: auto;
+      margin-top: 10px;
+      background-color: #fff;
+      border-radius: 16px;
+      width: 100%;
+      padding: 10px 20px;
+    }
+  }
+
+  > .rule {
+    padding: 30px 0;
+    margin-top: 10px;
+    background-color: #fff;
+    border-radius: 16px;
+
+    .line {
+      margin-left: 32px;
+      display: flex;
+
+      .name {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 18px;
+        color: #999999;
+        line-height: 25px;
+        text-align: left;
+        font-style: normal;
+      }
+
+      .value {
+        display: flex;
+        margin-left: 15px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 18px;
+        color: #333333;
+        line-height: 25px;
+        text-align: left;
+        font-style: normal;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/DataCenterOptions/settingMenu.vue b/src/views/DataCenterOptions/settingMenu.vue
new file mode 100644
index 0000000..c1c064b
--- /dev/null
+++ b/src/views/DataCenterOptions/settingMenu.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="settingMenu">
+    <div class="menu scrollable-box">
+      <div class="appInfo">
+        <div class="img" v-loading="imgLoading">
+          <template v-if="imgUrl">
+            <img :src="imgUrl" alt="" style="width: 64px; height: 64px"/>
+          </template>
+          <template v-if="!imgUrl">
+            <img src="./images/icon.png" alt="" style="width: 64px; height: 64px"/>
+          </template>
+        </div>
+        <div class="appName">{{ name }}</div>
+        <div class="version" v-if="code">编码：{{ code }}</div>
+      </div>
+      <div class="menuList">
+        <div class="item" v-for="(item, index) in settingMunu" :key="index" @click="menuClick(index, item)">
+          <div class="icon" :class="{ actived: index == menuActived }">
+            <svg-icon class="iconfont" :icon-class="item.icon" fill="currentColor"/>
+          </div>
+          <div class="title">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <router-view ref="routerChunk" :build="billid" @saveSuccess="saveSuccess" @saveSuccessInit="saveSuccessInit"
+                   @flashActive="flashActive"
+      ></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getApiModuleApi } from '@/api/apiChunks/index.js'
+import configData from './configData'
+// 应用信息
+import masterDataAdd from './masterDataAdd.vue'
+import request from '@/utils/request'
+
+export default {
+
+  data() {
+    return {
+      menuActived: 0,
+      settingMunu: configData.settingMenu,
+      query: this.$route.query,
+      name: '',
+      code: '',
+      imgUrl: '',
+      versionNumber: '',
+      imgLoading: false,
+      billid: ''
+    }
+  },
+  methods: {
+    //当新增完基本信息后
+    saveSuccessInit(res, fun) {
+      console.log(res, 'res')
+      this.billid = res.attribute.id
+      this.mdmCode = res.attribute.mdmCode
+      this.$refs.routerChunk.billid = this.billid
+      this.initEditFormData()
+      fun()
+    },
+    flashActive(val) {
+      this.menuActived = val
+    },
+    async initEditFormData() {
+      const res = await getApiModuleApi({
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'getMdm'
+      }, { id: this.billid })
+      if (res.status === '200') {
+        this.name = res.attribute.mdmName
+        this.code = res.attribute.mdmCode
+        //下载logo
+        this.imgLoading = true
+        return request({
+          url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + res.attribute.mdmLogo,
+          method: 'get',
+          responseType: 'arraybuffer'
+        }).then((res) => {
+          this.imgLoading = false
+          if (!res.byteLength) {
+            this.imgUrl = false
+            return
+          }
+          this.imgUrl =
+            'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+        })
+      }
+    },
+    //菜单点击事件
+    saveSuccess() {
+      this.initEditFormData()
+    },
+    menuClick(index, item) {
+      console.log(index, item)
+      if (index !== 0 && !this.billid) {
+        this.$vmNews('当前为新增请先新增后再跳转该模块')
+        return
+      }
+      if (item.path && !this.$route.path.includes(item.path)) {
+        this.menuActived = index
+        this.$set(this.query, 'id', this.billid)
+        this.$set(this.query, 'mdmCode', this.mdmCode)
+        this.$router.replace({
+          path: item.path,
+          query: this.query
+        })
+      }
+    }
+  },
+  components: {
+    masterDataAdd
+  },
+  mounted() {
+    if (this.$route.query.flag !== 'new') {
+      this.billid = this.$route.query.id
+      this.mdmCode = this.$route.query.mdmCode
+      this.initEditFormData()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.settingMenu {
+  width: 100%;
+  display: flex;
+  position: relative;
+  background: #f5f5f5 !important;
+  .menu {
+    position: fixed;
+    width: 162px;
+    height: calc(100% - 75px);
+    //margin-right: 1%;
+    background-color: #fff;
+    border-radius: 8px;
+    margin-top: 10px;
+
+
+    .appInfo {
+      padding: 10px 0;
+      border-bottom: 1px solid #f3f3f3;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      > .img {
+        width: 64px;
+        height: 64px;
+      }
+
+      .appName {
+        margin-top: 8px;
+        font-weight: 600;
+        font-size: 18px;
+      }
+
+      .version {
+        margin-top: 10px;
+        font-size: 12px;
+        padding: 1px 2px;
+        color: #ff8b0f;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        line-height: 20px;
+        text-align: left;
+        font-style: normal;
+      }
+    }
+
+    .menuList {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .item {
+        margin-bottom: 20px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        > .icon {
+          width: 50px;
+          height: 50px;
+          text-align: center;
+          border-radius: 12px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          > .iconfont {
+            font-weight: 300;
+            font-size: 35px;
+            color: #000;
+          }
+
+          &:hover {
+            background-color: #1478f6 !important;
+
+            > .iconfont {
+              color: #fff !important;
+            }
+          }
+        }
+
+        > .title {
+          margin-top: 10px;
+          color: #333333;
+          font-size: 16px;
+          font-weight: 600;
+          user-select: none;
+        }
+      }
+
+      .actived {
+        background-color: #1478f6 !important;
+
+        > .iconfont {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+
+  .content {
+    margin-top: 10px;
+    margin-left: 170px;
+    margin-right: 10px;
+    flex: 1;
+    width: calc(100% - 205px);
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/src/views/masterDataOptions/index.vue b/src/views/masterDataOptions/index.vue
index 53eb2ee..00d1583 100644
--- a/src/views/masterDataOptions/index.vue
+++ b/src/views/masterDataOptions/index.vue
@@ -10,12 +10,12 @@
               <i slot="suffix" class="el-input__icon el-icon-search" @click="submitsearchForm"></i>
             </el-input>
           </div>
-          <div class="chunk">
-            <el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">
-              <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
-              </el-option>
-            </el-select>
-          </div>
+          <!--          <div class="chunk">-->
+          <!--            <el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">-->
+          <!--              <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">-->
+          <!--              </el-option>-->
+          <!--            </el-select>-->
+          <!--          </div>-->
         </div>
       </div>
       <div class="right" style="display: flex;align-items: center">
@@ -43,7 +43,7 @@
               <div class="tableName">
                 <div class="name">{{ row.mdmName }}</div>
               </div>
-              <div class="tableType">档案</div>
+              <div class="tableType">{{ row.mdmType == 1 ? '档案' : '数据' }}</div>
               <div class="tableContent">
                 {{ row.remark }}
               </div>
@@ -192,14 +192,15 @@ export default {
     async initMainTableData(obj = {}) {
       this.refreshLoading = true
       const res = await getApiModuleApi(
-        {
-          tl: 'mdmModuleService',
-          as: '',
-          dj: 'queryMdm'
-        },
-        {
-          ...obj
-        }
+          {
+            tl: 'mdmModuleService',
+            as: '',
+            dj: 'queryMdm'
+          },
+          {
+            ...obj,
+            mdmType: 1
+          }
       )
       this.refreshLoading = false
       if (res.status == 200) {
@@ -215,7 +216,7 @@ export default {
             el.imgLoading = false
             if (!res.byteLength) return
             let tempImgUrl =
-              'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+                'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
             this.$set(el, 'imgUrl', tempImgUrl)
           })
         })
diff --git a/src/views/masterDataOptions/masterDataAdd.vue b/src/views/masterDataOptions/masterDataAdd.vue
index d7148b0..1be220c 100644
--- a/src/views/masterDataOptions/masterDataAdd.vue
+++ b/src/views/masterDataOptions/masterDataAdd.vue
@@ -4,7 +4,7 @@
 
     <div class="main">
       <div class="btn">
-        <div class="title" style="margin-top: 0">主数据信息</div>
+        <div class="title" style="margin-top: 0">{{ bigTitle }}</div>
         <div class="chunkList">
           <div class="chunk">
           </div>
@@ -116,7 +116,9 @@ export default {
       saveLoading: false,
       showForm: false,
       billid: '',
-      receiptsTableData: []
+      receiptsTableData: [],
+      bigTitle: '主数据信息',
+      mdmType: 1
     }
   },
   methods: {
@@ -183,7 +185,7 @@ export default {
       if (!this.billid) {
         this.openLoading('submit')
         const res = await authApi('mdmModuleService', '', 'saveMdm', '', {
-          updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: 1
+          updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: this.mdmType
         })
         this.$vmNews('保存成功', 'success')
         this.saveLoading = false
@@ -194,7 +196,7 @@ export default {
         const res = await authApi('mdmModuleService', '', 'updateMdm', '', {
           ...this.ruleForm,
           mdmLogo: this.appLogo,
-          mdmType: 1
+          mdmType: this.mdmType
         })
         this.$vmNews('保存成功', 'success')
         this.saveLoading = false
@@ -286,6 +288,13 @@ export default {
       this.initEditFormData()
       this.getRuleHandle()
     }
+    if (this.$route.query.type) {
+      this.bigTitle = '数据中心信息'
+      this.mdmType = 2
+    } else {
+      this.bigTitle = '主数据信息'
+      this.mdmType = 1
+    }
   }
 }
 </script>
diff --git a/vue.config.js b/vue.config.js
index 07475e0..01f78c5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -42,11 +42,11 @@ module.exports = {
         // target: `http://hzya.ufyct.com:9067/`,
         // target: `http://ufidahz.com.cn:9067/`,
         // target: `http://127.0.0.1:9081/`,
-        // target: `http://192.168.2.78:9999`,
+        target: `http://192.168.2.78:9999`,
         // target: `http://192.168.2.85:9999`,
         // target: `http://192.168.2.78:8080`,
-        //target: `http://192.168.2.78:9999`,
-         target: `http://192.168.2.185:9999`,
+        // target: `http://192.168.2.78:9999`,
+        // target: `http://192.168.2.185:9999`,
         // target: `http://192.168.2.83:9999`,
         changeOrigin: true,
         pathRewrite: {