diff --git a/package.json b/package.json
index 08000df..a84b5cb 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "vue-meta": "2.4.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.17.0"
   },
diff --git a/src/views/masterDataOptions/compoments/baseNewForm.vue b/src/views/masterDataOptions/compoments/baseNewForm.vue
index 2670cfa..183c7ff 100644
--- a/src/views/masterDataOptions/compoments/baseNewForm.vue
+++ b/src/views/masterDataOptions/compoments/baseNewForm.vue
@@ -104,7 +104,7 @@
                 @input="(val) => limitPhoneNum(val, ruleForm, row.id)"
                 :maxlength="row.maxlength ? row.maxlength * 1 : 50"
                 :min="1"
-                :max="row.max ? row.max : 99999"
+                :max="row.max ? row.max : 255"
                 :label="!row.placeholder ? '描述文字' : row.placeholder"
             >
               <template slot="append" v-if="row.message">{{ row.message }}</template>
diff --git a/src/views/masterDataOptions/dataOrigin/configData.js b/src/views/masterDataOptions/dataOrigin/configData.js
index 57b4e64..5e00452 100644
--- a/src/views/masterDataOptions/dataOrigin/configData.js
+++ b/src/views/masterDataOptions/dataOrigin/configData.js
@@ -73,6 +73,7 @@ const optionFormRow = [
         type: "num",
         title: "长度",
         id: "filedLength",
+        max:255,
         row: 24,
         disabled: false,
         required: true,
diff --git a/src/views/masterDataOptions/dataOrigin/images/删除.png b/src/views/masterDataOptions/dataOrigin/images/删除.png
new file mode 100644
index 0000000..7370c1d
Binary files /dev/null and b/src/views/masterDataOptions/dataOrigin/images/删除.png differ
diff --git a/src/views/masterDataOptions/dataOrigin/images/设置.png b/src/views/masterDataOptions/dataOrigin/images/设置.png
new file mode 100644
index 0000000..eeae824
Binary files /dev/null and b/src/views/masterDataOptions/dataOrigin/images/设置.png differ
diff --git a/src/views/masterDataOptions/dataOrigin/index.vue b/src/views/masterDataOptions/dataOrigin/index.vue
index d04c6b8..1af6c79 100644
--- a/src/views/masterDataOptions/dataOrigin/index.vue
+++ b/src/views/masterDataOptions/dataOrigin/index.vue
@@ -1,271 +1,505 @@
-<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 class="mainTable">
+      <div class="bigTitle">数据表</div>
+      <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>
-    <baseDialog v-model="receiptsShow" width="50%" @confirm="receiptsConfirm">
-      <div class="receiptsTable">
+      <div class="table">
         <BaseTable
-            ref="receiptsTable"
-            :showIndex="true"
-            :tableData="receiptsTableData"
-            :tableColumn="receiptsTableColumn"
+            ref="mainTable"
+            :tableData="mainTableData"
+            :tabLoading="mainTabLoading"
+            :tableColumn="mainTableColumn"
             :border="false"
-            :funData="receiptsFunData"
-            tableHeight="30vh"
-            @onFunc="receiptsOnFunc"
+            tableHeight="68vh"
+            :highlightCurrent="true"
+            @radioChange="mainOnClick"
         >
           <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>
+            {{ row.dbType === '1' ? '主表' : '子表' }}
           </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>
+          <template #operation="{row}">
+            <div class="btnList">
+              <div class="settingBtn" @click="mainTableEditHandle(row)">
+                <img src="./images/设置.png" alt="">
+              </div>
+              <div class="deleBtn" @click="mainDeleOnFunc">
+                <img src="./images/删除.png" alt="">
+              </div>
             </div>
           </template>
         </BaseTable>
-        <div class="receiptsAddRow">
+        <div class="mainAddRow">
           <el-link
               type="primary"
-              @click="receiptsAddRow"
+              @click="addMainAddRow"
               :underline="false"
-          >+ 添加
+          >+ 数据表添加
           </el-link
           >
         </div>
       </div>
-    </baseDialog>
+    </div>
+    <!--    表字段-->
+    <div class="sonTable">
+      <div class="bigTitle">表字段</div>
+      <div class="table">
+        <BaseTable
+            ref="activedTable"
+            :tableData="activedTableData"
+            :tabLoading="activedTabLoading"
+            :tableColumn="activedTableColumn"
+            :border="false"
+            tableHeight="73vh"
+            :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">
+          <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="'30%'"
+        @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 {}
+    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 => {
+        this.serviceOptions.push({
+          id: item.dbName,
+          label: item.remark
+        })
+      })
+    },
+    // 主表上方表格行点击
+    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) {
+      this.$confirm('确定删除？')
+          .then(async(_) => {
+            this.openLoading('submit')
+            const res = await authApi('mdmModuleService', '', 'deleteMdmDb', '', {
+              mdmId: this.$route.query.id,
+              ...row
+            })
+            this.$vmNews('删除成功！', 'success')
+            this.getMainTableHandle()
+          })
+          .catch((_) => {
+          })
+    },
+    //数据表添加按钮
+    addMainAddRow() {
+      if (!this.receiptsTableData.length) {
+        this.$vmNews('请添加单据规则后，再添加数据表。')
+      }
+      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.$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.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']
+          let form = this.$refs.mainTable.mainOptionForm
+          //判断黑名单
+          if (blacklist.includes(form.dbName)) {
+            this.$vmNews('当前英文名为系统默认字段，请修改')
+            return
+          }
+          //判断是主表还是子表 "dbType":"2",//类型 1、主表 2、明细
+          if (this.mainTableData.length && !form.id) {
+            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()
+            }
+          } 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()
+            }
+          }
+
+        } else {
+          return false
+        }
+      })
+    },
+    //表字段保存
+    sonTableSaveHandle() {
+      this.$refs.sonTable.$refs.optionForm.submitForm()
+
+    },
+    //获取数据表
+    async getMainTableHandle() {
+      this.openLoading('detail')
+      const res = await authApi('mdmModuleService', '', 'queryMdmDb', '', {
+        mdmId: this.$route.query.id
+      })
+      this.mainTableData = res.attribute
+    },
+    //表字段校验通过正式开始保存
+    async sonSaveHandle(params) {
+      console.log('进来了')
+      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)
+      }
+
+    }
   },
