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

<!-- 物料信息基础档案——详情 -->
<template>
  <el-drawer
    :show-close="false"
    size="100%"
    :visible.sync="visible"
    append-to-body
    destroy-on-close
    @close="onHide"
    @open="onOpen"
  >
    <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="handleBasicEdit"
                    >修改</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">
                <whlbButton :data="selectData" :size="size"></whlbButton>
              </el-col>
              <!-- 启用 -->
              <el-col :span="1.5">
                <is-using
                  :size="size"
                  :select-data="basicData.value"
                  @success="handleRefresh"
                ></is-using>
              </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-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>

          <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="optionDialog.show"
        width="30%"
        center
        append-to-body
      >
        <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"
        append-to-body
      >
        <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-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"
                  :size="size"
                  :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
                  :size="size"
                  :inline="true"
                  label-position="right"
                  :model="basicData.value"
                >
                  <el-form-item label="创建人">
                    <el-input
                      v-model="basicData.value.createByName"
                      readonly
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <el-input
                      v-model="basicData.value.createTime"
                      readonly
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="最后修改人">
                    <el-input
                      v-model="basicData.value.updateByName"
                      readonly
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="最后修改时间">
                    <el-input
                      v-model="basicData.value.updateTime"
                      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%"
        custom-class="MoreDataDialog"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :before-close="handleCloseRefer"
        append-to-body
      >
        <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>
  </el-drawer>
</template>

