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

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

    <el-card>
      <!-- 基本信息栏 -->
      <div style="display: flex; justify-content: end">
        <div v-if="activeMainTab == 'material'">
          <!-- 基本信息修改状态下—— 保存、保存新增、更新导入、取消 -->
          <el-row
            v-if="updateButtonGroup || maintainNewVersion"
            :gutter="10"
            class="mb10"
            type="flex"
            justify="end"
          >
            <el-col :span="1.5">
              <el-button-group>
                <el-button
                  :size="size"
                  @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="size" @click="handleCancel">取消</el-button>
              </el-button-group>
            </el-col>
          </el-row>

          <el-row v-else :gutter="10" class="mb10" type="flex" justify="end">
            <!-- 新增、修改、删除、复制 -->
            <el-col :span="1.5">
              <el-button-group>
                <!-- <el-button :size="size" @click="handleInster">新增</el-button> -->
                <el-button :size="size" @click="handleBasicEdit"
                  >修改</el-button
                >
                <!-- <el-button :size="size" @click="handleDel">删除</el-button> -->
                <!-- <el-button :size="size" @click="handleCopy">复制</el-button> -->
              </el-button-group>
            </el-col>

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

            <!-- 启用 -->
            <el-col :span="1.5">
              <el-button-group>
                <el-button :size="size" @click="handleMaterialType"
                  >维护物料类别</el-button
                >
                <el-button
                  :size="size"
                  @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="size"
                  @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'"
          type="flex"
          justify="end"
        >
          <el-col :span="1.5">
            <el-button-group>
              <el-button :size="size" @click="handleOtherEdit('table')"
                >修改</el-button
              >
              <el-button
                :size="size"
                v-show="activeMainTab != 'material_finance'"
                @click="handleOtherDel"
                >删除</el-button
              >
            </el-button-group>
            <el-button-group>
              <el-button :size="size" @click="handleOtherListRefresh"
                >刷新</el-button
              >
            </el-button-group>
          </el-col>
        </el-row>

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

      <div class="md-content" :key="basicData.value.id">
        <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"
                  :model="basicData.value"
                  :key="basicData.value.id"
                  ref="basicMessageRef"
                  :rules="rules"
                >
                  <el-row :gutter="10">
                    <el-col
                      :span="6"
                      v-for="f in basicData.form"
                      style="text-align: right"
                    >
                      <template v-if="f.show">
                        <!-- 多选框 -->
                        <el-form-item
                          v-if="f.attribute == 'checkbox'"
                          style="text-align: left"
                          :prop="f.prop"
                          :key="f.required"
                        >
                          <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"
                          :key="f.required"
                          :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 :class="(f.apiUrl && f.required) ? 'redSpan': ''">{{ f.name }}</span> -->
                              <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)"
                          >
                            <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" :key="f.required">
                          <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)"
                            :rows="1"
                            :maxlength="judgeMaxLength(f.prop)"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-col>
                  </el-row>
                </el-form>

                <!-- 其他展示为列表 -->
                <el-table
                  v-else
                  border
                  :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"
                      ref="medcineRef"
                      :model="medcineData.value"
                      class="md-vice-content"
                      :rules="medcineRules"
                      :key="medcineData.value.id"
                    >
                      <el-row :gutter="10">
                        <el-col
                          :span="6"
                          v-for="m in medcineData.form"
                          style="text-align: right"
                        >
                          <!-- 需要根据基本信息中的是否医药物料字段判断是否可以填写 -->
                          <template v-if="m.show">
                            <!-- 多选框 -->
                            <el-form-item
                              v-if="m.attribute == 'checkbox'"
                              :prop="m.prop"
                            >
                              <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"
                              :prop="m.apiUrl ? `${m.prop}Name` : m.prop"
                              :rules="[
                                {
                                  required: m.required,
                                  message: `请选择${m.name}`,
                                  trigger: 'change',
                                },
                              ]"
                            >
                              <!-- 参照弹窗 -->
                              <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,
                                    })
                                "
                              >
                                <div slot="empty"></div>
                              </el-select>

                              <!-- 下拉选择 -->
                              <el-select
                                v-if="m.dictId"
                                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'"
                                :rows="1"
                                :readonly="
                                  !(
                                    updateButtonGroup &&
                                    m.edit &&
                                    basicData.value.isMedicine == '0'
                                  )
                                "
                              >
                              </el-input>
                            </el-form-item>
                          </template>
                        </el-col>
                      </el-row>
                    </el-form>

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

                    <!-- 辅计量 -->
                    <el-table
                      border
                      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
                      border
                      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" type="flex" justify="end">
        <el-col :span="1.5">
          <el-button-group>
            <el-button
              :size="size"
              :disabled="!materialType.isEdit"
              @click="handleMaterialTypeRow('add')"
              >增行
            </el-button>
            <el-button
              :size="size"
              :disabled="!materialType.isEdit"
              @click="handleMaterialTypeRow('del')"
              >删行
            </el-button>
          </el-button-group>
          <el-button-group>
            <el-button
              :size="size"
              @click="handleMaterialTypeRow('edit')"
              v-hasPermi="['system:material:add']"
              >{{ materialType.isEdit ? "保存" : "修改" }}
            </el-button>
            <el-button
              :size="size"
              v-if="materialType.isEdit"
              @click="handleMaterialTypeRow('cancal')"
              >取消</el-button
            >
            <el-button :size="size" @click="handleMaterialTypeRow"
              >刷新</el-button
            >
          </el-button-group>
        </el-col>
      </el-row>
      <!-- 表格数据 -->
      <el-table
        border
        :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 type="primary" @click="handleComfirmOption('cancal')"
          >确 定</el-button
        >
        <el-button @click="handleOptionCancal">取 消</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" type="flex" justify="end">
          <el-col :span="1.5" v-if="!otherDeatils.isEdit">
            <el-button-group>
              <el-button :size="size" @click="handleOtherEdit('form')"
                >修改</el-button
              >
              <!-- <el-button :size="size" @click="handleOtherDel">删除</el-button> -->
            </el-button-group>
            <el-button-group>
              <el-button :size="size" @click="handleOtherRefresh"
                >刷新</el-button
              >
            </el-button-group>
          </el-col>
          <el-col :span="1.5" v-else>
            <el-button-group>
              <el-button :size="size" @click="handleOtherSave">保存</el-button>
              <el-button :size="size" @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="size"
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item label="物料名称">
                <el-input
                  v-model="basicData.value.name"
                  :size="size"
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item label="英文名称">
                <el-input
                  v-model="basicData.value.enName"
                  :size="size"
                  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="size"
                          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="size"
                    readonly
                  ></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-input
                    v-model="basicData.value.createTime"
                    :size="size"
                    readonly
                  ></el-input>
                </el-form-item>
                <el-form-item label="最后修改人">
                  <el-input
                    v-model="basicData.value.updateByName"
                    :size="size"
                    readonly
                  ></el-input>
                </el-form-item>
                <el-form-item label="最后修改时间">
                  <el-input
                    v-model="basicData.value.updateTime"
                    :size="size"
                    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 :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="MoreDataDialog.key"
              placeholder="过滤"
              :size="size"
              clearable
              @clear="handleClear"
              @keyup.enter.native="handleFilterRefer"
            />
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              :size="size"
              @click.stop="handleFilterRefer"
              >搜索</el-button
            >
          </el-col>
        </el-row>
        <!-- 树形 -->
        <el-tree
          v-if="MoreDataDialog.type == 'tree'"
          v-loading="MoreDataDialog.loading"
          :key="refer"
          node-key="id"
          class="referTree"
          :data="MoreDataDialog.list"
          @node-click="handleNodeClick"
          :props="
            MoreDataDialog.msg.apiUrl == 'queryMedcineItemDrug' ||
            MoreDataDialog.msg.apiUrl == 'queryMaterialClassify'
              ? drugProps
              : defaultProps
          "
        >
        </el-tree>

        <!-- queryMedcineItemDrug -->
        <!-- 列表 -->
        <div v-else>
          <el-table
            :data="MoreDataDialog.list"
            v-loading="MoreDataDialog.loading"
            style="width: 100%"
            @row-click="handleCurentRow"
            @row-dblclick="handleDbClick"
            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="size"
            type="primary"
            @click="handleConfirmRefer"
            >确认</el-button
          >
          <el-button round :size="size" @click="handleConcalRefer"
            >取消</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, initParams } from "./init/index";