-  methods: {},
   components: {
+    baseRightDialog, baseForm,
     baseNewForm,
     BaseTable,
-    baseDialog
+    baseDialog,
+    ruleAddTable,
+    mainTable,
+    sonTable
   },
   created() {
+    //调用单据规则
+    this.getRuleHandle()
+    //调用获取数据表
+    this.getMainTableHandle()
+    //表字段的数据类型下啦获取
+    this.initSelect()
+    //调用左侧选中状态
+    this.$emit('flashActive', 1)
   },
   watch: {},
   computed: {}
@@ -280,4 +514,129 @@ export default {
 ::v-deep .el-form-item {
   display: block !important;
 }
+
+.wrap {
+  display: flex;
+  background-color: #fff;
+  margin-left: 15px;
+  border-radius: 8px;
+
+  .mainAddRow {
+    margin-top: 30px;
+    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: 25px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .mainTable {
+    flex: 1;
+    padding: 30px 20px 20px;
+    border-right: 1px solid #EBEBEB;;
+
+    .rule {
+      margin-top: 30px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .name {
+        margin-right: 20px;
+        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;
+      }
+
+      .btn {
+        margin-left: 15px;
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        background: #EBEBED;
+        border-radius: 6px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        > img {
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+
+    .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: 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/masterDataOptions/dataOrigin/indexOld.vue b/src/views/masterDataOptions/dataOrigin/indexOld.vue
index 3cf176d..159dba0 100644
--- a/src/views/masterDataOptions/dataOrigin/indexOld.vue
+++ b/src/views/masterDataOptions/dataOrigin/indexOld.vue
@@ -1199,6 +1199,8 @@ export default {
 
 }
 
+</style>
+<style>
 .receiptsAddRow {
   margin-top: 30px;
   border: 1px dotted #ccc;
diff --git a/src/views/masterDataOptions/dataOrigin/mainTable.vue b/src/views/masterDataOptions/dataOrigin/mainTable.vue
new file mode 100644
index 0000000..06d975d
--- /dev/null
+++ b/src/views/masterDataOptions/dataOrigin/mainTable.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="mainTable">
+    <baseNewForm
+        ref="mainOptionForm"
+        :spanNumber="24"
+        :isFunBtn="false"
+        :formRow="mainOptionRow"
+        :ruleForm="mainOptionForm"
+        :labelPosition="'left'"
+        @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: {}
+    }
+  },
+  methods: {
+    mainOptionOnSubmit() {
+
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/masterDataOptions/dataOrigin/ruleAddTable.vue b/src/views/masterDataOptions/dataOrigin/ruleAddTable.vue
new file mode 100644
index 0000000..6898db0
--- /dev/null
+++ b/src/views/masterDataOptions/dataOrigin/ruleAddTable.vue
@@ -0,0 +1,134 @@
+<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="请选择">
+            <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" 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'
+        }
+      ],//单据规则表单
+      ruleTypeOptions: [
+        {
+          label: '连接符号',
+          value: '1'
+        }, {
+          label: '字符串',
+          value: '2'
+        }, {
+          label: '日期',
+          value: '3'
+        }, {
+          label: '流水号',
+          value: '4'
+        }
+      ],//单据规则下啦
+      receiptsFunData: [
+        {
+          text: '删除',
+          color: 'red'
+        }
+      ]//单据规则按钮
+    }
+  },
+  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">
+
+</style>
diff --git a/src/views/masterDataOptions/dataOrigin/sonTable.vue b/src/views/masterDataOptions/dataOrigin/sonTable.vue
new file mode 100644
index 0000000..50bc4ad
--- /dev/null
+++ b/src/views/masterDataOptions/dataOrigin/sonTable.vue
@@ -0,0 +1,720 @@
+<template>
+  <div class="sonTable">
+    <div class="optionForm">
+      <baseNewForm
+          ref="optionForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="optionFormRow"
+          :ruleForm="optionRuleForm"
+          :labelPosition="'left'"
+          @onSelect="selectChangeHanlde"
+          @inputBlur="optionFormInputBlur"
+          @onSubmit="optionOnSubmit"
+      >
+      </baseNewForm>
+      <baseNewForm
+          ref="typeOptionForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="typeOptionFormRow"
+          :ruleForm="typeOptionRuleForm"
+          :labelPosition="'left'"
+          @onSelect="typeSelectChangeHanlde"
+          @onSubmit="typeOptionOnSubmit"
+      >
+      </baseNewForm>
+      <baseNewForm
+          ref="propertyForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="propertyFormRow"
+          :ruleForm="propertyRuleForm"
+          :labelPosition="'left'"
+          @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 {
+      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-zA-Z][a-zA-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' }, true)
+        }
+        this.selectChangeHanlde(this.optionRuleForm.type, '', '', { id: 'type' }, 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)
+          })
+        }
+      }
+    },
+    //表单输入框失焦事件（为了让中文名称可以给显示名）
+    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) {
+          const res = await getApiModuleApi({
+            tl: 'mdmModuleService',
+            as: '',
+            dj: 'queryMdmServiceField'
+          }, { mdmId: this.$route.query.id, dbId: this.mainTempClick.id })
+          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']
+      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
+      }
+      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: #000;
+  font-weight: 600;
+  padding: 20px 0;
+  border-top: 1px solid #EBEBEB;
+}
+
+.checkBoxList {
+  padding-bottom: 50px;
+}
+</style>
diff --git a/src/views/masterDataOptions/displayInfo/images/删除.png b/src/views/masterDataOptions/displayInfo/images/删除.png
new file mode 100644
index 0000000..7370c1d
Binary files /dev/null and b/src/views/masterDataOptions/displayInfo/images/删除.png differ
diff --git a/src/views/masterDataOptions/displayInfo/images/设置.png b/src/views/masterDataOptions/displayInfo/images/设置.png
new file mode 100644
index 0000000..9d7049e
Binary files /dev/null and b/src/views/masterDataOptions/displayInfo/images/设置.png differ
diff --git a/src/views/masterDataOptions/displayInfo/index.vue b/src/views/masterDataOptions/displayInfo/index.vue
index efa6d18..9b1db0a 100644
--- a/src/views/masterDataOptions/displayInfo/index.vue
+++ b/src/views/masterDataOptions/displayInfo/index.vue
@@ -3,8 +3,8 @@
     <div class="btn">
       <div class="chunk">
         <el-button
