middleground_code_v2/src/views/masterDataOptions/dataOrigin/index.vue

<script src="configData.js"></script>
<template>
  <div class="wrap">
    <div class="btn">
      <div class="chunk">
        <el-button
            icon="el-icon-back"
            @click="
            $router.replace({ path: '/integrationOption/masterDataOptions' })
          "
        >返回
        </el-button
        >
      </div>
      <div class="chunk">
        <el-button
            icon="el-icon-first-aid-kit"
            type="primary"
            @click="saveHandle"
            :loading="saveLoading"
        >保存
        </el-button
        >
      </div>
    </div>
    <div class="main">
      <div class="left" v-loading="mainLoading">
        <div class="title">
          数据表
        </div>
        <div class="receipts">
          <div class="label">单据规则:</div>
          <div class="receiptsList" @click="openReceiptsHandle">
            <template v-if="!receiptsShowTableData.length">点击选择单据规则</template>
            <template v-else>
              <div class="receiptsItem" v-for="(item,index) in receiptsShowTableData">{{ item.dbValue }}</div>
            </template>
          </div>
        </div>
        <div class="mainTable">
          <BaseTable
              ref="mainTable"
              :tableData="mainTableData"
              :tabLoading="mainTabLoading"
              :tableColumn="mainTableColumn"
              :border="false"
              :funData="mainFunData"
              tableHeight="25vh"
              :highlightCurrent="true"
              @radioChange="mainOnClick"
              @onFunc="mainOnFunc"
          >
            <template #dbType="{row}">
              {{ row.dbType === '1' ? '主表' : '子表' }}
            </template>
          </BaseTable>
          <div class="mainAddRow">
            <el-link
                type="primary"
                @click="addMainAddRow"
                :underline="false"
            >+ 添加
            </el-link
            >
          </div>
        </div>
        <div class="title">
          表字段
        </div>
        <div class="activedTable">
          <BaseTable
              ref="activedTable"
              :tableData="activedTableData"
              :tabLoading="activedTabLoading"
              :tableColumn="activedTableColumn"
              :border="false"
              :funData="activedFunData"
              tableHeight="30vh"
              :highlightCurrent="true"
              @radioChange="activedOnClick"
              @onFunc="activedOnFunc"
          >
            <template #filedType="{row}">
              {{ dataTypeDist[row.filedType] }}
            </template>
          </BaseTable>
          <div class="mainAddRow" v-if="mainActivedRow">
            <el-link
                type="primary"
                @click="activedAddRow"
                :underline="false"
            >+ 添加
            </el-link
            >
          </div>
        </div>
      </div v-loading=>
      <div class="right">
        <template v-if="activedTableRow">
          <div class="btn">
            <el-button
                type="primary"
                @click="activedRowSaveHandle"
            >暂存
            </el-button>
          </div>
          <div class="title">
            表字段
          </div>
          <div class="optionForm">
            <baseNewForm
                ref="optionForm"
                :spanNumber="24"
                :isFunBtn="false"
                :formRow="optionFormRow"
                :ruleForm="optionRuleForm"
                :labelPosition="'left'"
                @onSelect="selectChangeHanlde"
                @inputBlur="optionFormInputBlur"
                @onSubmit="optionOnSubmit"
                :disabled="sonFormDisabled"
            >
            </baseNewForm>
            <baseNewForm
                ref="typeOptionForm"
                :spanNumber="24"
                :isFunBtn="false"
                :formRow="typeOptionFormRow"
                :ruleForm="typeOptionRuleForm"
                :labelPosition="'left'"
                @onSelect="typeSelectChangeHanlde"
                @onSubmit="typeOptionOnSubmit"
                :disabled="sonFormDisabled"
            >
            </baseNewForm>
            <baseNewForm
                ref="propertyForm"
                :spanNumber="24"
                :isFunBtn="false"
                :formRow="propertyFormRow"
                :ruleForm="propertyRuleForm"
                :labelPosition="'left'"
                @onSubmit="propertyOnSubmit"
                :disabled="sonFormDisabled"

            >
            </baseNewForm>
          </div>
          <div class="smtitle">
            可选控间属性
          </div>
          <div class="checkBoxList">
            <el-checkbox-group :disabled="sonFormDisabled" v-model="propertyActiveList"
                               @change="propertyActiveListChangeHanlde"
            >
              <el-checkbox v-for="(item,index) in propertyList" :label="item.id" :key="item.id">{{
                  item.label
                }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </template>
        <template v-else-if="mainActivedRow">
          <div class="btn">
            <el-button
                type="primary"
                @click="mainActivedRowSaveHandle"
            >暂存
            </el-button>
          </div>
          <div class="title">
            数据表
          </div>
          <div class="optionForm">
            <baseNewForm
                ref="mainOptionForm"
                :spanNumber="24"
                :isFunBtn="false"
                :formRow="mainOptionRow"
                :ruleForm="mainOptionForm"
                :labelPosition="'left'"
                @onSubmit="mainOptionOnSubmit"
            >
            </baseNewForm>
          </div>
        </template>
      </div>
    </div>
    <baseDialog v-model="receiptsShow" width="50%" @confirm="receiptsConfirm">
      <div class="receiptsTable">
        <BaseTable
            ref="receiptsTable"
            :showIndex="true"
            :tableData="receiptsTableData"
            :tableColumn="receiptsTableColumn"
            :border="false"
            :funData="receiptsFunData"
            tableHeight="30vh"
            @onFunc="receiptsOnFunc"
        >
          <template #dbType="{row}">
            <el-select v-model="row['dbType']" placeholder="请选择"
                       @change="(val)=>ruleTypeSeleceChangHandle(val,row)"
            >
              <el-option
                  v-for="item in ruleTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
          <template #dbValue="{row}">
            <div v-if="!row['dbType']">请选择格式类型</div>
            <div v-else-if="row['dbType'] === '1'">{{ row.dbValue }}</div>
            <div v-else-if="row['dbType'] === '2'">
              <el-input v-model="row.dbValue"></el-input>
            </div>
            <div v-else-if="row['dbType'] === '3'">
              <el-select v-model="row.dbValue" placeholder="请选择">
                <el-option
                    v-for="item in dateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div v-else-if="row['dbType'] === '4'">
              <el-input v-model="row.dbValue" @input="(val)=>integerNumber(val,row)"></el-input>
            </div>
          </template>
        </BaseTable>
        <div class="receiptsAddRow">
          <el-link
              type="primary"
              @click="receiptsAddRow"
              :underline="false"
          >+ 添加
          </el-link
          >
        </div>
      </div>
    </baseDialog>
  </div>
</template>

<script>
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
import configData from './configData'
import { getApiModuleApi } from '@/api/apiChunks/index.js'
import baseNewForm from '../compoments/baseNewForm'
import { deepClone } from '@/utils/index.js'
import baseDialog from '@/views/integrationOption/compoments/baseDialog'

export default {
  data() {
    return {}
  },
  methods: {},
  components: {
    baseNewForm,
    BaseTable,
    baseDialog
  },
  created() {
  },
  watch: {},
  computed: {}
}
</script>

<style scoped lang="scss">
::v-deep .el-button {
  border-radius: 16px;
}

::v-deep .el-form-item {
  display: block !important;
}
</style>