drp-ui/src/views/material/basicFile/details.vue

<!-- 物料信息基础档案——详情 -->
<template>
  <div class="material-details">
    <!-- 操作栏 -->
    <!-- 基本信息栏 -->
    <div v-if="activeMainTab == 'material'">
      <el-row :gutter="10" class="mb10" v-if="!updateButtonGroup">
        <!-- 新增、修改、删除、复制 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleInster">新增</el-button>
            <el-button size="small" @click="handleBasicEdit">修改</el-button>
            <el-button size="small" @click="handleDel">删除</el-button>
            <el-button size="small" @click="handleCopy">复制</el-button>
          </el-button-group>
        </el-col>

        <!-- 查询、刷新、过滤 -->
        <el-col :span="1.5">
          <el-button-group>

            <el-dropdown size="small" @command="handleFilter">
              <el-button size="small">
                过滤<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
                <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-button size="small" @click="handleQuery">查询</el-button>
            <el-button size="small" @click="handleRefresh">刷新</el-button>

          </el-button-group>
        </el-col>

        <!-- 启用 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke">
              启用
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item>
                <el-dropdown-item :command="isInvoke(false)">停用</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button-group>
        </el-col>

        <!-- 申请单查询 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleQueryForm">申请单查询</el-button>
          </el-button-group>
        </el-col>

        <!-- 导入导出 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleImport">批量导入</el-button>
            <el-button size="small" @click="handleExport">批量导出</el-button>
          </el-button-group>
        </el-col>

      </el-row>

      <!-- 基本信息修改状态下—— 保存、保存新增、更新导入、取消 -->
      <el-row :gutter="10" class="mb10" v-else>
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleSave">保存</el-button>
            <el-button size="small" @click="handleSaveAdd" :disabled="true">保存新增</el-button>
            <el-button size="small" @click="handleUpdateImport">更新导入</el-button>
          </el-button-group>
        </el-col>

        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleCancel">取消</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>

    <!-- 其他标签页操作  修改、删除 -->
    <el-row :gutter="10" class="mb10" v-show="activeMainTab != 'material'">
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleEdit">修改</el-button>
          <el-button size="small" @click="handleDel">删除</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="small" @click="handleRefresh">刷新</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <el-card>
      <!-- 返回   切换   附件管理 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <!-- :disabled="headerParam.isEdit" -->
          <el-button size="small" @click="handleBack" :disabled="updateButtonGroup">返回</el-button>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <!-- 附件管理 -->
          <el-button-group>
            <el-button size="small" icon="el-icon-paperclip" @click="handleFile"></el-button>
          </el-button-group>

          <!-- 切换 -->
          <el-button-group>
            <el-button size="small" icon="el-icon-d-arrow-left" @click="handleChangePage('first')"></el-button>
            <el-button size="small" icon="el-icon-arrow-left" @click="handleChangePage('pre')"></el-button>
            <el-button size="small" icon="el-icon-arrow-right" @click="handleChangePage('next')"></el-button>
            <el-button size="small" icon="el-icon-d-arrow-right" @click="handleChangePage('end')"></el-button>
          </el-button-group>
        </el-col>
      </el-row>

      <div class="md-content">
        <el-form :inline="true" label-position="right" :model="basicData.value">
          <!-- <el-form-item label="所属组织"></el-form-item> -->
          <el-form-item label="物料编码">
            <el-input v-model="basicData.value.code" size="small" placeholder="物料编码"></el-input>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="basicData.value.name" size="small" placeholder="物料名称"></el-input>
          </el-form-item>
          <el-form-item label="英文名称">
            <el-input v-model="basicData.value.enName" size="small" placeholder="英文名称"></el-input>
          </el-form-item>
          <!-- <el-form-item label="版本号"></el-form-item> -->
        </el-form>

        <dr-tabs :tabList="detailsTabs" :handleTabClick="handleMainTabClick">
          <template #tabContent>

            <div class="md-basic">

              <!-- 主信息 -->
              <div class="md-main">

                <!-- 基本信息展示表单 -->
                <el-form v-if="activeMainTab == 'material'" :inline="true" label-position="right"
                  :hide-required-asterisk="true" :model="basicData.value">

                  <el-row :gutter="10">
                    <el-col :span="8" v-for="f in basicData.form" style="text-align: right;">
                      <template v-if="f.show">
                        <!--  :disabled="!(headerParam.isEdit && f.edit)" -->
                        <!-- 多选框 -->
                        <el-form-item v-if="f.attribute == 'checkbox'" style="text-align: left;">
                          <el-checkbox :label="f.name" name="type" v-model="basicData.value[f.prop]"
                            :disabled="!updateButtonGroup">
                          </el-checkbox>
                        </el-form-item>

                        <!-- 下拉框 -->
                        <el-form-item v-else-if="f.attribute == 'select'" :label="f.name"
                          :id="(updateButtonGroup && f.apiUrl) ? 'selected' : ''">

                          <el-select v-model="basicData.value[`${f.prop}Label`]" :placeholder="f.name"
                            :key="basicData.value[f.prop]" :disabled="!updateButtonGroup"
                            @focus="f.apiUrl && handleQueryMore(f, '', { name: 'basicData', prop: f.prop })">
                            <el-option v-if="f.dictId" v-for="d in f.dictValue" :key="d.dictValue" :label="d.dictLabel"
                              :value="d.dictValue">
                            </el-option>

                            <div slot="empty"></div>
                          </el-select>

                        </el-form-item>

                        <el-form-item v-else-if="f.attribute == 'image'" :label="f.name">
                          <el-image :src="basicData.value[f.prop]" fit="contain">
                          </el-image>

                        </el-form-item>

                        <!--attribute 文本 数字 文本域 为null -->
                        <el-form-item v-else :label="f.name">
                          <el-input size="small" v-model="basicData.value[f.prop]" :type="f.attribute || 'text'"
                            :readonly="!updateButtonGroup" :placeholder="f.name">
                          </el-input>
                        </el-form-item>
                      </template>
                    </el-col>
                  </el-row>

                </el-form>

                <!-- 其他展示为列表 -->
                <el-table v-else :data="mainMsg.value" @cell-dblclick="handleMaindbClick"
                  @selection-change="handleMainChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column type="index" label="序号" width="55" align="center" />
                  <el-table-column v-for="m in  mainMsg.form" v-if="m.show" :label="m.name" align="center" :prop="m.prop"
                    show-overflow-tooltip />
                </el-table>

              </div>

              <!-- 副信息 -->
              <div class="md-vice">

                <dr-tabs v-if="activeMainTab == 'material'" :tabList="basicMessage" :handleTabClick="handleViceTabClick">

                  <template #tabContent>

                    <el-form v-if="activeViceTab == 'material_medcine'" :inline="true" label-position="right"
                      :hide-required-asterisk="true" :model="medcineData.value" class="md-vice-content">

                      <el-row :gutter="10">
                        <el-col :span="8" v-for="m in medcineData.form" style="text-align: right;">

                          <template v-if="m.show">

                            <!-- 多选框 -->
                            <el-form-item v-if="m.attribute == 'checkbox'">
                              <el-checkbox :label="m.name" name="type" v-model="medcineData.value[m.prop]"
                                :disabled="!updateButtonGroup">
                              </el-checkbox>
                            </el-form-item>

                            <!-- 下拉框 -->
                            <el-form-item v-else-if="m.attribute == 'select'" :label="m.name">

                              <el-select v-model="medcineData.value[`${m.prop}Label`]" :placeholder="m.name"
                                :key="medcineData.value[m.prop]" :disabled="!updateButtonGroup"
                                @focus="m.apiUrl && handleQueryMore(m, '', { name: 'medcineData', prop: m.prop })">

                                <el-option v-if="m.dictId" v-for="d in m.dictValue" :key="d.dictValue"
                                  :label="d.dictLabel" :value="d.dictValue">
                                </el-option>

                                <div slot="empty"></div>
                              </el-select>
                            </el-form-item>

                            <!-- 图片 -->
                            <el-form-item v-else-if="m.attribute == 'image'" :label="m.name">
                              <el-image :src="medcineData.value[m.prop]" fit="contain">
                              </el-image>
                            </el-form-item>

                            <!-- 文本、数字、textarae -->
                            <el-form-item v-else :label="m.name">
                              <el-input size="small" v-model="medcineData.value[m.prop]" :type="m.attribute || 'text'"
                                :placeholder="m.name" :readonly="!updateButtonGroup">
                              </el-input>
                            </el-form-item>
                          </template>

                        </el-col>
                      </el-row>

                    </el-form>

                    <!-- 其他展示为列表 -->

                    <!-- 辅计量 -->
                    <el-table v-else-if="activeViceTab == 'material_unit'" :data="unitDetails.value"
                      class="material-table">
                      <el-table-column type="index" label="序号" width="55" align="center" />
                      <el-table-column v-for="v in  unitDetails.form" v-if="v.show" :label="v.name" align="center"
                        :prop="v.prop" show-overflow-tooltip />
                    </el-table>

                    <!-- 辅助属性 -->
                    <el-table v-else-if="activeViceTab == 'material_property'" :data="propertyDetail.value"
                      class="material-table">
                      <el-table-column type="index" label="序号" width="55" align="center" />
                      <el-table-column v-for="v in  propertyDetail.form" v-if="v.show" :label="v.name" align="center"
                        :prop="v.prop" show-overflow-tooltip />
                    </el-table>

                  </template>
                </dr-tabs>

              </div>

              <!-- 基本信息 - 审计信息 -->
              <div class="md-auditInfo" v-if="activeMainTab == 'material'">
                <el-divider content-position="left">审计信息</el-divider>
                <el-form :inline="true" label-position="right" :model="basicData.value">
                  <el-form-item label="创建人">
                    <el-input v-model="basicData.value.createBy" size="small" readonly placeholder="创建人"></el-input>
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <el-input v-model="basicData.value.createTime" size="small" readonly placeholder="创建时间"></el-input>
                  </el-form-item>
                  <el-form-item label="最后修改人">
                    <el-input v-model="basicData.value.updateBy" size="small" readonly placeholder="最后修改人"></el-input>
                  </el-form-item>
                  <el-form-item label="最后修改时间">
                    <el-input v-model="basicData.value.updateTime" size="small" readonly placeholder="最后修改时间"></el-input>
                  </el-form-item>

                </el-form>

              </div>

            </div>
          </template>
        </dr-tabs>

      </div>

    </el-card>

    <!-- 操作提示弹窗 -->
    <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center>
      <span>是否确认{{ optionDialog.op }}？</span>
      <span slot="footer">
        <el-button @click="handleOptionCancal">取 消</el-button>
        <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 其他页签的操作 -->
    <el-dialog :title="otherDeatils.title" :visible.sync="otherDeatils.show" show-close width="70%"
      :before-close="handleCloseOtherDetails" :close-on-press-escape="false" :close-on-click-modal="false"
      class="otherDialog">
      <div>
        <!-- 其他标签页操作  修改、删除 -->
        <el-row :gutter="10" class="mb10">
          <el-col :span="1.5" v-if="!otherDeatils.isEdit">
            <el-button-group>
              <el-button size="small" @click="handleEdit">修改</el-button>
              <el-button size="small" @click="handleDel">删除</el-button>
            </el-button-group>
            <el-button-group>
              <el-button size="small" @click="handleRefresh">刷新</el-button>
            </el-button-group>
          </el-col>
          <el-col :span="1.5" v-else>
            <el-button-group>
              <el-button size="small" @click="handleOtherSave">保存</el-button>
              <el-button size="small" @click="handleOtherCancel">取消</el-button>
            </el-button-group>
          </el-col>
        </el-row>

        <el-collapse v-model="collapseActive" @change="handleCollapseChange">

          <el-collapse-item title="物料基本信息" name="basic">
            <el-form :inline="true" label-position="right" :model="basicData.value">
            <!-- <el-form-item label="所属组织">
                  <el-input v-model="basicData.value.orgName" placeholder="所属组织"></el-input>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </el-form-item> -->
              <el-form-item label="物料编码">
                <el-input v-model="basicData.value.code" size="small" readonly placeholder="物料编码"></el-input>
              </el-form-item>
              <el-form-item label="物料名称">
                <el-input v-model="basicData.value.name" size="small" readonly placeholder="物料名称"></el-input>
              </el-form-item>
              <el-form-item label="英文名称">
                <el-input v-model="basicData.value.enName" size="small" readonly placeholder="英文名称"></el-input>
              </el-form-item>
            <!-- <el-form-item label="版本号">
                <el-input v-model="basicData.value.version"  placeholder="版本号"></el-input>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </el-form-item> -->

            </el-form>
          </el-collapse-item>

          <el-collapse-item :title="otherDeatils.title" :name="activeMainTab">
            <div class="od-msg">

              <!-- 展示表单 -->
              <el-form :inline="true" label-position="right" :hide-required-asterisk="true" :model="otherDeatils.value">

                <el-row :gutter="10">
                  <el-col :span="8" v-for="f in otherDeatils.form" style="text-align: right;">
                    <template v-if="f.show">
                      <!-- 多选框 -->
                      <el-form-item v-if="f.attribute == 'checkbox'" style="text-align: left;" class="od-msg-checkedbx">
                        <el-checkbox :label="f.name" name="type" v-model="otherDeatils.value[f.prop]"
                          :disabled="!(otherDeatils.isEdit && f.edit)">
                        </el-checkbox>
                      </el-form-item>

                      <!-- 下拉框 -->
                      <el-form-item v-else-if="f.attribute == 'select'" :label="f.name">

                        <el-select v-model="otherDeatils.value[`${f.prop}Label`]" :placeholder="f.name"
                          :key="otherDeatils.value[f.prop]" :disabled="!(otherDeatils.isEdit && f.edit)"
                          @focus="f.apiUrl && handleQueryMore(f, '', { name: 'otherDeatils', prop: f.prop })">

                          <el-option v-if="f.dictId" v-for="d in f.dictValue" :key="d.dictValue" :label="d.dictLabel"
                            :value="d.dictValue">
                          </el-option>

                          <div slot="empty"></div>
                        </el-select>

                      </el-form-item>

                      <el-form-item v-else-if="f.attribute == 'image'" :label="f.name">
                        <el-image :src="otherDeatils.value[f.prop]" fit="contain">
                        </el-image>

                      </el-form-item>

                      <!--attribute 文本 数字 文本域 为null -->
                      <el-form-item v-else :label="f.name">
                        <el-input size="small" v-model="otherDeatils.value[f.prop]" :type="f.attribute || 'text'"
                          :placeholder="f.name" :readonly="!(otherDeatils.isEdit && f.edit)">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-col>
                </el-row>

              </el-form>

            </div>
          </el-collapse-item>
          <el-collapse-item title="审计信息" name="auditInfo">
            <!-- 基本信息 - 审计信息 -->
            <div class="md-auditInfo">
              <el-form :inline="true" label-position="right" :model="basicData.value">
                <el-form-item label="创建人">
                  <el-input v-model="basicData.value.createBy" size="small" readonly placeholder="创建人"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-input v-model="basicData.value.createTime" size="small" readonly placeholder="创建时间"></el-input>
                </el-form-item>
                <el-form-item label="最后修改人">
                  <el-input v-model="basicData.value.updateBy" size="small" readonly placeholder="最后修改人"></el-input>
                </el-form-item>
                <el-form-item label="最后修改时间">
                  <el-input v-model="basicData.value.updateTime" size="small" readonly placeholder="最后修改时间"></el-input>
                </el-form-item>
              </el-form>

            </div>

          </el-collapse-item>

        </el-collapse>
      </div>
    </el-dialog>

    <!-- 参照弹窗 -->
    <el-dialog :title="MoreDataDialog.msg.name" :visible.sync="MoreDataDialog.show" width="70%" class="MoreDataDialog"
      :close-on-press-escape="false" :close-on-click-modal="false" :before-close="handleCloseRefer">
      <div>
        <el-row>
          <el-col :span="1.5">
            <el-input v-model="MoreDataDialog.key" placeholder="过滤" size="small" @change="handleFilterRefer" />
          </el-col>
        </el-row>

        <!-- 树形 -->
        <el-tree class="referTree" v-loading="MoreDataDialog.loading" v-if="MoreDataDialog.type == 'tree'"
          :data="MoreDataDialog.list" @node-click="handleNodeClick" :props="defaultProps" node-key="id">
        </el-tree>

        <!-- 列表 -->
        <el-table v-else :data="MoreDataDialog.list" v-loading="MoreDataDialog.loading" style="width: 100%"
          @row-click="handleCurentRow" highlight-current-row>
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column v-for="m in MoreDataDialog.form" v-if="m.show" :prop="m.prop" :label="m.name" />
        </el-table>

        <!-- 按钮 -->
        <el-row class="more-button">
          <el-button round size="small" @click="handleConcalRefer">取消</el-button>
          <el-button round size="small" type="primary" @click="handleConfirmRefer">确认</el-button>
        </el-row>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import drTabs from '../components/dr-tabs.vue';