-            icon="el-icon-back"
-            @click="
+          icon="el-icon-back"
+          @click="
             $router.replace({ path: '/integrationOption/masterDataOptions' })
           "
         >返回
@@ -13,10 +13,10 @@
       </div>
       <div class="chunk">
         <el-button
-            icon="el-icon-first-aid-kit"
-            type="primary"
-            @click="saveHandle"
-            :loading="saveLoading"
+          icon="el-icon-first-aid-kit"
+          type="primary"
+          @click="saveHandle"
+          :loading="saveLoading"
         >保存
         </el-button
         >
@@ -32,342 +32,349 @@
       </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">
+          ref="optionForm"
+          :spanNumber="24"
+          :isFunBtn="false"
+          :formRow="formRow"
+          :ruleForm="ruleForm"
+          :labelPosition="'right'"
+          labelWidth="100px"
+          @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 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="downBtn">
-            <el-button type="primary" icon="el-icon-bottom" @click="downHanlde"
-                       :disabled="rightActived.length !==1"></el-button>
+          <div class="showCheckBoxList">
+            <div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="item.viewFiled">
+              <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="item.viewFiled">
+              <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="item.viewFiled">
+              <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="item.viewFiled">
+              <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="item.viewFiled">
+              <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="item.buttonType">
+              <div class="name">{{ item.name }}</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <!--     -->
+    <base-right-dialog
+      ref="mainTableAddtDialog"
+      :footerShow="true"
+      :dialogVisible.sync="mainTableDialogShow"
+      :title="activeTitle + '设置'"
+      @handleClose="mainTableDialogShow=false"
+      :submitShow="true"
+      :size="'50%'"
+      @handleConfirmClick="mainTableSaveHandle"
+    >
+      <div class="mainTable">
+        <settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
+      </div>
+    </base-right-dialog>
   </div>
 </template>
 <script>
