测试完成

WXL

2025-08-07 b7f7f38d7ead0939d82a8a0fb301b30b72398acc

 src/views/knowledge/drug/index.vue

@@ -1,27 +1,1077 @@
<template>
  <div>
药品知识库
  <div class="DrugKnowledgeManagement">
    <!-- 左侧栏 -->
    <div class="sidecolumn">
      <div class="sidecolumn-top">
        <div class="top-wj">药品分类</div>
        <div class="top-tj" @click="dialogFormVisible = true">+添加</div>
      </div>
      <div class="center-ss">
        <el-input
          placeholder="请输入内容"
          v-model="sidecolumnval"
          class="input-with-select"
          size="medium">
        </el-input>
      </div>

      <div class="head-container" style="margin-top: 20px">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span v-if="data.id > 0">
              <el-button
                type="text"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="() => remove(node, data)">
              </el-button>
            </span>
            <span v-if="data.id > 0">
              <el-button
                type="text"
                circle
                size="mini"
                @click="() => altertag(node, data)">
                <span class="button-textxg"><i class="el-icon-edit-outline"></i></span>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <!-- 右侧数据 -->
    <div class="leftvlue">
      <div class="leftvlue-bg">
        <el-row :gutter="20">
          <!--药品数据-->
          <el-col :span="24" :xs="24">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
              label-width="98px">
              <el-form-item label="药品名称" prop="drugName">
                <el-input
                  v-model="queryParams.drugName"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item label="药品分类" prop="categoryId">
                <el-select v-model="queryParams.categoryId" placeholder="请选择">
                  <el-option
                    v-for="item in drugCategories"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="药品类型" prop="drugType">
                <el-select v-model="queryParams.drugType" placeholder="请选择">
                  <el-option
                    v-for="item in drugTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否处方药" prop="isPrescription">
                <el-select v-model="queryParams.isPrescription" placeholder="请选择">
                  <el-option
                    v-for="item in prescriptionOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="medium"
                  @click="handleQuery">搜索</el-button>
                <el-button
                  icon="el-icon-refresh"
                  size="medium"
                  @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="medium"
                  @click="handleAdd">新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="medium"
                  :disabled="multiple"
                  @click="handleDelete">删除</el-button>
              </el-col>
            </el-row>

            <el-table
              v-loading="loading"
              :data="filteredDrugList"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column
                label="药品名称"
                fixed
                align="center"
                key="drugName"
                prop="drugName"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                label="通用名"
                align="center"
                key="genericName"
                prop="genericName"
                :show-overflow-tooltip="true"
                width="200"/>
              <el-table-column
                label="药品分类"
                align="center"
                key="categoryName"
                prop="categoryName"
                :show-overflow-tooltip="true"/>
              <el-table-column
                label="药品类型"
                align="center"
                key="drugType"
                prop="drugType">
                <template slot-scope="scope">
                  <dict-tag :options="drugTypes" :value="scope.row.drugType"/>
                </template>
              </el-table-column>
              <el-table-column
                label="是否处方药"
                align="center"
                key="isPrescription"
                prop="isPrescription">
                <template slot-scope="scope">
                  <dict-tag :options="prescriptionOptions" :value="scope.row.isPrescription"/>
                </template>
              </el-table-column>
              <el-table-column
                label="规格"
                align="center"
                key="specification"
                prop="specification"
                width="120"/>
              <el-table-column
                label="单位"
                align="center"
                key="unit"
                prop="unit"
                width="80"/>
              <el-table-column
                label="生产厂家"
                align="center"
                key="manufacturer"
                prop="manufacturer"
                width="150"/>
              <el-table-column
                label="批准文号"
                align="center"
                key="approvalNumber"
                prop="approvalNumber"
                width="150"/>
              <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="200"
                class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="medium"
                    type="text"
                    @click="handleUpdate(scope.row)">
                    <span class="button-textxg"><i class="el-icon-edit"></i>修改</span>
                  </el-button>
                  <el-button
                    size="medium"
                    type="text"
                    @click="handleDelete(scope.row)">
                    <span class="button-textsc"><i class="el-icon-delete"></i>删除</span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"/>
          </el-col>
        </el-row>

        <!-- 添加或修改药品对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="drugOpen"
          :close-on-click-modal="false"
          width="900px"
          append-to-body>
          <el-form
            ref="drugForm"
            :model="drugForm"
            :rules="rules"
            label-width="100px">
            <div class="headline">
              <div class="basics">基础信息</div>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="12">
                <el-form-item label="药品名称" prop="drugName">
                  <el-input
                    v-model="drugForm.drugName"
                    placeholder="请输入药品名称"
                    maxlength="40"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通用名" prop="genericName">
                  <el-input
                    v-model="drugForm.genericName"
                    placeholder="请输入药品通用名"
                    maxlength="40"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="药品分类" prop="categoryId">
                  <el-select
                    style="width: 300px;"
                    v-model="drugForm.categoryId"
                    size="medium"
                    filterable
                    placeholder="请选择分类">
                    <el-option-group
                      v-for="group in deptOptions"
                      :key="group.id"
                      :label="group.categoryName">
                      <el-option
                        v-for="item in group.children"
                        :key="item.id"
                        :label="item.categoryName"
                        :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="药品类型" prop="drugType">
                  <el-select v-model="drugForm.drugType" placeholder="请选择药品类型">
                    <el-option
                      v-for="item in drugTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否处方药" prop="isPrescription">
                  <el-radio-group v-model="drugForm.isPrescription">
                    <el-radio
                      v-for="(item, index) in prescriptionOptions"
                      :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批准文号" prop="approvalNumber">
                  <el-input
                    v-model="drugForm.approvalNumber"
                    placeholder="请输入批准文号"
                    maxlength="40"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="规格" prop="specification">
                  <el-input
                    v-model="drugForm.specification"
                    placeholder="请输入药品规格"
                    maxlength="40"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位" prop="unit">
                  <el-select v-model="drugForm.unit" placeholder="请选择单位">
                    <el-option
                      v-for="item in unitOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生产厂家" prop="manufacturer">
                  <el-input
                    v-model="drugForm.manufacturer"
                    placeholder="请输入生产厂家"
                    maxlength="100"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="条形码" prop="barcode">
                  <el-input
                    v-model="drugForm.barcode"
                    placeholder="请输入条形码"
                    maxlength="40"/>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="headline">
              <div class="basics">药品成分</div>
            </div>
            <el-divider></el-divider>
            <el-form-item prop="ingredients">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入药品主要成分"
                v-model="drugForm.ingredients">
              </el-input>
            </el-form-item>

            <div class="headline">
              <div class="basics">用法用量</div>
            </div>
            <el-divider></el-divider>
            <el-form-item prop="usageDosage">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入用法用量说明"
                v-model="drugForm.usageDosage">
              </el-input>
            </el-form-item>

            <div class="headline">
              <div class="basics">不良反应</div>
            </div>
            <el-divider></el-divider>
            <el-form-item prop="adverseReactions">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入不良反应说明"
                v-model="drugForm.adverseReactions">
              </el-input>
            </el-form-item>

            <div class="headline">
              <div class="basics">禁忌</div>
            </div>
            <el-divider></el-divider>
            <el-form-item prop="contraindications">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入禁忌说明"
                v-model="drugForm.contraindications">
              </el-input>
            </el-form-item>

            <div class="headline">
              <div class="basics">注意事项</div>
            </div>
            <el-divider></el-divider>
            <el-form-item prop="precautions">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入注意事项"
                v-model="drugForm.precautions">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel">关 闭</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 添加类别弹框 -->
    <el-dialog title="新增类别" width="30%" :visible.sync="dialogFormVisible">
      <div style="text-align: center; margin-bottom: 20px">
        <el-radio-group v-model="radio">
          <el-radio-button label="主分类"></el-radio-button>
          <el-radio-button label="子分类"></el-radio-button>
        </el-radio-group>
      </div>
      <el-divider></el-divider>

      <el-form :model="classifyform">
        <el-form-item label="请选择药品大类" v-if="radio == '子分类'">
          <el-select v-model="classifyform.pid" placeholder="请选择">
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请输入类别名称">
          <el-input
            v-model="classifyform.categoryName"
            autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="getDeptTree()">取 消</el-button>
        <el-button type="primary" @click="submitsidecolumn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
  name: "DrugKnowledge",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  data() {
    return {

      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      idds: "",
      classifyform: {  // 添加这个对象
        id: undefined,
        pid: undefined,
        categoryName: undefined
      },
      amendtag: false, //是否修改类别
      dialogFormVisible: false, //修改添加类别弹框
      deleteVisible: false, //分类删除弹框
      deletefenl: "高血压", //删除项
      radio: "主分类",
      // 表格数据
      drugList: [
        {
          id: 1,
          drugName: "阿莫西林胶囊",
          genericName: "阿莫西林",
          categoryId: 101,
          categoryName: "抗生素",
          drugType: "1",
          isPrescription: "1",
          specification: "0.25g×24粒",
          unit: "盒",
          manufacturer: "华北制药",
          approvalNumber: "国药准字H13024176",
          barcode: "6923450601234",
          ingredients: "阿莫西林",
          usageDosage: "口服。成人一次0.5g，每6～8小时1次，一日剂量不超过4g。",
          adverseReactions: "1.恶心、呕吐、腹泻及假膜性肠炎等胃肠道反应。2.皮疹、药物热和哮喘等过敏反应。",
          contraindications: "青霉素过敏及青霉素皮肤试验阳性患者禁用。",
          precautions: "1.青霉素类口服药物偶可引起过敏性休克，尤多见于有青霉素或头孢菌素过敏史的患者。2.传染性单核细胞增多症患者应用本品易发生皮疹，应避免使用。"
        },
        {
          id: 2,
          drugName: "板蓝根颗粒",
          genericName: "板蓝根",
          categoryId: 302,
          categoryName: "片剂",
          drugType: "3",
          isPrescription: "0",
          specification: "10g×20袋",
          unit: "盒",
          manufacturer: "白云山制药",
          approvalNumber: "国药准字Z44023445",
          barcode: "6923450605678",
          ingredients: "板蓝根",
          usageDosage: "开水冲服。一次5～10g，一日3～4次。",
          adverseReactions: "尚不明确。",
          contraindications: "尚不明确。",
          precautions: "1.忌烟、酒及辛辣、生冷、油腻食物。2.不宜在服药期间同时服用滋补性中药。"
        },
        {
          id: 3,
          drugName: "复方丹参片",
          genericName: "复方丹参",
          categoryId: 303,
          categoryName: "胶囊",
          drugType: "3",
          isPrescription: "0",
          specification: "60片",
          unit: "瓶",
          manufacturer: "同仁堂",
          approvalNumber: "国药准字Z11020672",
          barcode: "6923450609012",
          ingredients: "丹参、三七、冰片",
          usageDosage: "口服。一次3片，一日3次。",
          adverseReactions: "尚不明确。",
          contraindications: "孕妇禁用。",
          precautions: "1.忌食生冷、辛辣、油腻食物。2.服药期间如有不适，应立即停药并就医。"
        },
        {
          id: 4,
          drugName: "布洛芬缓释胶囊",
          genericName: "布洛芬",
          categoryId: 102,
          categoryName: "解热镇痛药",
          drugType: "1",
          isPrescription: "0",
          specification: "0.3g×20粒",
          unit: "盒",
          manufacturer: "中美史克",
          approvalNumber: "国药准字H10900089",
          barcode: "6923450612345",
          ingredients: "布洛芬",
          usageDosage: "口服。成人一次1粒，一日2次(早晚各一次)。",
          adverseReactions: "1.少数病人可出现恶心、呕吐、胃烧灼感或轻度消化不良、胃肠道溃疡及出血、转氨酶升高、头痛、头晕、耳鸣、视力模糊、精神紧张、嗜睡、下肢水肿或体重骤增。",
          contraindications: "1.对其他非甾体抗炎药过敏者禁用。2.孕妇及哺乳期妇女禁用。3.对阿司匹林过敏的哮喘患者禁用。",
          precautions: "1.本品为对症治疗药，不宜长期或大量使用，用于止痛不得超过5天，用于解热不得超过3天，如症状不缓解，请咨询医师或药师。2.不能同时服用其他含有解热镇痛药的药品(如某些复方抗感冒药)。"
        },
        {
          id: 5,
          drugName: "六味地黄丸",
          genericName: "六味地黄",
          categoryId: 201,
          categoryName: "补益药",
          drugType: "3",
          isPrescription: "0",
          specification: "200丸",
          unit: "瓶",
          manufacturer: "同仁堂",
          approvalNumber: "国药准字Z11020061",
          barcode: "6923450615678",
          ingredients: "熟地黄、酒萸肉、牡丹皮、山药、茯苓、泽泻",
          usageDosage: "口服。一次8丸，一日3次。",
          adverseReactions: "尚不明确。",
          contraindications: "尚不明确。",
          precautions: "1.忌辛辣食物。2.不宜在服药期间服感冒药。3.服药期间出现食欲不振，胃脘不适，大便稀，腹痛等症状时，应去医院就诊。"
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      drugOpen: false,
      // 日期范围
      dateRange: [],
      // 药品分类选项
      drugCategories: [
        { id: 101, categoryName: "抗生素" },
        { id: 102, categoryName: "解热镇痛药" },
        { id: 103, categoryName: "心血管药物" },
        { id: 201, categoryName: "补益药" },
        { id: 202, categoryName: "清热药" },
        { id: 203, categoryName: "祛湿药" },
        { id: 301, categoryName: "丸剂" },
        { id: 302, categoryName: "片剂" },
        { id: 303, categoryName: "胶囊" }
      ],
      // 添加、修改参数
      drugForm: {},
      deptOptions: [
        {
          id: 1,
          categoryName: "西药",
          children: [
            { id: 101, categoryName: "抗生素" },
            { id: 102, categoryName: "解热镇痛药" },
            { id: 103, categoryName: "心血管药物" }
          ]
        },
        {
          id: 2,
          categoryName: "中药",
          children: [
            { id: 201, categoryName: "补益药" },
            { id: 202, categoryName: "清热药" },
            { id: 203, categoryName: "祛湿药" }
          ]
        },
        {
          id: 3,
          categoryName: "中成药",
          children: [
            { id: 301, categoryName: "丸剂" },
            { id: 302, categoryName: "片剂" },
            { id: 303, categoryName: "胶囊" }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "categoryName",
      },
      sidecolumnform: {}, //添加类别表单
      dialogFormVisible: false, //添加类别弹框
      sidecolumnval: "", //类别搜索
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        drugName: undefined,
        categoryId: undefined,
        drugType: undefined,
        isPrescription: undefined
      },
      // 药品类型选项
      drugTypes: [
        { value: "1", label: "西药" },
        { value: "2", label: "中药" },
        { value: "3", label: "中成药" },
        { value: "4", label: "生物制品" },
        { value: "5", label: "其他" }
      ],
      // 是否处方药选项
      prescriptionOptions: [
        { value: "1", label: "处方药" },
        { value: "0", label: "非处方药" }
      ],
      // 单位选项
      unitOptions: [
        { value: "盒", label: "盒" },
        { value: "瓶", label: "瓶" },
        { value: "支", label: "支" },
        { value: "袋", label: "袋" },
        { value: "片", label: "片" },
        { value: "粒", label: "粒" },
        { value: "g", label: "克" },
        { value: "ml", label: "毫升" }
      ],
      // 表单校验
      rules: {
        drugName: [
          { required: true, message: "药品名称不能为空", trigger: "blur" }
        ],
        genericName: [
          { required: true, message: "通用名不能为空", trigger: "blur" }
        ],
        categoryId: [
          { required: true, message: "药品分类不能为空", trigger: "blur" }
        ],
        drugType: [
          { required: true, message: "药品类型不能为空", trigger: "blur" }
        ],
        isPrescription: [
          { required: true, message: "是否处方药不能为空", trigger: "blur" }
        ],
        specification: [
          { required: true, message: "规格不能为空", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "单位不能为空", trigger: "blur" }
        ],
        approvalNumber: [
          { required: true, message: "批准文号不能为空", trigger: "blur" }
        ],
        manufacturer: [
          { required: true, message: "生产厂家不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    filteredDrugList() {
      let list = [...this.drugList];
      if (this.queryParams.drugName) {
        list = list.filter(item =>
          item.drugName.includes(this.queryParams.drugName)
        );
      }
      if (this.queryParams.categoryId) {
        list = list.filter(item =>
          item.categoryId == this.queryParams.categoryId
        );
      }
      if (this.queryParams.drugType) {
        list = list.filter(item =>
          item.drugType == this.queryParams.drugType
        );
      }
      if (this.queryParams.isPrescription) {
        list = list.filter(item =>
          item.isPrescription == this.queryParams.isPrescription
        );
      }
      return list;
    }
  },

  created () {

  watch: {
    // 根据名称筛选部门树
    sidecolumnval(val) {
      this.$refs.tree.filter(val);
    }
  },

  created() {
    // 初始化数据
    this.total = this.drugList.length;
  },
  methods: {
    /** 查询药品列表 */
    getList() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    /** 查询药品分类树结构 */
    getDeptTree() {
      this.dialogFormVisible = false;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.categoryName.indexOf(value) !== -1;
    },
    // 添加类别树
    submitsidecolumn() {
      if (this.classifyform.id) {
        // 模拟修改分类
        const category = this.findCategory(this.classifyform.id);
        if (category) {
          category.categoryName = this.classifyform.categoryName;
          if (this.classifyform.pid) {
            category.pid = this.classifyform.pid;
          }
        }
        this.$modal.msgSuccess("修改成功");
        this.classifyform = {};
        this.dialogFormVisible = false;
        return;
      }

      // 模拟新增分类
      const newCategory = {
        id: Math.max(...this.deptOptions.flatMap(group =>
          [group.id, ...(group.children || []).map(child => child.id)]
        )) + 1,
        categoryName: this.classifyform.categoryName,
        pid: this.radio === "子分类" ? this.classifyform.pid : null
      };

      if (this.radio === "子分类") {
        const parent = this.findCategory(this.classifyform.pid);
        if (parent) {
          if (!parent.children) parent.children = [];
          parent.children.push(newCategory);
        }
      } else {
        newCategory.children = [];
        this.deptOptions.push(newCategory);
      }

      this.$modal.msgSuccess("新增成功");
      this.classifyform = {};
      this.dialogFormVisible = false;
    },

    findCategory(id) {
      for (const group of this.deptOptions) {
        if (group.id === id) return group;
        if (group.children) {
          for (const child of group.children) {
            if (child.id === id) return child;
          }
        }
      }
      return null;
    },

    remove(a, b) {
      if (b.pid) {
        this.$modal
          .confirm('是否确认删除分类项为"' + b.categoryName + '"的数据项？')
          .then(() => {
            // 模拟删除子分类
            const parent = this.findCategory(b.pid);
            if (parent && parent.children) {
              parent.children = parent.children.filter(child => child.id !== b.id);
            }
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        this.$modal
          .confirm(
            '是否确认删除一级分类"' +
              b.categoryName +
              '"？删除后其下分类将归类‘未分类’'
          )
          .then(() => {
            // 模拟删除主分类
            this.deptOptions = this.deptOptions.filter(group => group.id !== b.id);
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },
    altertag(a, b) {
      this.dialogFormVisible = true;
      if (!b.pid) {
        this.radio = "主分类";
      } else {
        this.radio = "子分类";
      }
      this.classifyform = JSON.parse(JSON.stringify(b));
      this.dialogFormVisible = true;
    },
    handleNodeClick(data) {
      this.queryParams.categoryId = data.id;
    },

    // 取消按钮
    cancel() {
      this.drugForm = {};
      this.drugOpen = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.drugForm = {
        id: undefined,
        drugName: undefined,
        genericName: undefined,
        categoryId: undefined,
        drugType: undefined,
        isPrescription: undefined,
        specification: undefined,
        unit: undefined,
        manufacturer: undefined,
        approvalNumber: undefined,
        barcode: undefined,
        ingredients: undefined,
        usageDosage: undefined,
        adverseReactions: undefined,
        contraindications: undefined,
        precautions: undefined
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        drugName: undefined,
        categoryId: undefined,
        drugType: undefined,
        isPrescription: undefined
      };
      this.$refs.tree.setCurrentKey(null);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.title = "新增药品";
      this.drugForm = {};
      this.drugOpen = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.title = "修改药品信息";
      this.drugForm = Object.assign({}, row);
      this.drugOpen = true;
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["drugForm"].validate(valid => {
        if (valid) {
          if (this.drugForm.id != undefined) {
            // 模拟修改药品
            const index = this.drugList.findIndex(item => item.id === this.drugForm.id);
            if (index !== -1) {
              this.drugList.splice(index, 1, this.drugForm);
            }
            this.$modal.msgSuccess("修改成功");
          } else {
            // 模拟新增药品
            this.drugForm.id = Math.max(...this.drugList.map(item => item.id)) + 1;
            this.drugList.unshift(this.drugForm);
            this.total = this.drugList.length;
            this.$modal.msgSuccess("新增成功");
          }
          this.drugOpen = false;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const drugIds = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除药品名称为"' + row.drugName + '"的数据项？')
        .then(() => {
          // 模拟删除药品
          this.drugList = this.drugList.filter(item => item.id !== drugIds);
          this.total = this.drugList.length;
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    }
  }
}
};
</script>

<style lang='scss' scoped>

<style lang="scss" scoped>
.DrugKnowledgeManagement {
  display: flex;
}
.sidecolumn {
  width: 300px;
  min-height: 100vh;
  text-align: center;
  margin-top: 20px;
  margin: 20px;
  padding: 30px;
  background: #fff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .sidecolumn-top {
    display: flex;
    justify-content: space-between;
    .top-wj {
      font-size: 20px;
    }
    .top-tj {
      font-size: 18px;
      color: rgb(0, 89, 255);
      cursor: pointer;
    }
  }
  .center-ss {
    margin-top: 30px;
    .input-with-select {
      height: 40px !important;
    }
  }
  .bottom-fl {
    margin-top: 30px;
    display: center !important;
  }
}
.headline {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  border-left: 4px solid #41a1be;
  padding-left: 5px;
  margin: 15px 0;
}
.leftvlue {
  width: 80%;
  margin-top: 20px;
  padding: 30px;
  background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
}
::v-deep .el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 46px;
  font-size: 20px;
  cursor: pointer;
}
::v-deep .el-tree {
  position: relative;
  cursor: default;
  border-radius: 5px;
  background: #eff8fe;
  color: #606266;
  border: 1px solid #bbe1fa;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
}
::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #7799fb;
  color: #fff;
}
::v-deep .el-button--mini.is-circle {
  padding: 7px;
  margin: 0;
  color: red;
}
.button-text {
  color: rgb(70, 204, 238);
}
.button-textcs {
  color: rgb(39, 167, 67);
}
.button-textxg {
  color: rgb(35, 81, 233);
}
.button-textsc {
  color: rgb(235, 23, 23);
}
</style>