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">修改</el-button>
          <el-button size="small" @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="small"></el-input>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="basicData.value.name" readonly size="small"></el-input>
          </el-form-item>
          <el-form-item label="英文名称">
            <el-input v-model="basicData.value.enName" readonly size="small"></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">

                  <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">
                          <!-- :rules="[{ required: f.required, message: `请选择${f.name}`, trigger: 'change' }]" -->

                          <el-checkbox :label="f.name" name="type" v-model="basicData.value[f.prop]" true-label="0"
                            false-label="2" :disabled="handleJudge(f)">
                          </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">
                          <!-- :rules="[{ required: f.required, message: `请选择${f.name}`, trigger: 'change' }]" -->

                          <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="请选择"
                            :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="请选择"
                            :key="basicData.value[f.prop]" :disabled="handleJudge(f)">
                            <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">
                          <!-- :rules="[{ required: f.required, message: `请输入${f.name}`, trigger: 'blur' }]" -->

                          <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="small" 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" 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]"
                                :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]"
                                :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]"
                                :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="small" 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" 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" 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="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>

            </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="count" @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="small" 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="small" 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="small" 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="small" 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">修改</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" :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}Name`]" 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"
      :key="count" :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="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';

export default {
  name: 'material-details',
  // dicts: [],
  components: {
    drTabs
  },
  data() {
    return {
      count: 1,
      loading: false,
      // 维护新版本
      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');
      }
      else if (attribute.prop == 'expiryUnitId'
        || attribute.prop == 'usefulLife'
        || attribute.prop == 'usefulLifeUnitId'
        || attribute.prop == 'recentWarningPeriod'
      ) {
        // 效期管理（expiryDateManagerment）：控制一下几个是否可编辑
        // expiryUnitId 效期单位  usefulLife 有效期 usefulLifeUnitId 有效期至单位  "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');
      } 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.count++;
        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, params, cb) {

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

      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() {
      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'
        });
      }
    },
    // 其他标签详情弹窗-刷新
    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;
        }
      })
    },
    // 维护物料保存
    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.loading = true;
      // 普通保存修改
      this.updateButtonGroup && this.handleSaveMaterial(() => {
        this.updateButtonGroup = false;
        this.handleRefresh();
      });

      // 维护新版本保存修改
      this.maintainNewVersion && this.handleSaveNewVersion(() => {
        this.maintainNewVersion = false;
        this.handleRefresh();
      })
    },
    // 物料类别列表选中
    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}Label`] = this.MoreDataDialog.value.name;
        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`], '//////////基本信息///////////');

      } else if (this.MoreDataDialog.target.name == 'medcineData') {
        // console.log('this.MoreDataDialog.value', this.MoreDataDialog.value, this.MoreDataDialog.target.prop, this.medcineData);
        // if (this.MoreDataDialog.target.prop === 'dosageFrom')
        //   this.medcineData.form = this.medcineData.form.map((item) => {
        //     if (item.prop === "dosageFrom") item.dictValue = [{ dictLabel: this.MoreDataDialog.value.name, dictValue: this.MoreDataDialog.value.id }]
        //     return item
        //   })
        //  医药信息
        this.medcineData.value[this.MoreDataDialog.target.prop] = this.MoreDataDialog.value.id;

        // this.medcineData.value[`${this.MoreDataDialog.target.prop}Label`] = this.MoreDataDialog.value.name;
        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}Label`] = this.MoreDataDialog.value.name;
        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.MoreDataDialog.show = false;
        this.MoreDataDialog.key = '';
      }
    },
    // 取消-关闭参照弹窗
    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 => {
      })
    },
    // 删除库存信息
    handleDelInventory(ids) {
      console.log('删除库存信息');
      materialApi.delInventory(ids).then(res => {
      })
    },
    // 删除成本信息
    handleDelCost(ids) {
      console.log('删除成本信息');
      materialApi.delCost(ids).then(res => {
      })
    },
    // 删除计划信息
    handleDelPlan(ids) {
      console.log('删除计划信息');
      materialApi.delPlan(ids).then(res => {

      })
    },
    // 删除财物信息
    handleDelFinance(ids) {
      console.log('删除财物信息');
      materialApi.delFinance(ids).then(res => {

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

      });
    },


    // 保存物料以及相关页签
    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;
        }
      })
    },
    // 保存利润中心信息
    handleSaveCenter(data) {
      console.log(data, '保存利润中心信息');
      materialApi.centerEdit(data).then(res => {
        if (res.code == 200) {
          this.otherDeatils.isEdit = false;
        }
      })
    },
    // 保存采购信息
    handleSavePurchase(data) {
      console.log(data, '保存采购信息');
      materialApi.purchaseEdit(data).then(res => {
        if (res.code == 200) {
          this.otherDeatils.isEdit = false;
        }
      })
    },
    // 保存库存信息
    handleSaveInventoryEdit(data) {
      console.log(data, '保存库存信息');
      materialApi.inventoryEdit(data).then(res => {
        if (res.code == 200) {
          this.otherDeatils.isEdit = false;
        }
      })
    },
    // 保存计划信息
    handleSavePlan(data) {
      console.log(data, '保存计划信息');
      materialApi.planEdit(data).then(res => {
        if (res.code == 200) {
          this.otherDeatils.isEdit = false;
        }
      })
    },
    // 保存成本信息
    handleSaveCost(data) {
      console.log(data, '保存成本信息');
      materialApi.costEdit(data).then(res => {
        if (res.code == 200) {
          this.otherDeatils.isEdit = false;
        }
      })
    },


    // 重新加载
    async handleRest() {
      this.loading = true;
      // 基本信息
      await this.getTagList('material', (form) => {
        this.basicData.form = form;
        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;
      })
    },

  },

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

/* .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>