import { getDetail } from "@/api/classify/basic";

export default {
  name: "material-details",
  // dicts: [],
  components: {
    drTabs,
  },
  data() {
    return {
      size: "mini",
      count: 1,
      refer: 1,
      loading: false,
      rules: {},
      medcineRules: {},
      // 维护新版本
      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: {
    judgeMaxLength(prop) {
      // 规格
      if (prop === "specification") {
        return 150;
      }
      return Infinity;
    },
    // 判断效期管理
    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 有效期至单位
      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.medcineData.value = initParams(this.medcineData.form, "prop");
            this.medcineRules = initRules(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) {
      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) {
      this.mainMsg.checkedList = e;
    },
    // 上传图片
    handleUpImage() {},
    // 编辑状态下，参照弹窗显示查询数据
    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) => {
        _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++;
      });
    },
    // 参照改变分页大小
    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);
        }
      });
    },
    // 获取物料基本信息详细信息
    async getMaterialDetails(id, templateCode) {
      let _this = this;
      await materialApi.materialDetails(id, templateCode).then((res) => {
        this.loading = false;
        console.log(res, "物料基本信息");
        let { code, data } = res;
        if (code == 200) {
          _this.basicData.value = { ..._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');
          this.count++;
        }
      });
    },
    // 添加参照中的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;

    // },

    // 查询财务信息列表
    async getFinanceList(materialId) {
      try {
        this.loading = true;
        let { code, data } = await materialApi.financeList({ materialId });
        if (code == 200) {
          this.mainMsg.value = data.tableBody.rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 查询计划信息列表
    async getPlanList(materialId) {
      try {
        this.loading = true;
        let { code, data } = await materialApi.planList({ materialId });
        if (code == 200) {
          this.mainMsg.value = data.tableBody.rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 查询成本信息列表
    async getCostList(materialId) {
      try {
        this.loading = true;
        let { code, data } = await materialApi.costList({ materialId });
        if (code == 200) {
          this.mainMsg.value = data.tableBody.rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 查询利润中心列表
    async getCenterList(materialId) {
      try {
        this.loading = true;
        let { code, data } = await materialApi.centerList({ materialId });
        if (code == 200) {
          this.mainMsg.value = data.tableBody.rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 查询采购中心列表
    async getPurchaseList(materialId) {
      try {
        this.loading = true;
        let { code, data } = await materialApi.purchaseList({ materialId });
        if (code == 200) {
          this.mainMsg.value = data.tableBody.rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 获取库存信息列表
    async getInventoryList(materialId) {
      try {
        this.loading = true;
        let { code, data } = await materialApi.inventoryList({ materialId });
        if (code == 200) {
          this.mainMsg.value = data.tableBody.rows;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },

    // 查询其他标签页列表详情
    getOtherListDetails(type, id) {
      console.log(type, id, "查询其他标签页列表详情");
      this.otherDeatils.form = this.mainMsg.form;
      console.log(this.otherDeatils.form, "this.otherDeatils.form");
      switch (type) {
        // 财物信息
        case "material_finance":
          this.getFinanceDetails(id);
          break;
        // 利润中心信息
        case "profit_center":
          this.getCenterDetails(id);
          break;
        // 采购信息
        case "material_purchase":
          this.getPurchaseDetails(id);
          break;
        // 库存信息
        case "material_inventory":
          this.getInventoryDetails(id);
          break;
        // 计划信息
        case "material_plan":
          this.getPlanDetails(id);
          break;
        // 成本信息
        case "material_cost":
          this.getCostDetails(id);
          break;
        default:
          break;
      }
    },
    // 查询财务信息详情
    async getFinanceDetails(id) {
      try {
        this.otherDeatils.loading = true;

        let { code, data } = await materialApi.financeDetails(id);

        if (code == 200) {
          this.otherDeatils.value = data.data;
        }
      } catch (error) {
      } finally {
        setTimeout(() => {
          this.otherDeatils.loading = false;
        }, 200);
      }
    },
    // 获取利润中心详情
    async getCenterDetails(id) {
      try {
        this.otherDeatils.loading = true;

        let { code, data } = await materialApi.centerDetails(id);

        if (code == 200) {
          this.otherDeatils.value = data.data;
        }
      } catch (error) {
      } finally {
        setTimeout(() => {
          this.otherDeatils.loading = false;
        }, 200);
      }
    },
    // 获取采购详细信息详情
    async getPurchaseDetails(id) {
      try {
        this.otherDeatils.loading = true;

        let { code, data } = await materialApi.purchaseDetails(id);

        if (code == 200) {
          this.otherDeatils.value = data.data;
        }
      } catch (error) {
      } finally {
        setTimeout(() => {
          this.otherDeatils.loading = false;
        }, 200);
      }
    },
    // 获取成本信息详情
    async getCostDetails(id) {
      try {
        this.otherDeatils.loading = true;

        let { code, data } = await materialApi.costDetails(id);

        if (code == 200) {
          this.otherDeatils.value = data.data;
        }
      } catch (error) {
      } finally {
        setTimeout(() => {
          this.otherDeatils.loading = false;
        }, 200);
      }
    },
    // 获取计划信息详情
    async getPlanDetails(id) {
      try {
        this.otherDeatils.loading = true;

        let { code, data } = await materialApi.planDetails(id);

        if (code == 200) {
          this.otherDeatils.value = data.data;
        }
      } catch (error) {
      } finally {
        setTimeout(() => {
          this.otherDeatils.loading = false;
        }, 200);
      }
    },
    //
    async getInventoryDetails(id) {
      try {
        this.otherDeatils.loading = true;

        let { code, data } = await materialApi.inventoryDetails(id);

        if (code == 200) {
          this.otherDeatils.value = data.data;
        }
      } catch (error) {
      } finally {
        setTimeout(() => {
          this.otherDeatils.loading = false;
        }, 200);
      }
    },

    /* 二级标签页 */
    // 根据物料id获取医药行业信息详细信息
    async getMedcineDetails(id) {
      let _this = this;
      console.log(id);
      await 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);
          this.count++;
        }
      });
    },
    // 获取物料辅助属性详细信息+表单列段属性
    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 || [];
        }
      });
    },
    // 获取物料列表表头
    async getTagList(templateCode, cb) {
      let _this = this;
      await materialApi.tagList({ templateCode }).then(async (res) => {
        console.log(res, `获取${templateCode}表头`);
        let dictIdList = [];
        if (res.code == 200) {
          res.data.map(async (item) => {
            // 查字典
            if (item.dictId && item.dictId != "") {
              // 通过接口获取有dict的对应的数据
              await getDicts(item.dictId).then((dict) => {
                if (dict.data) {
                  item["dictValue"] = dict.data;
                }
              });
            }
          });

          return cb(res.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.$notify({
        title: "警告",
        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.$notify({
            title: "警告",
            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.$notify({
          title: "警告",
          message: "请选择需要删除的数据！",
          type: "warning",
        });
      }
    },
    // 其他标签页刷新
    async handleOtherListRefresh() {
      switch (this.activeMainTab) {
        // 基本信息
        case "material":
          await this.getTagList("material", async (form) => {
            // this.basicData.form = [...form];
            this.basicData.form = [...form];
            this.rules = initRules(form);
            this.basicData.value = initParams(this.basicData.form, "prop");
            await this.getMaterialDetails(this.materialId, "material");
          });
          break;
        // 财物信息
        case "material_finance":
          await this.getTagList("material_finance", async (form) => {
            this.mainMsg.form = [...form];
            await this.getFinanceList(this.materialId);
          });
          break;
        // 利润中心信息
        case "profit_center":
          await this.getTagList("profit_center", async (form) => {
            this.mainMsg.form = [...form];
            await this.getCenterList(this.materialId);
          });
          break;
        // 采购信息
        case "material_purchase":
          await this.getTagList("material_purchase", async (form) => {
            this.mainMsg.form = [...form];
            await this.getPurchaseList(this.materialId);
          });
          break;
        // 库存信息
        case "material_inventory":
          await this.getTagList("material_inventory", async (form) => {
            this.mainMsg.form = [...form];
            await this.getInventoryList(this.materialId);
          });
          break;
        // 计划信息
        case "material_plan":
          await this.getTagList("material_plan", async (form) => {
            this.mainMsg.form = [...form];
            await this.getPlanList(this.materialId);
          });
          break;
        // 成本信息
        case "material_cost":
          await this.getTagList("material_cost", async (form) => {
            this.mainMsg.form = [...form];
            await 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.$refs.basicMessageRef.clearValidate();
      this.$refs.medcineRef.clearValidate();
      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.$notify({
              title: "警告",
              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.$notify.error({
      //       title: '错误',
      //       message: '存在必填项未填写!'
      //     });

      //     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.$notify({
              title: "警告",
              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.$notify({
                title: "警告",
                message: "不能保存空数据或存在数据为空！",
                type: "warning",
              });
            }
          } else {
            // 非编辑状态
            console.log("物料类别修改");
            this.materialType.isEdit = true;
          }
          break;
        // 刷新
        default:
          console.log("物料类别刷新");
          if (this.materialType.isEdit) {
            this.$notify({
              title: "警告",
              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.$notify({
            title: "警告",
            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.$notify({
          title: "警告",
          message: "请先退出编辑操作",
          type: "warning",
        });
      } else {
        this.handleOtherListRefresh();
        done();
      }
    },
    // 折叠菜单改变
    handleCollapseChange(val) {
      console.log(val, "折叠菜单改变");
    },
    // 更新导入
    handleUpdateImport() {
      console.log("更新导入");
    },
    // 确认弹窗操作
    async handleComfirmOption() {
      console.log("确认弹窗操作");

      this.optionDialog.show = false;

      // 取消基本信息修改
      if (this.updateButtonGroup) {
        this.updateButtonGroup = false;
        // this.handleRest();
        await this.getMaterialDetails(this.materialId, "material");

        await this.getMedcineDetails(this.materialId, "material_medcine");
        this.$refs.basicMessageRef.clearValidate();
        this.$refs.medcineRef.clearValidate();
      }

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

      // 取消维护新版本修改
      if (this.maintainNewVersion) {
        console.log("取消维护新版本修改");
        this.maintainNewVersion = false;
        this.handleRefresh();
      }
    },
    handleClear() {
      this.MoreDataDialog.key = "";
      this.handleFilterRefer();
    },
    // 参照弹窗过滤
    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;
    },
    handleDbClick(row) {
      this.MoreDataDialog.value = row;
      this.handleConfirmRefer();
    },
    // 参照弹窗确认
    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"] = "";
        }
        // 物料税类materialRate
        if (this.MoreDataDialog.target.prop == "materialRate") {
          this.basicData.value["rateCode"] = this.MoreDataDialog.value.code;
        }
      } 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.$notify({
                title: "警告",
                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 && 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;
        });
    },
    // 保存财务信息——单个数据
    async handleSaveFinance(data) {
      console.log(data, "保存财务信息——单个数据");
      try {
        this.otherDeatils.loading = true;

        let { code, msg } = await materialApi.financeEdit(data);

        if (code == 200) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
          this.$notify({
            title: "成功",
            message: msg,
            type: "success",
          });
        }
      } catch (error) {
      } finally {
        this.otherDeatils.loading = false;
      }

      // this.otherDeatils.loading = true;
      // materialApi.financeEdit(data).then(res => {
      //   if (res.code == 200) {
      //     this.otherDeatils.isEdit = false;
      //     this.handleOtherRefresh();
      //   }
      //   this.otherDeatils.loading = false;
      // })
    },
    // 保存利润中心信息
    async handleSaveCenter(data) {
      console.log(data, "保存利润中心信息");
      try {
        this.otherDeatils.loading = true;

        let { code, msg } = await materialApi.centerEdit(data);

        if (code == 200) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
          this.$notify({
            title: "成功",
            message: msg,
            type: "success",
          });
        }
      } catch (error) {
      } finally {
        this.otherDeatils.loading = false;
      }
      // materialApi.centerEdit(data).then(res => {
      //   if (res.code == 200) {
      //     this.otherDeatils.isEdit = false;
      //     this.handleOtherRefresh();
      //   }
      // })
    },
    // 保存采购信息
    async handleSavePurchase(data) {
      console.log(data, "保存采购信息");
      try {
        this.otherDeatils.loading = true;

        let { code, msg } = await materialApi.purchaseEdit(data);

        if (code == 200) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
          this.$notify({
            title: "成功",
            message: msg,
            type: "success",
          });
        }
      } catch (error) {
      } finally {
        this.otherDeatils.loading = false;
      }
      // materialApi.purchaseEdit(data).then(res => {
      //   if (res.code == 200) {
      //     this.otherDeatils.isEdit = false;
      //     this.handleOtherRefresh();
      //   }
      // })
    },
    // 保存库存信息
    async handleSaveInventoryEdit(data) {
      console.log(data, "保存库存信息");
      try {
        this.otherDeatils.loading = true;

        let { code, msg } = await materialApi.inventoryEdit(data);

        if (code == 200) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
          this.$notify({
            title: "成功",
            message: msg,
            type: "success",
          });
        }
      } catch (error) {
      } finally {
        this.otherDeatils.loading = false;
      }

      // materialApi.inventoryEdit(data).then(res => {
      //   if (res.code == 200) {
      //     this.otherDeatils.isEdit = false;
      //     this.handleOtherRefresh();
      //   }
      // })
    },
    // 保存计划信息
    async handleSavePlan(data) {
      console.log(data, "保存计划信息");
      try {
        this.otherDeatils.loading = true;

        let { code, msg } = await materialApi.planEdit(data);

        if (code == 200) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
          this.$notify({
            title: "成功",
            message: msg,
            type: "success",
          });
        }
      } catch (error) {
      } finally {
        this.otherDeatils.loading = false;
      }
      // materialApi.planEdit(data).then(res => {
      //   if (res.code == 200) {
      //     this.otherDeatils.isEdit = false;
      //     this.handleOtherRefresh();
      //   }
      // })
    },
    // 保存成本信息
    async handleSaveCost(data) {
      console.log(data, "保存成本信息");
      try {
        this.otherDeatils.loading = true;

        let { code, msg } = await materialApi.costEdit(data);

        if (code == 200) {
          this.otherDeatils.isEdit = false;
          this.handleOtherRefresh();
          this.$notify({
            title: "成功",
            message: msg,
            type: "success",
          });
        }
      } catch (error) {
      } finally {
        this.otherDeatils.loading = false;
      }
      // materialApi.costEdit(data).then(res => {
      //   if (res.code == 200) {
      //     this.otherDeatils.isEdit = false;
      //     this.handleOtherRefresh();
      //   }
      // })
    },

    judgeIsRequriedByProps(message) {
      // condiition:条件,tergetNames:目标porps数组,formName:表单,formRef:表单ref名,

      this[message.formName].form.forEach((formItem) => {
        let target = message.tergetNames.filter((t) => t === formItem.prop);

        if (target && target.length) {
          formItem.required = message.condiition ? false : true;
        }
      });

      this.rules = initRules(this[message.formName].form);

      this.$nextTick(() => {
        message.condiition &&
          this.$refs[message.formRef].clearValidate(message.tergetNames);
      });
    },

    // 重新加载
    async handleRest() {
      this.loading = true;
      // 基本信息
      await this.getTagList("material", async (form) => {
        this.basicData.form = [...form];
        this.rules = initRules(form);
        this.basicData.value = initParams(this.basicData.form, "prop");
        await this.getMaterialDetails(this.materialId, "material");
      });
      // 医疗行业
      await this.getTagList("material_medcine", async (form) => {
        // form.forEach((item) => {
        //   this.medcineData.value[item.prop] = ''
        // })
        this.medcineData.form = [...form];
        this.medcineData.value = initParams(this.medcineData.form, "prop");
        this.medcineRules = initRules(form);
        await 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,
    },
    // 通过一级分类判断业务线是否必填
    // "basicData.value.oneClass": {
    //   handler(nVal, oVal) {

    //     this.basicData.form = this.basicData.form.map(formItem => {

    //       if (formItem.prop === "businessLine" && nVal) {

    //         if ( nVal.includes('介入耗材&5') || nVal.includes('骨科耗材&2') ||
    //             nVal.includes('普通耗材&3') || nVal.includes('医用设备&1') ||
    //             nVal.includes('体外诊断&4')) {

    //               formItem.required  = true
    //         } else {
    //           formItem.required  = false
    //         }

    //       }
    //       return formItem;
    //     })
    //   },
    //   deep: true,
    // },
    // 物料分类改变同时改变一二三级分类
    "basicData.value.classifyId": {
      async handler(nVal, oVal) {
        if (nVal !== oVal) {
          try {
            let { code, data } = await getDetail(nVal);

            if (code == 200) {
              let { oneClass, twoClass, threeClass } = data;

              this.basicData.value["oneClass"] = oneClass;

              this.basicData.value["twoClass"] = twoClass;

              this.basicData.value["threeClass"] = threeClass;
            }
          } catch (error) {}
        }
      },
      deep: true,
    },
    // 效期管理 expiryDateManagerment 控制 expiryUnitId 效期单位  usefulLife 有效期 usefulLifeUnitId 有效期至单位 必填
    "basicData.value.expiryDateManagerment": {
      handler(nVal, oVal) {
        this.judgeIsRequriedByProps({
          condiition: nVal === "2",
          tergetNames: [
            "expiryUnitId",
            "usefulLife",
            "usefulLifeUnitId",
            "recentWarningPeriod",
          ],
          formName: "basicData",
          formRef: "basicMessageRef",
        });
      },
      deep: true,
    },
  },

  created() {
    console.log(this, "created");
    // 基本信息
    this.handleRest();
    if (window.name === "") {
      this.$route.query.isEdit && this.handleBasicEdit();
    } else {
      console.log("页面被刷新");
    }
  },
};
</script>

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

  .el-card__body {
    height: calc(100vh - 40px);
    // height: 100%;
    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 - 200px);
    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: 430px;
          overflow-y: auto;
          overflow-x: hidden;

          .redSpan::before {
            content: "* ";
            color: red;
          }

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

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