<template>
|
<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 {
|
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;
|
}
|
},
|
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>
|
.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>
|