-import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
-import {getApiModuleApi} from "@/api/apiChunks/index.js";
+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",
+  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,
+              type: 'select',
+              title: '显示字段',
+              id: 'viewFiled',
+              row: 6,
               disabled: false,
               required: true,
               fontSize: 16,
-              options: [],
+              options: []
             },
             {
-              type: "select",
-              title: "上级id字段",
-              id: "upIdFiled",
-              row: 12,
+              type: 'select',
+              title: '上级id字段',
+              id: 'upIdFiled',
+              row: 6,
               disabled: false,
               required: true,
               fontSize: 16,
-              options: [],
-            },
+              options: []
+            }
           ]
         }
       ],
       ruleForm: {},
-      activeIndex: "1",
-      contentFormArr: [],
-      data: [],
-      rightActived: [],
-      addFiled: [],
-      dbAddFiled: [],
-      editFiled: [],
-      dbEditFiled: [],
-      showFiled: [],
-      dbShowFiled: [],
-      queryFiled: [],
-      dbQueryFiled: [],
-      listFiled: [],
-      dbListFiled: [],
+      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]
+      }//字典
     }
   },
   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"
+        tl: 'mdmModuleService',
+        as: '',
+        dj: 'queryMdmMainDBField'
       }, {
         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,
+            id: item.enName
           })
           this.formRow[0].elCol[0].options.push({
             label: item.chName,
-            id: item.enName,
+            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
-      }
-
+    //设置保存成功
+    saveSuccessEmit() {
+      this.mainTableDialogShow = false
+      this.getAllField()
     },
     //验证通过
     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
+      if (this.ruleForm.id) {
+        this.openLoading('submit')
+        const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
+          ...this.ruleForm,
+          mdmId: this.$route.query.id,
+          viewName: this.displayType
         })
-      })
-    },
-    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
-          }
+        this.$vmNews('保存成功', 'success')
+        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.getRuleForm()
+      }
+
+    },
+    //获取类型
+    async getRuleForm() {
+      this.openLoading('detail')
+      this.ruleForm = {}
+      const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
+        mdmId: this.$route.query.id
       })
+      this.ruleForm = res.attribute
+      this.displayType = this.ruleForm.viewName
+    },
+    //保存
+    saveHandle() {
+      if (this.displayType === '1') {
+        this.$refs.optionForm.submitForm()
+      } else {
+        this.onSubmit()
+      }
+    },
+    //点击设置
+    settingHandle(key) {
+      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
+      })
+      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: {
-    baseNewForm
+    baseRightDialog,
+    baseNewForm,
+    settingChunk
   },
   created() {
-    this.init()
+    //获取显示类型和显示字段
+    this.getRuleForm()
+    //获取下啦
     this.initSelect()
-    this.$emit("flashActive", 2)
+    //获取所有显示字段
+    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;
 }
@@ -384,6 +391,7 @@ export default {
 ::v-deep .el-transfer-panel__list {
   height: 50vh;
 }
+
 ::v-deep .el-transfer-panel__body {
   height: 50vh;
 }
@@ -424,15 +432,94 @@ export default {
     }
 
     > .content {
-      margin-top: 30px;
+      margin-top: 3vh;
       display: flex;
       align-items: center;
 
-      .buttonList {
-        margin-left: 50px;
+      .showItem {
+        flex: 1;
+        margin-left: 8px;
+        height: 70vh;
+        background: #FFFFFF;
+        border-radius: 8px;
+        border: 1px solid #EBEBEB;
+        padding: 14px 20px;
+        position: relative;
 
-        .downBtn {
-          margin-top: 30px;
+        .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: 140px;
+          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: 44px;
+              height: 44px;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .value {
+              margin-top: 10px;
+              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: 45vh;
+          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;
+          }
         }
       }
     }
diff --git a/src/views/masterDataOptions/displayInfo/indexOldCopy.vue b/src/views/masterDataOptions/displayInfo/indexOldCopy.vue
new file mode 100644
index 0000000..efa6d18
--- /dev/null
+++ b/src/views/masterDataOptions/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: 16px;
+}
+
+::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/masterDataOptions/displayInfo/settingChunk.vue b/src/views/masterDataOptions/displayInfo/settingChunk.vue
new file mode 100644
index 0000000..c21cab9
--- /dev/null
+++ b/src/views/masterDataOptions/displayInfo/settingChunk.vue
@@ -0,0 +1,290 @@
+<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]) {
+        this.openLoading('detail')
+        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>