import detailsTabs from '../config/detailsTabs';
import materialApi from '@/api/material/basic';
import { getDicts as getDicts } from '@/api/system/dict/data'

export default {
  name: 'material-details',
  // dicts: [''],
  components: {
    drTabs
  },
  data() {
    return {
      count: 1,
      // 详情固定标签页
      detailsTabs,
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      // 标签页当前激活状态
      activeMainTab: 'material',
      activeViceTab: 'material_medcine',
      materialId: this.$route.params.id,
      collapseActive: ['basic', '',],
      // 修改按钮 是否激活
      updateButtonGroup: false,
      // 基本信息下的页签
      basicMessage: [
        {
          label: '医药行业',
          code: 'material_medcine',
          isShow: true,
        },
        {
          label: '辅计量管理',
          code: 'material_unit',
          isShow: true,
        },
        {
          label: '辅助属性',
          code: 'material_property',
          isShow: true,
        },
      ],
      // 基本信息
      basicData: {
        value: {},
        form: []
      },
      // 医药行业
      medcineData: {
        value: {},
        form: []
      },
      // 辅助属性
      propertyDetail: {
        value: [],
        form: []
      },
      // 辅计量管理
      unitDetails: {
        value: [],
        form: []
      },
      // 主标签信息
      mainMsg: {
        form: [],
        value: [],
        checkedList: [],
      },
      // 副信息
      viceMsg: {
        form: [],
        value: []
      },
      // 操作弹窗
      optionDialog: {
        show: false,
        op: ''
      },
      // 其他页签操作弹窗
      otherDeatils: {
        show: false,
        title: '',
        // 查询关键字-物料id
        queryKey: '',
        isEdit: false,
        // 详情表头
        from: [],
        // 详情值
        value: {}
      },
      // 编辑-更多数据展示弹窗_ 参照
      MoreDataDialog: {
        loading: false,
        show: false,
        // 查询关键字
        key: '',
        // 需要查看参照的表单头信息
        msg: '',
        type: 'table',
        // 查询出的参照数据
        list: [],
        // 查询出的参照表头
        form: [],
        // 选中的参照数据
        value: '',
        // 参照最后应该赋值的地方
        target: {
          name: '',
          prop: ''
        }
      }


    }
  },

  methods: {
    // 返回
    handleBack() {
      this.$router.push({
        path: `/basic/material/basicFile`,
      });

    },
    // 附件按钮
    handleFile() {
      console.log('附件按钮');
    },
    // 改变分页情况 
    handleChangePage(type) {
      switch (type) {
        case 'first':
          console.log('第一页');
          break;
        case 'pre':
          console.log('上一页');
          break;
        case 'next':
          console.log('下一页');
          break;
        case 'end':
          console.log('最后页');
          break;
      }
    },
    // 切换主信息标签
    handleMainTabClick(e) {

      this.activeMainTab = detailsTabs[e.index].code;

      this.collapseActive.splice(1, 1, this.activeMainTab);
      console.log(this.collapseActive, 'this.collapseActive');

      switch (this.activeMainTab) {

        // 基本信息
        case 'material':
          this.getTagList('material', (form) => {
            this.basicData.form = form;
            this.getMaterialDetails(this.materialId, 'material');
          })
          break;
        // 财物信息
        case 'material_finance':
          this.getTagList('material_finance', (form) => {
            this.mainMsg.form = form;
            this.getFinanceList('');
          });
          break;
        // 利润中心信息
        case 'profit_center':
          this.getTagList('profit_center', (form) => {
            this.mainMsg.form = form;
            this.getCenterList('');
          });
          break;
        // 采购信息
        case 'material_purchase':
          this.getTagList('material_purchase', (form) => {
            this.mainMsg.form = form;
            this.getPurchaseList();
          });
          break;
        // 库存信息
        case 'material_inventory':
          this.getTagList('material_inventory', (form) => {
            this.mainMsg.form = form;
            this.getInventoryList();
          });
          break;
        // 计划信息
        case 'material_plan':
          this.getTagList('material_plan', (form) => {
            this.mainMsg.form = form;
            this.getPlanList('');
          });
          break;
        // 成本信息
        case 'material_cost':
          this.getTagList('material_cost', (form) => {
            this.mainMsg.form = form;
            this.getCostList('');
          });
          break;
        default: break;
      }

    },
    // 切换副表信息
    handleViceTabClick(e) {
      console.log(this.basicMessage[e.index], '切换标签');
      this.activeViceTab = this.basicMessage[e.index].code;

      switch (this.activeViceTab) {

        // 医药行业
        case 'material_medcine':
          this.getTagList('material_medcine', (form) => {
            this.medcineData.form = form;
            this.getMedcineDetails(this.materialId, 'material_medcine');
          })
          break;
        // 辅计量管理
        case 'material_unit':
          this.getTagList('material_unit', (form) => {
            console.log(form, 'form');
            this.unitDetails.form = form;
            this.getUnitList('');
          });
          break;
        // 辅助属性
        case 'material_property':
          this.getTagList('material_property', (form) => {

            this.propertyDetail.form = form;
            this.getPropertyList('');
          });
          break;

        default:
          break;
      }
    },
    // 主标签页 列表双击
    handleMaindbClick(e) {
      console.log(e, '主标签页 列表双击');
      this.otherDeatils.queryKey = e.id;
      this.otherDeatils.show = true;
      let activeTab = this.detailsTabs.filter(item => item.code == this.activeMainTab)[0];
      console.log(activeTab, 'activeTab');
      this.otherDeatils.title = activeTab.label;

      this.getOtherListDetails(activeTab.code, this.otherDeatils.queryKey);
    },
    // 主页签 列表数据选择
    handleMainChange(e) {
      console.log(e, '主页签 列表数据选择');
      this.mainMsg.checkedList = e;
    },
    // 编辑状态下，弹窗显示查询数据
    handleQueryMore(msg, val, target) {
      this.MoreDataDialog.loading = true;
      let _this = this;
      console.log('编辑状态下，弹窗显示查询数据', msg, 'val', val, target);

      this.MoreDataDialog.show = true;
      this.MoreDataDialog.msg = msg;
      this.MoreDataDialog.target = target;

      this.getExecuteMethods(msg.apiUrl, { param: this.MoreDataDialog.key }, (data) => {

        console.log(data, '编辑状态下，弹窗显示查询数据');
        _this.MoreDataDialog.type = data.type;
        _this.MoreDataDialog.list = data.tableBody;
        if (data.type == 'tree') {

        } else {
          _this.MoreDataDialog.form = data.tableHeader;
        }

        console.log(_this.MoreDataDialog.list, 'this.MoreDataDialog.list');
        console.log(_this.MoreDataDialog.form, 'this.MoreDataDialog.form');


      })
    },
    // 根据apiUrl获取对应参照的值
    getExecuteMethods(methodName, params, cb) {
      materialApi.executeMethods(methodName, params).then(res => {
        this.MoreDataDialog.loading = false;
        if (res.code == 200) {
          cb(res.data);
        }
      })
    },
    // 获取物料基本信息详细信息
    getMaterialDetails(id, templateCode) {
      let _this = this;
      materialApi.materialDetails(
        id,
        templateCode,
      ).then(res => {
        console.log(res, '物料基本信息');
        let { code, data } = res;
        if (code == 200) {

          _this.basicData.value = data.data;
          // this.basicData.form = data.form;

          _this.handleAddReferLabel('basicData');

        }
      })
    },
    // 添加参照中的label
    handleAddReferLabel(dataName) {
      let _this = this;
      this[dataName].form.map(item => {
        // 查参照
        if (item.apiUrl && item.apiUrl != '') {

          _this.getExecuteMethods(item.apiUrl, {}, (data) => {

            let { tableBody } = data;

            let Blabel = tableBody.filter((t) => t.id == _this[dataName].value[item.prop])[0];

            _this[dataName].value[`${item.prop}Label`] = Blabel || '';

          })
        }
      })

      console.log(_this[dataName].value, '_this[dataName].value//////////////////////');
    },


    // 查询财务信息列表
    getFinanceList(materialId) {
      materialApi.financeList({ materialId }).then(res => {
        console.log(res, '查询财务信息列表');
        if (res.code == 200) {
          this.mainMsg.value = res.rows;

        }
      })
    },
    // 查询计划信息列表
    getPlanList(materialId) {
      materialApi.planList({ materialId }).then(res => {
        console.log(res, '查询计划信息列表');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 查询成本信息列表
    getCostList(materialId) {
      materialApi.costList({ materialId }).then((res) => {
        console.log(res, '成本信息列表+表头');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 查询利润中心列表 
    getCenterList(materialId) {
      materialApi.centerList({ materialId }).then(res => {
        console.log(res, '查询利润中心信息');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 查询采购中心列表 
    getPurchaseList(materialId) {
      materialApi.purchaseList({ materialId }).then(res => {
        console.log(res, '查询采购中心');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 获取库存信息列表 
    getInventoryList(materialId) {
      materialApi.inventoryList({ materialId }).then(res => {
        console.log(res, '获取库存信息列表');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },

    // 查询其他标签页列表详情
    getOtherListDetails(type, id) {
      console.log(type, id, '查询其他标签页列表详情');
      this.otherDeatils.form = this.mainMsg.form;
      console.log(this.otherDeatils.form, 'this.otherDeatils.form');

      switch (type) {
        // 财物信息
        case 'material_finance':
          this.getFinanceDetails(id);
          break;
        // 利润中心信息
        case 'profit_center':
          this.getCenterDetails(id);
          break;
        // 采购信息
        case 'material_purchase':
          this.getPurchaseDetails(id);
          break;
        // 库存信息
        case 'material_inventory':
          this.getInventoryDetails(id);
          break;
        // 计划信息
        case 'material_plan':
          this.getPlanDetails(id);
          break;
        // 成本信息
        case 'material_cost':
          this.getCostDetails(id);
          break;
        default: break;
      }
    },
    // 查询财务信息详情
    getFinanceDetails(id) {
      materialApi.financeDetails(id).then(res => {
        let _this = this;
        console.log('查询财务信息详情', res);
        if (res.code == 200) {
          this.otherDeatils.value = res.data.data;
          _this.handleAddReferLabel('otherDeatils');
        }
      })
    },
    // 获取利润中心详情
    getCenterDetails(materialId) {
      let _this = this;
      materialApi.centerDetails(materialId).then(res => {
        console.log(res, '获取利润中心详情');
        if (res.code == 200) {
          this.otherDeatils.value = res.data.data;
          _this.handleAddReferLabel('otherDeatils');
        }
      })
    },
    // 获取采购详细信息详情
    getPurchaseDetails(materialId) {
      let _this = this;
      materialApi.purchaseDetails(materialId).then(res => {
        console.log(res, '获取采购详细信息详情');
        if (res.code == 200) {
          this.otherDeatils.value = res.data.data;
          _this.handleAddReferLabel('otherDeatils');
        }
      })
    },
    // 获取成本信息详情
    getCostDetails(id) {
      let _this = this;
      materialApi.costDetails(id).then(res => {
        console.log(res, '获取成本信息详情');
        if (res.code == 200) {
          this.otherDeatils.value = res.data.data;
          _this.handleAddReferLabel('otherDeatils');
        }
      })
    },
    // 获取计划信息详情
    getPlanDetails(id) {
      let _this = this;
      materialApi.planDetails(id).then(res => {
        console.log(res, '获取计划信息详情');
        if (res.code == 200) {
          this.otherDeatils.value = res.data.data;
          _this.handleAddReferLabel('otherDeatils');
        }
      })
    },
    // 获取库存详细信息详情
    getInventoryDetails(materialId) {
      let _this = this;
      materialApi.inventoryDetails(materialId).then(res => {
        console.log(res, '获取库存详细信息详情');
        if (res.code == 200) {
          this.otherDeatils.value = res.data.data;
          _this.handleAddReferLabel('otherDeatils');
        }
      })
    },




    /* 二级标签页 */
    // 获取医药行业信息详细信息+表单属性
    getMedcineDetails(id, templateCode) {

      console.log(id, templateCode);
      materialApi.medcineDetails(
        id,
        templateCode,
      ).then((res) => {

        console.log(res, '医药行业');
        let { code, data } = res;
        if (code == 200) {
          this.medcineData.value = data.data || {};
          // this.medcineData.form = data.form;
        }
      })
    },
    // 获取物料辅助属性详细信息+表单列段属性
    getPropertyDetails(id) {
      materialApi.propertyDetails(id).then(res => {
        console.log(res, '物料辅助属性详细信息');
        if (res.code == 200) {
          this.propertyDetail.value = res.data.data || [];
        }
      })
    },
    // 查询物料辅助属性列表+表头字段
    getPropertyList() {
      materialApi.propertyList().then(res => {
        console.log(res, '料辅助属性列表');
        if (res.code == 200) {
          this.propertyDetail.value = res.data.data || [];
        }
      })
    },
    //获取辅助计量单位基本信息+表单列段属性 
    getUnitDetails(materialId) {
      materialApi.unitDetails(materialId).then(res => {
        console.log(res, '辅助计量单位基本信息');
        if (res.code == 200) {
          this.unitDetails.value = res.data.data || [];
        }
      })
    },
    //获取辅计量管理列表信息+表头字段
    getUnitList() {
      materialApi.unitList().then(res => {
        console.log(res, '辅计量管理列表信息');
        if (res.code == 200) {
          this.unitDetails.value = res.data.data || [];
        }
      })
    },
    // 获取物料列表表头
    getTagList(templateCode, cb) {
      let _this = this
      materialApi.tagList({ templateCode }).then(res => {
        console.log(res, `获取${templateCode}表头`);
        let dictIdList = [];
        if (res.code == 200) {

          res.data.map(item => {

            // 查字典
            if (item.dictId && item.dictId != '') {
              // 通过接口获取有dict的对应的数据
              getDicts(item.dictId).then(dict => {
                if (dict.data) {
                  item['dictValue'] = dict.data;
                }
              })
            }

          })

          // 动态更改dict
          // res.data.forEach(item => {
          //   if (item.dictId) {
          //     // 请求接口
          //     dictIdList.push(item.dictId);
          //   }
          // })
          // console.log(dictIdList, 'dictIdList');
          // _this.dict = Array.from(new Set([..._this.dict, ...dictIdList]));

          // console.log(_this.dicts, 'dicts');

          return cb(res.data);
        }
      })
    },





    // 新增
    handleInster() {
      this.$message({
        message: '物料只能通过申请审批增加，不能在节点直接录入！',
        type: 'warning'
      });
    },
    // 除基本信息之后的修改
    handleEdit() {
      console.log('除基本信息之后的修改', this.otherDeatils.queryKey);

      if ((this.otherDeatils.queryKey && this.otherDeatils.queryKey != '') || this.mainMsg.checkedList.length == 1) {
        this.otherDeatils.show = true;
        this.otherDeatils.isEdit = true;
        let activeTab = this.detailsTabs.filter(item => item.code == this.activeMainTab)[0];
        this.otherDeatils.title = activeTab.label;
        this.otherDeatils.queryKey = this.otherDeatils.queryKey || this.mainMsg.checkedList[0].id;
        console.log(this.otherDeatils, 'this.otherDeatils');
        // 查询其他标签页列表详情
        this.getOtherListDetails(activeTab.code, this.otherDeatils.queryKey);


      } else {
        this.$message({
          message: '修改请选择单个数据！',
          type: 'warning'
        });
      }
    },
    // 修改
    handleBasicEdit() {
      console.log('修改基本信息');
      this.updateButtonGroup = true;

      //需要禁止点击其他标签
      this.detailsTabs = this.detailsTabs.map(item => {
        item['disabled'] = true;
        return item
      })
      console.log(this.detailsTabs, 'this.detailsTabs ');

    },
    // 删除
    handleDel() {
      console.log('删除');
    },
    // 复制
    handleCopy() {
      console.log('复制');
    },
    //查询 
    handleQuery() {

    },
    // 刷新
    handleRefresh() {
      console.log('刷新');
    },
    // 过滤
    handleFilter(e) {
      console.log(e, '过滤');
    },
    filterCondition(type) {
      return {
        type
      }
    },
    // 启用
    handleIsInvoke(e) {
      console.log('启用', e);
    },
    isInvoke(val) {
      return val;
    },
    // 申请单查询
    handleQueryForm() {
      console.log('申请单查询');
    },
    // 批量导入
    handleImport() {
      console.log('批量导入');
    },
    // 批量导出
    handleExport() {
      console.log('批量导出');
    },

    // 取消保存
    handleCancel() {
      console.log('取消保存');
      this.optionDialog.op = '取消';
      this.optionDialog.show = true;
    },
    // 保存修改
    handleSave() {
      console.log('保存修改');
      this.handleSaveMaterial(() => {
        this.$router.go(0)
      });
    },
    // 保存修改并新增
    handleSaveAdd() {
      console.log('保存修改并新增');
    },
    // 其他标签页弹窗取消操作
    handleOtherCancel() {
      console.log('其他标签页弹窗取消操作');
      this.optionDialog.show = true;
      this.optionDialog.op = '修改';
    },
    // 其他标签页弹窗保存
    handleOtherSave() {
      console.log('其他标签页弹窗保存');
    },
    // 其他页签详情弹窗关闭事件
    handleCloseOtherDetails(done) {
      console.log('其他页签详情弹窗关闭事件');
      // 处于编辑状态
      if (this.otherDeatils.isEdit) {
        this.$message({
          message: '请先退出编辑操作',
          type: 'warning'
        });
      } else {
        done();
      }
    },
    // 折叠菜单改变 
    handleCollapseChange(val) {
      console.log(val, '折叠菜单改变');
    },
    // 更新导入
    handleUpdateImport() {
      console.log('更新导入');
    },
    // 确认弹窗操作
    handleComfirmOption() {
      console.log('确认弹窗操作');
      this.optionDialog.show = false;
      this.updateButtonGroup = false;
      this.handleRest();

      //需要禁止点击其他标签
      this.detailsTabs = this.detailsTabs.map(item => {
        item['disabled'] = false;
        return item;
      })

      if (this.otherDeatils.isEdit) {
        this.otherDeatils.isEdit = false;
      }
    },
    // 参照弹窗过滤
    handleFilterRefer() {
      // this.MoreDataDialog.key = 
      console.log(this.MoreDataDialog.key, '查询关键字');

      this.handleQueryMore(this.MoreDataDialog.msg, this.MoreDataDialog.key);

    },
    // 操作提示弹窗关闭
    handleOptionCancal() {
      this.optionDialog.show = false;
      this.otherDeatils.isEdit = true;
    },
    // 树形节点选择
    handleNodeClick(e) {
      console.log(e, '树形节点选择', this.MoreDataDialog.target);
      // let node = { ...e, name: e.label }
      this.MoreDataDialog.value = e;
    },

    // 修改-更多数据表格——选择行
    handleCurentRow(row) {
      console.log(row, '修改-更多数据表格——选择行');
      this.MoreDataDialog.value = row;
    },
    // 参照弹窗确认
    handleConfirmRefer() {
      console.log('确认参照弹窗', `{this.${this.MoreDataDialog.target.name}:${this.MoreDataDialog.value.id}}`);

      if (this.MoreDataDialog.target.name == 'basicData') {
        //  基本信息
        this.basicData.value[this.MoreDataDialog.target.prop] = this.MoreDataDialog.value.id;

        this.basicData.value[`${this.MoreDataDialog.target.prop}Label`] = this.MoreDataDialog.value.name;
        console.log(this.basicData.value[`${this.MoreDataDialog.target.prop}Label`], '//////////基本信息///////////');

      } else if (this.MoreDataDialog.target.name == 'medcineData') {

        //  医药信息
        this.medcineData.value[this.MoreDataDialog.target.prop] = this.MoreDataDialog.value.id;

        this.medcineData.value[`${this.MoreDataDialog.target.prop}Label`] = this.MoreDataDialog.value.name;

        console.log(this.medcineData.value[`${this.MoreDataDialog.target.prop}Label`], '//////医药信息//////////');

      } else if (this.MoreDataDialog.target.name == 'otherDeatils') {

        //  其他页签
        this.otherDeatils.value[this.MoreDataDialog.target.prop] = this.MoreDataDialog.value.id;

        this.otherDeatils.value[`${this.MoreDataDialog.target.prop}Label`] = this.MoreDataDialog.value.name;

        console.log(this.otherDeatils.value[`${this.MoreDataDialog.target.prop}Label`], '/////////其他页签///////');

      }
      this.MoreDataDialog.show = false;
    },
    // 取消-关闭参照弹窗
    handleConcalRefer() {
      console.log('关闭参照弹窗');
      this.MoreDataDialog.show = false;
      this.MoreDataDialog.key = '';
    },
    // 关闭参照弹窗前
    handleCloseRefer(done) {
      this.MoreDataDialog.key = '';
      done();
    },



    // 保存物料以及相关页签
    handleSaveMaterial(cb) {
      let param = {
        ...this.basicData.value,
        materialMedcine: this.medcineData.value,
        materialMedcineItem: {}
      };
      // basicData  this.medcineData.value    materialMedcine
      console.log(param, '保存物料以及相关页签param');
      materialApi.insertMaterialInfo(param).then(res => {
        console.log(res, '保存物料以及相关页签');
        if(res.code) cb();
      })
    },


    // 取消之后重新查询页面
    handleRest() {
      // 基本信息
      this.getTagList('material', (form) => {
        this.basicData.form = form;
        this.getMaterialDetails(this.materialId, 'material');
      })
      // 医疗行业
      this.getTagList('material_medcine', (form) => {
        this.medcineData.form = form;
        this.getMedcineDetails(this.materialId, 'material_medcine');
      })
    },
  },
  created() {
    // 基本信息
    this.handleRest();
  },

}
</script>

<style lang="scss">
.material-details {
  padding: 12px;
  height: calc(100vh - 158px);
  box-sizing: border-box;

  .el-card__body {
    height: calc(100vh - 160px);
    box-sizing: border-box;
    padding: 12px;
  }

  .md-content {
    margin-top: 12px;
    height: calc(100vh - 260px);
    box-sizing: border-box;

    .md-basic {
      overflow: auto;

      .md-main {
        height: calc(100vh - 625px);
        // max-height: 290px;
        margin-bottom: 10px;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .md-vice-content {
        height: 140px;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }

    .md-auditInfo {

      .el-divider--horizontal {
        margin: 20px 0px 15px;
      }
    }

  }

  .otherDialog {

    .el-collapse-item__content {
      padding-bottom: 12px;
    }

    .el-dialog__body {
      padding: 12px 20px;
      height: 80%;
      overflow: auto;
    }

    .od-msg {
      max-height: 220px;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .el-dialog__header {
      background-color: rgb(244, 244, 244);
    }
  }


  .MoreDataDialog {

    .el-dialog__body {
      height: 500px;
      padding: 20px 15px;

      .el-table {
        margin-top: 10px;

        .el-table__body-wrapper {
          height: 340px;
          overflow-y: auto;
          overflow-x: hidden;
        }
      }

      .referTree {
        height: 390px;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }

    .el-dialog__header {
      background-color: rgb(244, 244, 244);
    }

    .more-button {
      margin-top: 10px;
      text-align: right;
    }
  }


}

// 修改下拉框样式
#selected {
  /*很关键：将默认的select选择框样式清除*/
  //   appearance: none;
  //   -moz-appearance: none;
  //   -webkit-appearance: none;
  //   /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  //   padding-right: 14px;
  //   /*自定义图片*/
  //   background: url("../images/search@2x.png") no-repeat scroll right center transparent;
  //   /*自定义图片的大小*/
  //   background-size: 16px 16px;

  //   /*将小箭头的样式去去掉*/
  //   .el-icon-arrow-up:before {
  //     content: '';
  //   }
  // }

}
</style>

<style scoped>
.md-content>>>.el-form-item,
.otherDialog>>>.el-form-item {
  margin-bottom: 10px;
}

.md-content>>>.el-tabs--border-card>.el-tabs__content {
  padding-bottom: 8px;
}

.md-content .md-auditInfo>>>.el-form-item {
  margin-bottom: 0px;
}

.md-main>>>.el-form-item,
.md-vice>>>.el-form-item,
.od-msg>>>.el-form-item {
  width: 100%;
  box-sizing: border-box;
}

.md-main>>>.el-form-item__label,
.md-vice>>>.el-form-item__label,
.od-msg>>>.el-form-item__label {
  width: 40%;
}

.od-msg>>>.el-checkbox__input {
  width: 15%;
}

.md-main>>>.el-form-item__content,
.md-vice>>>.el-form-item__content,
.od-msg>>>.el-form-item__content {
  width: 60%;
  box-sizing: border-box;
}

.od-msg>>>.el-checkbox__label {
  width: 85%;
  box-sizing: border-box;
}


.od-msg-checkedbx>>>.el-form-item__content {
  width: 80%;
  box-sizing: border-box;
}

.od-msg-checkedbx>>>.el-checkbox {
  width: 75%;
  box-sizing: border-box;
}

.md-content>>>.el-form-item__label,
.otherDialog>>>.el-form-item__label,
.od-msg>>>.el-form-item__label,
.od-msg>>>.el-checkbox__label {
  font-weight: normal;
  /* text-align: left;
  width: 28%; */
  white-space: nowrap;
  /* IE6 需要定义宽度 */
  overflow: hidden;

  -o-text-overflow: ellipsis;
  /* Opera */
  text-overflow: ellipsis;
  /* IE, Safari (WebKit) */
  /* -moz-binding: url('ellipsis.xml#ellipsis'); */
  /* Firefox */
}

.otherDialog>>>.el-form-item__label {
  font-size: 12px;
}

.md-main>>>.material-table {
  height: 100%;
}

.md-vice>>>.material-table {
  height: 140px;
  overflow-y: auto;
  overflow-x: auto;
}

/* .otherDialog>>>.el-collapse-item__content {
  padding-bottom: 12px;
}

.otherDialog>>>.el-dialog__body {
  padding: 12px 20px;
} */
</style>