<script>
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: [],
  props: {
    selectData: {
      type: Array,
      required: true,
    },
  },
  components: {
    drTabs: () => import("../components/dr-tabs.vue"),
    IsUsing: () => import("./isUsing/index.vue"),
    whlbButton: () => import("./wei-hu-lei-bie/index.vue"),
  },
  data() {
    return {
      visible: false,
      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: [],
      },
      // 医药行业
      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,
      },
    };
  },
  computed: {
    innerValue: {
      get() {
        return this.$props.selectData[0];
      },
      set(value) {
        this.materialId = value.id;
      },
    },
  },
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
    onHide() {
      this.medcineData.value = initParams(this.medcineData.form, "prop");
      this.basicData.value = initParams(this.basicData.form, "prop");
      this.activeMainTab = "material";
      this.activeViceTab = "material_medcine";
      this.$emit("success");
    },
    onOpen() {
      this.materialId = this.$props.selectData[0].id;
      this.handleRest();
    },
    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.visible = false;
      // this.$store.dispatch("tagsView/delView", this.$route);
      // this.$router.go(-1);
    },
    // 切换主信息标签
    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) {
      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];
      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++;
        }
      });
    },

    // 查询财务信息列表
    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 dictIdList = [];
      try {
        let { code, data } = await materialApi.tagList({ templateCode });
        if (code == 200) {
          dictIdList = _.cloneDeep(data);
          let promiseArray = data.map((item, index) => {
            return new Promise((resolve, reject) => {
              if (item.dictId && item.dictId != "") {
                getDicts(item.dictId).then((dict) => {
                  if (dict.data) {
                    dictIdList[index]["dictValue"] = dict.data;
                    resolve();
                  }
                });
              } else {
                resolve();
              }
            });
          });
          Promise.all(promiseArray)
            .then(async () => {
              return cb(dictIdList);
            })
            .catch(() => {
              console.log("promise.all执行失败");
            });
        }
      } catch (error) {
      } finally {
      }

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

    // 新增
    handleInster() {
      this.$notify.warning({
        message: "物料只能通过申请审批增加，不能在节点直接录入！",
      });
    },
    // 除基本信息之后的修改
    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.warning({
            message: "修改请选择单个数据！",
          });
        }
      } 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.warning({
          message: "请选择需要删除的数据！",
        });
      }
    },
    // 其他标签页刷新
    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() {
      this.updateButtonGroup = true;
      // this.count++;
      //需要禁止点击其他标签
      // this.detailsTabs = this.detailsTabs.map(item => {
      //   item['disabled'] = true;
      //   return item
      // })
      console.log(this.detailsTabs, "this.detailsTabs ");
    },
    // 刷新
    handleRefresh() {
      this.$refs.basicMessageRef && this.$refs.basicMessageRef.clearValidate();
      this.$refs.medcineRef && this.$refs.medcineRef.clearValidate();
      this.handleRest();
    },
    // 维护新版本
    handleNewVersion() {
      let _this = this;
      let data = {
        // 物料编码
        code: this.basicData.value.code,
      };
      materialApi.versions(data).then((res) => {
        if (res.code == 200) {
          _this.maintainNewVersion = res.data.result;
          // 维护版本消息展示 by shiy 2023/05/31
          if (!res.data.result) {
            this.$notify.warning({
              message: res.data.msg,
            });
          }
        }
      });
    },
    // 维护物料保存
    handleSaveNewVersion(cb) {
      let data = {
        // 物料编码
        materialCode: this.basicData.value.code,
        //序列号管理; 2= 否，0= 是
        serialNoManager: this.basicData.value.serialNoManager,
        // 批号及库存状态管理;2=否，0=是
        isInventoryStatus: this.basicData.value.isInventoryStatus,
      };
      materialApi
        .saveVersions(data)
        .then((res) => {
          console.log(res, "维护物料保存");

          if (res.code == 200) {
            cb();
          }
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    // 取消保存
    handleCancel() {
      console.log("取消保存");
      this.optionDialog.op = "取消";
      this.optionDialog.show = true;
    },
    // 保存修改
    handleSave() {
      console.log("保存修改");
      this.loading = true;
      // 普通保存修改
      this.updateButtonGroup &&
        this.handleSaveMaterial(() => {
          this.updateButtonGroup = false;
          this.handleRefresh();
        });

      // 维护新版本保存修改
      this.maintainNewVersion &&
        this.handleSaveNewVersion(() => {
          this.maintainNewVersion = false;
          this.handleRefresh();
        });
    },

    // 其他标签页弹窗取消操作
    handleOtherCancel() {
      this.optionDialog.show = true;
      this.optionDialog.op = "修改";
    },
    // 其他标签页弹窗保存
    async handleOtherSave() {
      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) {
      // 处于编辑状态
      if (this.otherDeatils.isEdit) {
        this.$notify.warning({
          message: "请先退出编辑操作",
        });
      } else {
        this.handleOtherListRefresh();
        done();
      }
    },
    // 折叠菜单改变
    handleCollapseChange(val) {
      console.log(val, "折叠菜单改变");
    },
    // 确认弹窗操作
    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") {
        // 四级分类
        if (this.MoreDataDialog.target.prop == "classifyId") {
          if (this.MoreDataDialog.value.childrens.length > 0) {
            return this.$modal.notifyWarning("请选择最末级!");
          }
        }
        //  基本信息
        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`],
          "/////////其他页签///////"
        );
      }

      if (confirm) {
        // this.count++;
        this.refer++;
        this.MoreDataDialog.show = false;
        this.MoreDataDialog.key = "";
        this.MoreDataDialog.value = {};
      }
    },
    // 取消-关闭参照弹窗
    handleConcalRefer() {
      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.success({
            message: msg,
          });
        }
      } 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.success({
            message: msg,
          });
        }
      } 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.success({
            message: msg,
          });
        }
      } 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.success({
            message: msg,
          });
        }
      } 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.success({
            message: msg,
          });
        }
      } 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.success({
            message: msg,
          });
        }
      } 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) => {
        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.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() {
    // 基本信息
    // this.handleRest();
    // if (window.name === "") {
    //   this.$route.query.isEdit && this.handleBasicEdit();
    // } else {
    //   console.log("页面被刷新");
    // }
  },
};
</script>

<style lang="scss" scoped>
.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 {
    // height: calc(100vh - 200px);
    box-sizing: border-box;

    .md-basic {
      overflow: auto;

      .md-main {
        margin-bottom: 10px;

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

<style scoped>
>>> .el-drawer__header {
  display: none;
}
>>> .el-dialog__header {
  background-color: rgb(244, 244, 244);
}
>>> .MoreDataDialog .el-table__body-wrapper {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
>>> .MoreDataDialog .more-button {
  margin-top: 10px;
  text-align: right;
}

>>> .MoreDataDialog .referTree {
  height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
}
>>> .MoreDataDialog .el-table {
  margin-top: 10px;
}
>>> .MoreDataDialog .el-pagination {
  text-align: right;
  margin-top: 5px;
}

>>> .MoreDataDialog .el-dialog__body {
  height: 500px;
  padding: 20px 15px;
}
.md-content >>> .el-form-item,
.otherDialog >>> .el-form-item {
  margin-bottom: 0px;
}
.otherDialog >>> .el-collapse-item__content {
  padding-bottom: 12px;
}
.otherDialog >>> .el-checkbox {
  width: 100%;
  padding: 0 10%;
}
.otherDialog >>> .el-dialog__body {
  padding: 12px 20px;
  height: 80%;
  overflow: auto;
}
.otherDialog >>> .od-msg {
  max-height: 220px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.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;
  font-size: 12px;
}

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