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

<!-- 物料信息基础档案——详情 -->
<template>
  <div class="material-details" v-loading="loading">
    <!-- 操作栏 -->
    <!-- 基本信息栏 -->
    <div v-if="activeMainTab == 'material'">

      <!-- 基本信息修改状态下—— 保存、保存新增、更新导入、取消 -->
      <el-row :gutter="10" class="mb10" v-if="updateButtonGroup || maintainNewVersion">
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleSave"
                       v-hasPermi="['system:material:add', `${maintainNewVersion ? '' : 'system:material:versions'}`]">
              保存
            </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>

      <el-row :gutter="10" class="mb10" v-else>
        <!-- 新增、修改、删除、复制 -->
        <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-button size="small" @click="handleRefresh">刷新</el-button>

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

        <!-- 启用 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleMaterialType">维护物料类别</el-button>
            <el-button size="small" @click="handleIsInvoke" :key="count" v-hasPermi="['system:material:add']">
              <!-- 0：启用  2：停用 -->
              {{ basicData.value.isEnable == '已启用' ? '停用' : '启用' }}
            </el-button>
          </el-button-group>
        </el-col>

        <!-- 维护新版本 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" @click="handleNewVersion" v-hasPermi="['system:material:versions']">维护新版本
            </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="handleOtherEdit('table')">修改</el-button>
          <el-button size="small" v-show="activeMainTab != 'material_finance'" @click="handleOtherDel">删除</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="small" @click="handleOtherListRefresh">刷新</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" :disabled="!handleBasicEdit"
              @click="handleChangePage('first')" />
            <el-button size="small" icon="el-icon-arrow-left" :disabled="!handleBasicEdit"
              @click="handleChangePage('pre')" />
            <el-button size="small" icon="el-icon-arrow-right" :disabled="!handleBasicEdit"
              @click="handleChangePage('next')" />
            <el-button size="small" icon="el-icon-d-arrow-right" :disabled="!handleBasicEdit"
            @click="handleChangePage('end')" /></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" readonly size="mini"></el-input>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="basicData.value.name" readonly size="mini"></el-input>
          </el-form-item>
          <el-form-item label="英文名称">
            <el-input v-model="basicData.value.enName" readonly size="mini"></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" :key="count">

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

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

                  <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;" :prop="f.prop">

                          <el-checkbox
                            :label="f.name" name="type"
                            v-model="basicData.value[f.prop]"
                            true-label="0"
                            false-label="2"
                            :disabled="handleJudge(f)"
                            size="mini"
                          >
                          </el-checkbox>
                        </el-form-item>

                        <!-- 下拉框   -->
                        <el-form-item v-else-if="f.attribute == 'select'"
                          :id="(updateButtonGroup && f.apiUrl) ? 'selected' : ''"
                          :prop="f.apiUrl ? `${f.prop}Name` : f.prop"
                        >
                          <template slot="label">
                            <el-tooltip class="item" effect="dark" placement="top-start" :disabled="f.name.length < 10">
                              <span>{{ f.name }}</span>
                              <div slot="content">
                                <p>{{ f.name }}</p>
                              </div>
                            </el-tooltip>
                          </template>

                          <!-- 参照 -->
                          <el-select v-if="f.apiUrl" 
                            v-model="basicData.value[`${f.prop}Name`]" 
                            placeholder="请选择"
                            size="mini"
                            :key="basicData.value[f.prop]" 
                            :disabled="handleJudge(f)"
                            @focus="f.apiUrl && handleQueryMore(f, '', { name: 'basicData', prop: f.prop })">
                            <div slot="empty"></div>
                          </el-select>

                          <!-- 字典 -->
                          <el-select v-if="f.dictId" 
                            v-model="basicData.value[f.prop]" 
                            placeholder="请选择" 
                            size="mini"
                            :key="basicData.value[f.prop]" 
                            :disabled="handleJudge(f)"
                            :rules="[{ required: f.required, message: `请选择${f.name}`, trigger: 'change' }]">
                            <el-option v-if="f.dictId" 
                              v-for="d in f.dictValue" :key="d.dictValue" :label="d.dictLabel"
                              :value="d.dictValue">
                            </el-option>

                          </el-select>

                        </el-form-item>

                        <!-- 图片 -->
                        <el-form-item v-else-if="f.attribute == 'image'" :label="f.name" @clicks="handleUpImage">
                          <el-image :src="basicData.value[f.prop]" fit="contain"></el-image>
                          <!-- <img :src="basicData.value[f.prop]" @clicks="handleUpImage" alt="加载失败"> -->

                        </el-form-item>

                        <!--attribute 文本 数字 文本域 为null -->
                        <el-form-item v-else :prop="f.prop">
                          <template slot="label">
                            <el-tooltip class="item" effect="dark" placement="top-start" :disabled="f.name.length < 10">
                              <span>{{ f.name }}</span>
                              <div slot="content">
                                <p>{{ f.name }}</p>
                              </div>
                            </el-tooltip>
                          </template>

                          <el-input size="mini" v-model="basicData.value[f.prop]" :type="f.attribute || 'text'"
                                    :readonly="handleJudge(f)">
                          </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" v-if="mainMsg.form.length" 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.attribute == 'select' ? `${m.prop}Name` : m.prop" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{ m.attribute == 'select' ? scope.row[`${m.prop}Name`] :
                      (m.attribute == 'checkbox' ?
                      (scope.row[m.prop] == '0' ? '√' : '')
                      : scope.row[m.prop])
                      }}
                    </template>
                  </el-table-column>
                </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]" size="mini"
                                           :disabled="!(updateButtonGroup && m.edit && basicData.value.isMedicine == '0')"
                                           true-label="0" false-label="2">
                              </el-checkbox>
                            </el-form-item>

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

                              <!-- 参照弹窗 -->
                              <el-select v-if="m.apiUrl" v-model="medcineData.value[`${m.prop}Name`]" placeholder="请选择"
                                         :key="medcineData.value[m.prop]" size="mini"
                                         :disabled="!(updateButtonGroup && m.edit && basicData.value.isMedicine == '0')"
                                         @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-select v-else v-model="medcineData.value[m.prop]" placeholder="请选择"
                                         :key="medcineData.value[m.prop]" size="mini"
                                         :disabled="!(updateButtonGroup && m.edit && basicData.value.isMedicine == '0')"
                                         @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>

                              </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="mini" v-model="medcineData.value[m.prop]" :type="m.attribute || 'text'"
                                        :readonly="!(updateButtonGroup && m.edit && basicData.value.isMedicine == '0')">
                              </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" v-if="unitDetails.form.length" 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.attribute == 'select' ? `${v.prop}Name` : v.prop" show-overflow-tooltip>
                        <template slot-scope="scope">
                          {{ v.attribute == 'select' ? scope.row[`${v.prop}Name`] :
                          (v.attribute == 'checkbox' ?
                          (scope.row[v.prop] == '0' ? '√' : '')
                          : scope.row[v.prop])
                          }}
                        </template>
                      </el-table-column>
                    </el-table>

                    <!-- 辅助属性 -->
                    <el-table v-else-if="activeViceTab == 'material_property'" :data="propertyDetail.value"
                              class="material-table">
                      <el-table-column type="index" v-if="propertyDetail.form.length" 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.attribute == 'select' ? `${v.prop}Name` : v.prop" show-overflow-tooltip>
                        <template slot-scope="scope">
                          {{ v.attribute == 'select' ? scope.row[`${v.prop}Name`] :
                          (v.attribute == 'checkbox' ?
                          (scope.row[v.prop] == '0' ? '√' : '')
                          : scope.row[v.prop])
                          }}
                        </template>
                      </el-table-column>
                    </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.createByName" size="mini" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <el-input v-model="basicData.value.createTime" size="mini" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="最后修改人">
                    <el-input v-model="basicData.value.updateByName" size="mini" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="最后修改时间">
                    <el-input v-model="basicData.value.updateTime" size="mini" readonly></el-input>
                  </el-form-item>

                </el-form>

              </div>

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

      </div>

    </el-card>

    <!-- 维护物料类别弹窗 -->
    <el-dialog title="物料类别维护" :visible.sync="materialType.show" :before-close="handleCloseTypeDetails"
               :close-on-press-escape="false" :close-on-click-modal="false" width="80%" center class="materialType">

      <!-- 操作按钮 -->
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button-group>
            <el-button size="small" :disabled="!materialType.isEdit" @click="handleMaterialTypeRow('add')">增行
            </el-button>
            <el-button size="small" :disabled="!materialType.isEdit" @click="handleMaterialTypeRow('del')">删行
            </el-button>
          </el-button-group>
          <el-button-group>
            <el-button size="small" @click="handleMaterialTypeRow('edit')" v-hasPermi="['system:material:add']">{{
              materialType.isEdit
              ? '保存' : '修改' }}
            </el-button>
            <el-button size="small" v-if="materialType.isEdit" @click="handleMaterialTypeRow('cancal')">取消</el-button>
            <el-button size="small" @click="handleMaterialTypeRow">刷新</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <!-- 表格数据 -->
      <el-table :data="materialType.value" stripe style="width: 100%" max-height="350" v-loading="materialType.loading"
                :key="refer" @selection-change="handleSelectionType">
        <el-table-column type="selection" width="30"/>
        <el-table-column type="index" width="50" label="序号"/>
        <el-table-column v-for="mt in materialType.form" v-if="mt.show" :label="mt.name" width="180">

          <template slot-scope="scope">
            <!-- :prop="mt.prop" -->
            <!-- 多选框 -->
            <el-checkbox size="mini" v-if="mt.attribute == 'checkbox'" :disabled="!(materialType.isEdit && mt.edit)"
                         true-label="0" false-label="2" v-model="scope.row[mt.prop]"/>

            <!-- 下拉框 / 参照弹窗---- 药品类别编码 scope.row[`${mt.prop}Name`] -->
            <el-select size="mini" v-else-if="mt.attribute == 'select' && mt.apiUrl" placeholder="请选择"
                       :disabled="!(materialType.isEdit && mt.edit)" v-model="scope.row[mt.prop]"
                       :key="scope.row[mt.prop]"
                       @focus="mt.apiUrl && handleQueryMore(mt, '', { name: 'materialType', prop: scope.row })">
              <div slot="empty"></div>
            </el-select>

            <!-- <el-select size="mini" v-else-if="mt.attribute == 'select' && mt.dictId"  placeholder="请选择"
              :disabled="!(materialType.isEdit && mt.edit)" v-model="scope.row[mt.prop]" :key="scope.row[mt.prop]">
              <el-option v-if="mt.dictId" v-for="d in mt.dictId" :key="d.dictValue" :label="d.dictLabel"
                :value="d.dictValue"></el-option></el-select> -->

            <!-- 其他类型 -->
            <el-input v-else size="mini" v-model="scope.row[mt.prop]" :readonly="!(materialType.isEdit && mt.edit)"/>
          </template>

        </el-table-column>
      </el-table>

    </el-dialog>

    <!-- 操作提示弹窗 -->
    <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 v-loading="otherDeatils.loading">
        <!-- 其他标签页操作  修改、删除 -->
        <el-row :gutter="10" class="mb10">
          <el-col :span="1.5" v-if="!otherDeatils.isEdit">
            <el-button-group>
              <el-button size="small" @click="handleOtherEdit('form')">修改</el-button>
              <!-- <el-button size="small" @click="handleOtherDel">删除</el-button> -->
            </el-button-group>
            <el-button-group>
              <el-button size="small" @click="handleOtherRefresh">刷新</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.code" size="small" readonly></el-input>
              </el-form-item>
              <el-form-item label="物料名称">
                <el-input v-model="basicData.value.name" size="small" readonly></el-input>
              </el-form-item>
              <el-form-item label="英文名称">
                <el-input v-model="basicData.value.enName" size="small" readonly></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" :key="refer" :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]" true-label="0"
                                     false-label="2" :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-if="f.apiUrl" v-model="otherDeatils.value[`${f.prop}Name`]" placeholder="请选择"
                                   :key="otherDeatils.value[f.prop]" :disabled="!(otherDeatils.isEdit && f.edit)"
                                   @focus="f.apiUrl && handleQueryMore(f, '', { name: 'otherDeatils', prop: f.prop })">

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

                        <!-- 字典-下拉 -->
                        <el-select v-if="f.dictId" v-model="otherDeatils.value[f.prop]" placeholder="请选择"
                                   :key="otherDeatils.value[f.prop]" :disabled="!(otherDeatils.isEdit && f.edit)">
                          <el-option v-if="f.dictId" v-for="d in f.dictValue" :key="d.dictValue" :label="d.dictLabel"
                                     :value="d.dictValue">
                          </el-option>
                        </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'"
                                  :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.createByName" size="small" readonly></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-input v-model="basicData.value.createTime" size="small" readonly></el-input>
                </el-form-item>
                <el-form-item label="最后修改人">
                  <el-input v-model="basicData.value.updateByName" size="small" readonly></el-input>
                </el-form-item>
                <el-form-item label="最后修改时间">
                  <el-input v-model="basicData.value.updateTime" size="small" readonly></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="mini" @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" :key="refer"
                 :props="MoreDataDialog.msg.apiUrl == 'queryMedcineItemDrug' ? drugProps : defaultProps" node-key="id">
        </el-tree>
        <!-- queryMedcineItemDrug -->
        <!-- 列表 -->
        <div v-else>
          <el-table :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-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]"
                         layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
          </el-pagination>
        </div>

        <!-- 按钮 -->
        <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'
  import arrayUtils from '../tools/arrayUtils';
  import { initRules} from './init/index'

  export default {
    name: 'material-details',
    // dicts: [],
    components: {
      drTabs
    },
    data() {
      return {
        count: 1,
        refer: 1,
        loading: false,
        rules:{},
        // 维护新版本
        maintainNewVersion: false,
        // 详情固定标签页
        detailsTabs,
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        drugProps: {
          children: 'childrens',
          label: function (data, node) {
            return data.code + ' ' + data.name
          }
          // '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: []
        },
        // 物料类别
        materialType: {
          show: false,
          value: [],
          form: [],
          loading: false,
          checkedList: [],
          isEdit: false,
        },
        // 医药行业
        medcineData: {
          value: {},
          form: []
        },
        // 辅助属性
        propertyDetail: {
          value: [],
          form: []
        },
        // 辅计量管理
        unitDetails: {
          value: [],
          form: []
        },
        // 主标签信息
        mainMsg: {
          form: [],
          value: [],
          checkedList: [],
        },
        // 副信息
        viceMsg: {
          form: [],
          value: [],
        },
        // 操作弹窗
        optionDialog: {
          show: false,
          op: ''
        },
        // 其他页签操作弹窗
        otherDeatils: {
          loading: false,
          show: false,
          title: '',
          // 查询关键字-物料id
          queryKey: '',
          isEdit: false,
          // 详情表头
          from: [],
          // 详情值
          value: {}
        },
        // 编辑-更多数据展示弹窗_ 参照
        MoreDataDialog: {
          loading: false,
          show: false,
          // 查询关键字
          key: '',
          // 需要查看参照的表单头信息
          msg: '',
          type: 'table',
          // 查询出的参照数据
          list: [],
          // 查询出的参照表头
          form: [],
          // 选中的参照数据
          value: '',
          // 参照最后应该赋值的地方
          target: {
            name: '',
            prop: ''
          }
        },
        // 参照分页参数
        queryParams: {
          pageNum: 1,
          total: 0,
          pageSize: 10,
        },
      }
    },

    methods: {
      // 判断效期管理
      handleJudge(attribute) {
        // 维护新版本才能修改:批号及库存状态管理(isInventoryStatus)、
        if (attribute.prop == 'isInventoryStatus') {
          return !(this.maintainNewVersion && attribute.edit);
        }
        // 序列号管理(serialNoManager):维护新版本 && 批号及库存状态管理
        else if (attribute.prop == 'serialNoManager') {

          if (this.basicData.value['isInventoryStatus'] == '2') this.basicData.value['serialNoManager'] = '2';

          return !(this.maintainNewVersion && attribute.edit && this.basicData.value['isInventoryStatus'] == '0');

        }
        // 批号及库存状态管理(isInventoryStatus) 控制 效期管理是否展示(expiryDateManagerment)
        else if (attribute.prop == 'expiryDateManagerment') {

          if (this.basicData.value['isInventoryStatus'] == '2') this.basicData.value['expiryDateManagerment'] = '2';

          return !(this.updateButtonGroup && attribute.edit && this.basicData.value['isInventoryStatus'] == '0');
        }
          // 效期管理（expiryDateManagerment）：控制一下几个是否可编辑
        // expiryUnitId 效期单位  usefulLife 有效期 usefulLifeUnitId 有效期至单位  "recentWarningPeriod" 近效期预警天数

        else if (attribute.prop == 'expiryUnitId'
          || attribute.prop == 'usefulLife'
          || attribute.prop == 'usefulLifeUnitId'
          || attribute.prop == 'recentWarningPeriod'
        ) {
          if (this.basicData.value['expiryDateManagerment'] == '2') {

            this.basicData.value['expiryUnitId'] = '';
            this.basicData.value['usefulLife'] = '';
            this.basicData.value['usefulLifeUnitId'] = '';
            this.basicData.value['recentWarningPeriod'] = '';
          }

          return !(this.updateButtonGroup && attribute.edit && this.basicData.value['expiryDateManagerment'] == '0');
        }
        // 默认采购组织:purchasingOrganization  业务部门:businessDepartment
        else if (attribute.prop == 'businessDepartment') {
          return !(this.updateButtonGroup && attribute.edit && this.basicData.value['purchasingOrganization']);
        } else {
          // 其他属性是否可编辑
          return !(this.updateButtonGroup && attribute.edit);
        }


      },
      // 返回
      handleBack() {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
        // 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');

        this.handleOtherListRefresh();

      },
      // 切换副表信息
      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(this.materialId);
            });
            break;
          // 辅助属性
          case 'material_property':
            this.getTagList('material_property', (form) => {

              this.propertyDetail.form = form;
              this.getPropertyList(this.materialId);
            });
            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;
      },
      // 上传图片
      handleUpImage() {
        console.log('上传图片');
      },
      // 编辑状态下，参照弹窗显示查询数据
      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;

        let par = {param: this.MoreDataDialog.key};

        this[target.name].form.map(t => {

          if (t.relevance && t.relevance != '') {

            let reList = t.relevance.split(',');
            console.log(reList, 'reList-------------------');
            reList.forEach(i => {
              par[i] = this.basicData.value[i]
            })
            console.log(par, 'par/////////////////////////');
          }
        })

        this.getExecuteMethods(msg.apiUrl, par, (data) => {

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

            _this.MoreDataDialog.list = arrayUtils.filterTreeData(data.tableBody);
          } else {
            _this.MoreDataDialog.list = data.tableBody;
            _this.MoreDataDialog.form = data.tableHeader;
          }
          this.refer++;
          // this.count++;s
          console.log(_this.MoreDataDialog.list, 'this.MoreDataDialog.list');
          console.log(_this.MoreDataDialog.form, 'this.MoreDataDialog.form');


        })
      },
      // 参照改变分页大小
      handleSizeChange(e) {
        this.queryParams.pageSize = e;
        this.handleQueryMore(this.MoreDataDialog.msg, this.MoreDataDialog.key, this.MoreDataDialog.target);
      },
      // 参照改变当前页
      handleCurrentChange(e) {
        this.queryParams.pageNum = e;
        this.handleQueryMore(this.MoreDataDialog.msg, this.MoreDataDialog.key, this.MoreDataDialog.target);
      },
      // 根据apiUrl获取对应参照的值
      getExecuteMethods(methodName, param, cb) {

        let page = {
          pageSize: this.queryParams.pageSize,
          pageNum: this.queryParams.pageNum,
        }

        let params = {...param};
        // 业务部门需要  依据默认采购组组织查询
        if (methodName == "queryOperatingDepptTree") {

          params['puOrgId'] = this.basicData.value['purchasingOrganization']

        }

        materialApi.executeMethods(methodName, params, page).then(res => {
          this.MoreDataDialog.loading = false;
          if (res.code == 200) {
            this.queryParams.total = res.data.total;
            cb(res.data);
          }
        })
      },
      // 获取物料基本信息详细信息
      getMaterialDetails(id, templateCode) {
        let _this = this;
        materialApi.materialDetails(
          id,
          templateCode,
        ).then(res => {
          this.loading = false;
          console.log(res, '物料基本信息');
          let {code, data} = res;
          if (code == 200) {

            _this.basicData.value = data.data;

            for (const key in data.data) {
              _this.basicData.value[key] = (typeof data.data[key] === 'number') ? String(data.data[key]) : data.data[key];
            }

            // _this.handleAddReferLabel('basicData');

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

      //       let param = {};

      //       if (item.relevance && item.relevance != '') {
      //         let reList = item.relevance.split(',');
      //         console.log(reList, 'reList-------------------');
      //         reList.forEach(i => {
      //           param[i] = this.basicData.value[i]
      //         })
      //         console.log(param, 'param/////////////////////////');
      //       }

      //       _this.getExecuteMethods(item.apiUrl, param, (data) => {
      //         let { tableBody } = data;

      //         // 维护物料类别  --- 属于列表中获取label
      //         if (dataName == 'materialType') {

      //           _this[dataName].value.length && (_this[dataName].value = _this[dataName].value.map(d => {

      //             let Blabel = tableBody.filter((t) => t.id == d[item.prop])[0];
      //             console.log(Blabel, 'Blabel``````````````````````````');
      //             d[`${item.prop}Label`] = (Blabel && Blabel.name) || Blabel || '';
      //             return d;
      //           }))

      //         } else {

      //           let Blabel = tableBody.filter((t) => t.id == _this[dataName].value[item.prop])[0];
      //           console.log(Blabel, 'Blabel``````````````````````````');
      //           _this[dataName].value[`${item.prop}Label`] = (Blabel && Blabel.name) || Blabel || '';
      //         }

      //         // this.count++;
      //         this.loading = false;
      //         console.log(_this[dataName].value, `${dataName}//////////////////////`);
      //       })
      //     }
      //   })
      //   this.materialType.loading = false;

      // },


      // 查询财务信息列表
      getFinanceList(materialId) {
        materialApi.financeList({materialId}).then(res => {
          console.log(res, '查询财务信息列表');
          if (res.code == 200) {
            this.mainMsg.value = res.data.tableBody.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');
        this.otherDeatils.loading = true;
        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 => {
          this.otherDeatils.loading = false;
          let _this = this;
          console.log('查询财务信息详情', res);
          if (res.code == 200) {
            this.otherDeatils.value = res.data.data;
            // _this.handleAddReferLabel('otherDeatils');
          }
        })
      },
      // 获取利润中心详情
      getCenterDetails(id) {
        let _this = this;
        materialApi.centerDetails(id).then(res => {
          this.otherDeatils.loading = false;
          console.log(res, '获取利润中心详情');
          if (res.code == 200) {
            this.otherDeatils.value = res.data.data;
            // _this.handleAddReferLabel('otherDeatils');
          }
        })
      },
      // 获取采购详细信息详情
      getPurchaseDetails(id) {
        let _this = this;
        materialApi.purchaseDetails(id).then(res => {
          this.otherDeatils.loading = false;
          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 => {
          this.otherDeatils.loading = false;
          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 => {
          this.otherDeatils.loading = false;
          console.log(res, '获取计划信息详情');
          if (res.code == 200) {
            this.otherDeatils.value = res.data.data;
            // _this.handleAddReferLabel('otherDeatils');
          }
        })
      },
      // 获取库存详细信息详情
      getInventoryDetails(id) {
        let _this = this;
        materialApi.inventoryDetails(id).then(res => {
          this.otherDeatils.loading = false;
          console.log(res, '获取库存详细信息详情');
          if (res.code == 200) {
            this.otherDeatils.value = res.data.data;
            // _this.handleAddReferLabel('otherDeatils');
          }
        })
      },


      /* 二级标签页 */
      // 根据物料id获取医药行业信息详细信息
      getMedcineDetails(id) {
        let _this = this;
        console.log(id);
        materialApi.medcineDetailsInfo(id).then((res) => {
          this.loading = false;
          console.log(res, '医药行业');
          let {code, data} = res;
          if (code == 200) {
            _this.medcineData.value = data.data || {};
            // this.medcineData.form = data.form;
            // _this.handleAddReferLabel('medcineData');
            console.log(' _this.medcineData', _this.medcineData, res);
          }
        })
      },
      // 获取物料辅助属性详细信息+表单列段属性
      getPropertyDetails(id) {
        materialApi.propertyDetails(id).then(res => {
          console.log(res, '物料辅助属性详细信息');
          if (res.code == 200) {
            this.propertyDetail.value = res.data.data || [];
          }
        })
      },
      // 查询物料辅助属性列表+表头字段
      getPropertyList(materialId) {
        materialApi.propertyList({materialId}).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.tableBody.rows || [];
          }
        })
      },
      //获取辅计量管理列表信息
      getUnitList(materialId) {
        materialApi.unitList({materialId}).then(res => {
          console.log(res, '辅计量管理列表信息');
          if (res.code == 200) {
            this.unitDetails.value = res.data.tableBody.rows || [];
          }
        })
      },
      // 获取物料列表表头
      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 = [..._this.dict, ...dictIdList];
            // _this.dict = Array.from(new Set([..._this.dict, ...dictIdList]));

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

            return cb(res.data);
          }
        })
      },
      // 根据物料id获取物料类别维护列表
      getMedcineitemList(materialId) {
        let _this = this;
        materialApi.medcineitemList({materialId}).then(res => {
          this.materialType.loading = false;
          console.log(res, '根据物料id获取物料类别维护列表');
          if (res.code == 200) {
            _this.materialType.value = res.data.tableBody.rows;
            // _this.handleAddReferLabel('materialType');
          }
        })
      },


      // 新增
      handleInster() {
        this.$message({
          message: '物料只能通过申请审批增加，不能在节点直接录入！',
          type: 'warning'
        });
      },
      // 除基本信息之后的修改
      handleOtherEdit(type) {
        debugger
        console.log('除基本信息之后的修改', type);
        if ('table' === type) {
          if (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.mainMsg.checkedList[0].id;
            console.log(this.otherDeatils, 'this.otherDeatils');
            // 查询其他标签页列表详情
            this.getOtherListDetails(activeTab.code, this.otherDeatils.queryKey);
          } else {
            this.$message({
              message: '修改请选择单个数据！',
              type: 'warning'
            });
          }
        } else if ('form' === type) {
          if (this.otherDeatils.queryKey) {
            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.getOtherListDetails(activeTab.code, this.otherDeatils.queryKey);
          }
        }
      },
      // 其他标签详情弹窗-刷新
      handleOtherRefresh() {
        this.getOtherListDetails(this.activeMainTab, this.otherDeatils.queryKey);
      },
      // 其他标签详情弹窗-删除
      handleOtherDel() {
        let ids = this.mainMsg.checkedList.map(i => i.id);

        console.log(`${this.activeMainTab}其他标签详情弹窗-删除---id合集`, ids);
        if (ids.length) {
          switch (this.activeMainTab) {
            // 财物信息
            case 'material_finance':
              this.handleDelFinance(ids);
              break;
            // 利润中心信息
            case 'profit_center':
              this.handledDelCenter(ids);
              break;
            // 采购信息
            case 'material_purchase':
              this.handledelPurchase(ids);
              break;
            // 库存信息
            case 'material_inventory':
              this.handleDelInventory(ids);
              break;
            // 计划信息
            case 'material_plan':
              this.handleDelPlan(ids);
              break;
            // 成本信息
            case 'material_cost':
              this.handleDelCost(ids);
            default:
              break;
          }
        } else {
          this.$message({
            message: '请选择需要删除的数据！',
            type: 'warning'
          });
        }
      },
      // 其他标签页刷新
      handleOtherListRefresh() {
        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(this.materialId);
            });
            break;
          // 利润中心信息
          case 'profit_center':
            this.getTagList('profit_center', (form) => {
              this.mainMsg.form = form;
              this.getCenterList(this.materialId);
            });
            break;
          // 采购信息
          case 'material_purchase':
            this.getTagList('material_purchase', (form) => {
              this.mainMsg.form = form;
              this.getPurchaseList(this.materialId);
            });
            break;
          // 库存信息
          case 'material_inventory':
            this.getTagList('material_inventory', (form) => {
              this.mainMsg.form = form;
              this.getInventoryList(this.materialId);
            });
            break;
          // 计划信息
          case 'material_plan':
            this.getTagList('material_plan', (form) => {
              this.mainMsg.form = form;
              this.getPlanList(this.materialId);
            });
            break;
          // 成本信息
          case 'material_cost':
            this.getTagList('material_cost', (form) => {
              this.mainMsg.form = form;
              this.getCostList(this.materialId);
            });
            break;
          default:
            break;
        }
      },
      // 修改
      handleBasicEdit() {
        console.log('修改基本信息');
        this.updateButtonGroup = true;
        // this.count++;
        //需要禁止点击其他标签
        // 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('刷新');
        this.handleRest();
      },
      // 过滤
      handleFilter(e) {
        console.log(e, '过滤');
      },
      filterCondition(type) {
        return {
          type
        }
      },
      // 维护物料类别
      handleMaterialType() {
        console.log('维护物料类别');
        this.materialType.show = true;

        this.materialType.loading = true;
        this.getTagList('material_medcine_item', (form) => {
          this.materialType.form = form;
          this.getMedcineitemList(this.materialId);
        });
      },
      // 启用
      handleIsInvoke(e) {
        console.log('启用', this.basicData.value.isEnable);

        let param = {
          isEnable: this.basicData.value.isEnable == '已启用' ? '2' : '0',
          id: this.basicData.value.id
        };
        console.log(param, '启用/停用param');
        materialApi.updateEnableMaterial(param).then(res => {
          console.log(res, '启用/停用');
          if (res.code == 200) this.handleRefresh();
        })
      },
      // 维护新版本
      handleNewVersion() {
        let _this = this;
        let data = {
          // 物料编码
          code: this.basicData.value.code
        }
        materialApi.versions(data).then(res => {
          console.log(res, '维护新版本');
          if (res.code == 200) {
            _this.maintainNewVersion = res.data.result;
            // 维护版本消息展示 by shiy 2023/05/31
            if (!res.data.result) {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        })
      },
      // 维护物料保存
      handleSaveNewVersion(cb) {
        let data = {
          // 物料编码
          materialCode: this.basicData.value.code,
          //序列号管理; 2= 否，0= 是
          serialNoManager: this.basicData.value.serialNoManager,
          // 批号及库存状态管理;2=否，0=是
          isInventoryStatus: this.basicData.value.isInventoryStatus,
        }
        materialApi.saveVersions(data).then(res => {
          console.log(res, '维护物料保存');

          if (res.code == 200) {
            cb();
          }
        })
          .catch((error) => {
            this.loading = false;
          })
      },
      // 取消保存
      handleCancel() {
        console.log('取消保存');
        this.optionDialog.op = '取消';
        this.optionDialog.show = true;
      },
      // 保存修改
      handleSave() {
        console.log('保存修改');
        this.$refs['basicMessageRef'].validate(async (valid) => {

          if (valid) {
            this.loading = true;
            // 普通保存修改
            this.updateButtonGroup && this.handleSaveMaterial(() => {
              this.updateButtonGroup = false;
              this.handleRefresh();
            });

            // 维护新版本保存修改
            this.maintainNewVersion && this.handleSaveNewVersion(() => {
              this.maintainNewVersion = false;
              this.handleRefresh();
            })
          } else {
            this.$message.error('存在必填项未填写');
            console.log('error submit!!');
            return false;
          }
        })

      },
      // 物料类别列表选中
      handleSelectionType(list) {
        console.log('物料类别列表选中', list);
        this.materialType.checkedList = list;
      },
      // 物料类别增删行
      handleMaterialTypeRow(op) {
        let _this = this;
        switch (op) {
          // 增行
          case 'add':
            let rowObj = {};

            for (const key in _this.materialType.value[0]) {
              if (Object.hasOwnProperty.call(_this.materialType.value[0], key)) {

                rowObj[key] = '';

              }
            }
            rowObj['insertId'] = new Date().getTime();
            this.materialType.value.push(rowObj);
            console.log(this.materialType.value, '物料类别增行rowObj后');

            break;
          // 删行
          case 'del':
            console.log('物料类别删行', _this.materialType.checkedList);
            if (_this.materialType.checkedList.length) {
              _this.materialType.checkedList.map(c => {
                _this.materialType.value = _this.materialType.value.filter(m => {
                  if (m.id && m.id != '' && m.id != c.id) {
                    return m;
                  } else if (m.insertId && m.insertId != '' && m.insertId != c.insertId) {
                    return m
                  }
                })
              })
            } else {
              this.$message({
                message: '请选择需要删除的信息！',
                type: 'warning'
              });
            }
            break;
          // 取消
          case 'cancal':
            this.materialType.isEdit = false;
            this.handleMaterialTypeRow();
            break;
          // 保存、修改
          case 'edit':

            if (_this.materialType.isEdit) {
              // 编辑状态
              let nullList = _this.materialType.value.filter(m => (!m.drugId || m.drugId == ''));
              console.log(nullList, 'nullList');
              if (!nullList.length && _this.materialType.value.length) {
                console.log('物料类别保存', _this.materialType.value);
                let params = {
                  materialId: _this.materialId,
                  medcineItems: _this.materialType.value
                }
                materialApi.medcineitemBatchSave(params).then(res => {
                  console.log(res, '保存物料类型');
                  if (res.code == 200) {
                    _this.materialType.isEdit = false;
                    _this.handleMaterialTypeRow();
                  }
                })
                // 保存
              } else {
                this.$message({
                  message: '不能保存空数据或存在数据为空！',
                  type: 'warning'
                });
              }
            } else {
              // 非编辑状态
              console.log('物料类别修改');
              this.materialType.isEdit = true;
            }
            break;
          // 刷新
          default:
            console.log('物料类别刷新');
            if (this.materialType.isEdit) {
              this.$message({
                message: '请先保存数据！',
                type: 'warning'
              })
            } else {
              this.materialType.loading = true;
              this.getTagList('material_medcine_item', (form) => {
                this.materialType.form = form;
                this.getMedcineitemList(this.materialId);
              });
            }
            break;

        }
      },
      // 物料类别弹窗关闭前
      handleCloseTypeDetails(done) {

        console.log('物料类别弹窗关闭前');
        this.materialType.isEdit ? this.$message({
          message: '请先保存数据！',
          type: 'warning'
        }) : done();

      },
      // 保存修改并新增
      handleSaveAdd() {
        console.log('保存修改并新增');
      },
      // 其他标签页弹窗取消操作
      handleOtherCancel() {
        console.log('其他标签页弹窗取消操作');
        this.optionDialog.show = true;
        this.optionDialog.op = '修改';
      },
      // 其他标签页弹窗保存
      async handleOtherSave() {
        console.log('其他标签页弹窗保存', this.activeMainTab);
        let data = this.otherDeatils.value;
        console.log(data, 'params');
        switch (this.activeMainTab) {
          // 财物信息
          case 'material_finance':
            await this.handleSaveFinance(data);
            break;
          // 利润中心信息
          case 'profit_center':
            await this.handleSaveCenter(data);
            break;
          // 采购信息
          case 'material_purchase':
            await this.handleSavePurchase(data);
            break;
          // 库存信息
          case 'material_inventory':
            await this.handleSaveInventoryEdit(data);
            break;
          // 计划信息
          case 'material_plan':
            await this.handleSavePlan(data);
            break;
          // 成本信息
          case 'material_cost':
            await this.handleSaveCost(data);
            break;
          default:
            break;
        }
        // this.handleOtherRefresh();
      },
      // 其他页签详情弹窗关闭事件
      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;

        // 取消基本信息修改
        if (this.updateButtonGroup) {
          this.updateButtonGroup = false;
          this.handleRest();

        }

        // 取消其他主页签详情弹窗修改
        if (this.otherDeatils.isEdit) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
        }

        // 取消维护新版本修改
        if (this.maintainNewVersion) {
          console.log('取消维护新版本修改');
          this.maintainNewVersion = false;
          this.handleRefresh();
        }
      },
      // 参照弹窗过滤
      handleFilterRefer() {
        // this.MoreDataDialog.key =
        console.log(this.MoreDataDialog.key, '查询关键字', this.MoreDataDialog.target);

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

      },
      // 操作提示弹窗关闭
      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() {

        let _this = this;
        console.log('确认参照弹窗', `{this.${this.MoreDataDialog.target.name}:${this.MoreDataDialog.value.id}}`);

        let confirm = true;

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

          this.basicData.value[`${this.MoreDataDialog.target.prop}Name`] = this.MoreDataDialog.value.name;

          console.log(this.MoreDataDialog.target.prop, 'props-----------------', this.MoreDataDialog.value);

          console.log(this.basicData.value[`${this.MoreDataDialog.target.prop}`], '值', this.basicData.value[`${this.MoreDataDialog.target.prop}Name`], '//////////基本信息///////////');
          // 默认采购组织:purchasingOrganization  业务部门:businessDepartment
          if (this.MoreDataDialog.target.prop == 'purchasingOrganization') {

            this.basicData.value['businessDepartment'] = '';
            this.basicData.value['businessDepartmentName'] = '';

          }


        } 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}Name`] = this.MoreDataDialog.value.name;

          console.log(this.MoreDataDialog.target.prop, 'props-----------------', this.MoreDataDialog.value);

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

        } 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}Name`] = this.MoreDataDialog.value.name;

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

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

          // 物料类别
          console.log('确认时选择的数据', this.MoreDataDialog.value);

          this.materialType.value = this.materialType.value.map(m => {
            if ((m.id && m.id != '' && m.id == _this.MoreDataDialog.target.prop['id']) ||
              (m.insertId && m.insertId == _this.MoreDataDialog.target.prop['insertId'])
            ) {
              let drug = _this.materialType.value.filter(d => d.drugId == _this.MoreDataDialog.value['id'])
              console.log(drug, 'drug------------------------------------');
              if (drug.length) {
                _this.$message({
                  message: '不能维护相同的物料类别！',
                  type: 'warning'
                });
                confirm = false;
              } else {
                m.drugId = _this.MoreDataDialog.value['id'];
                m.drugCode = _this.MoreDataDialog.value['code'];
                m.drugName = _this.MoreDataDialog.value['name'];
              }
            }
            return m;
          })

          console.log(this.materialType.value, '修改之后-----this.materialType.value');
        }

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


      // 删除利润中心信息
      handledDelCenter(ids) {
        console.log('删除利润中心信息');
        materialApi.delCenter(ids).then(res => {
          if (res.code == 200) {
            this.handleOtherListRefresh();
          }
        })
      },
      // 删除库存信息
      handleDelInventory(ids) {
        console.log('删除库存信息');
        materialApi.delInventory(ids).then(res => {
          if (res.code == 200) {
            this.handleOtherListRefresh();
          }
        })
      },
      // 删除成本信息
      handleDelCost(ids) {
        console.log('删除成本信息');
        materialApi.delCost(ids).then(res => {
          if (res.code == 200) {
            this.handleOtherListRefresh();
          }
        })
      },
      // 删除计划信息
      handleDelPlan(ids) {
        console.log('删除计划信息');
        materialApi.delPlan(ids).then(res => {
          if (res.code == 200) {
            this.handleOtherListRefresh();
          }

        })
      },
      // 删除财物信息
      handleDelFinance(ids) {
        console.log('删除财物信息');
        materialApi.delFinance(ids).then(res => {
          if (res.code == 200) {
            this.handleOtherListRefresh();
          }
        })
      },
      // 删除采购信息
      handledelPurchase(ids) {
        console.log('删除采购信息');
        materialApi.delPurchase(ids).then(res => {
          if (res.code == 200) {
            this.handleOtherListRefresh();
          }
        });
      },


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

          console.log(res, '保存物料以及相关页签');
          if (res.code == 200) cb();
        }).catch((error) => {
          this.loading = false;
        })
      },
      // 保存财务信息——单个数据
      handleSaveFinance(data) {
        console.log(data, '保存财务信息——单个数据');
        materialApi.financeEdit(data).then(res => {
          if (res.code == 200) {
            this.otherDeatils.isEdit = false;
            this.handleOtherRefresh();
          }
        })
      },
      // 保存利润中心信息
      handleSaveCenter(data) {
        console.log(data, '保存利润中心信息');
        materialApi.centerEdit(data).then(res => {
          if (res.code == 200) {
            this.otherDeatils.isEdit = false;
            this.handleOtherRefresh();
          }
        })
      },
      // 保存采购信息
      handleSavePurchase(data) {
        console.log(data, '保存采购信息');
        materialApi.purchaseEdit(data).then(res => {
          if (res.code == 200) {
            this.otherDeatils.isEdit = false;
            this.handleOtherRefresh();
          }
        })
      },
      // 保存库存信息
      handleSaveInventoryEdit(data) {
        console.log(data, '保存库存信息');
        materialApi.inventoryEdit(data).then(res => {
          if (res.code == 200) {
            this.otherDeatils.isEdit = false;
            this.handleOtherRefresh();
          }
        })
      },
      // 保存计划信息
      handleSavePlan(data) {
        console.log(data, '保存计划信息');
        materialApi.planEdit(data).then(res => {
          if (res.code == 200) {
            this.otherDeatils.isEdit = false;
            this.handleOtherRefresh();
          }
        })
      },
      // 保存成本信息
      handleSaveCost(data) {
        console.log(data, '保存成本信息');
        materialApi.costEdit(data).then(res => {
          if (res.code == 200) {
            this.otherDeatils.isEdit = false;
            this.handleOtherRefresh();
          }
        })
      },


      // 重新加载
      async handleRest() {
        this.loading = true;
        // 基本信息
        await this.getTagList('material', (form) => {
          this.basicData.form = form;
          this.rules = initRules(this.basicData.form);
          console.log(this.rules,'this.rules--------------');
          this.getMaterialDetails(this.materialId, 'material');
        })
        // 医疗行业
        await this.getTagList('material_medcine', (form) => {
          form.forEach((item) => {
            this.medcineData.value[item.prop] = ''
          })
          this.medcineData.form = form;
          this.getMedcineDetails(this.materialId, 'material_medcine');
        })

      },

    },

    watch: {
      // 监听主标签修改标识，控制其他标签是否禁止点击
      'updateButtonGroup': function (nVal, oVal) {
        console.log(nVal, 'nVal', oVal, 'oVal');
        this.detailsTabs = this.detailsTabs.map(item => {
          item['disabled'] = nVal;
          return item;
        })
      },
      'maintainNewVersion': function (nVal, oVal) {
        console.log(nVal, 'nVal', oVal, 'oVal');
        this.detailsTabs = this.detailsTabs.map(item => {
          item['disabled'] = nVal;
          return item;
        })
      },
      "basicData.value.isMedicine": {
        handler(nVal, oVal) {
          this.basicData.form = this.basicData.form.map(formItem => {

            if (formItem.prop === 'productionPermit') {

              formItem.required = nVal == '0' ? true : false;

            }
            return formItem;
          })
        },
        deep: true,
      },

    },

    created() {
      console.log(this, 'created');
      // 基本信息
      this.handleRest();
      if (window.name === '') {
        console.log('页面首次被加载')
        this.$route.query.isEdit && this.handleBasicEdit();
      } else {
        console.log('页面被刷新')
      }

    }
  }
</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;
      overflow-y: auto;
      overflow-x: auto;

      .el-select {
        width: 100%;
      }
    }

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


      .md-basic {
        overflow: auto;

        .md-main {
          // height: calc(100vh - 625px);
          margin-bottom: 10px;

          .el-table__body {
            // height: calc(100vh - 300px);
          }

          .el-form {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;

            .el-checkbox {
              padding: 0 58%;
            }
          }
        }

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

      .md-auditInfo {

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

    }

    // .md-content>.el-tabs {
    //   height: calc(100vh - 280px);
    // }

    .otherDialog {

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

      .el-form {
        .el-checkbox {
          width: 100%;
          padding: 0 10%;
        }
      }

      .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);
      // }
    }

    .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: 300px;
            overflow-y: auto;
            overflow-x: hidden;
          }
        }

        .el-pagination {
          text-align: right;
          margin-top: 5px;
        }

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


      .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;
    height: 36px;
  }

  .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;
  }

  >>> .referTree {
    margin-top: 10px;
  }

  /* .md-main>>>.el-table .el-table__body {
    height: calc(100vh - 300px);
  } */

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

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