index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="名称" prop="diseaseName">
  5. <el-input
  6. v-model="queryParams.diseaseName"
  7. placeholder="请输入名称"
  8. clearable
  9. size="small"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="疾病编码" prop="diseaseCode">
  14. <el-input
  15. v-model="queryParams.diseaseCode"
  16. placeholder="请输入疾病编码"
  17. clearable
  18. size="small"
  19. @keyup.enter.native="handleQuery"
  20. />
  21. </el-form-item>
  22. <el-form-item label="科室" prop="deptId">
  23. <el-select v-model="queryParams.deptId" placeholder="请选择所属科室">
  24. <el-option
  25. v-for="dict in depList"
  26. :key="dict.dictValue"
  27. :label="dict.dictLabel"
  28. :value="dict.dictValue"
  29. />
  30. </el-select>
  31. </el-form-item>
  32. <el-form-item label="状态" prop="status">
  33. <el-select v-model="queryParams.status" placeholder="状态" clearable size="small">
  34. <el-option
  35. v-for="dict in statusOptions"
  36. :key="dict.dictValue"
  37. :label="dict.dictLabel"
  38. :value="dict.dictValue"
  39. />
  40. </el-select>
  41. </el-form-item>
  42. <el-form-item>
  43. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  44. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  45. </el-form-item>
  46. </el-form>
  47. <el-row :gutter="10" class="mb8">
  48. <el-col :span="1.5">
  49. <el-button
  50. type="primary"
  51. plain
  52. icon="el-icon-plus"
  53. size="mini"
  54. @click="handleAdd"
  55. v-hasPermi="['his:disease:add']"
  56. >新增</el-button>
  57. </el-col>
  58. <el-col :span="1.5">
  59. <el-button
  60. type="success"
  61. plain
  62. icon="el-icon-edit"
  63. size="mini"
  64. :disabled="single"
  65. @click="handleUpdate"
  66. v-hasPermi="['his:disease:edit']"
  67. >修改</el-button>
  68. </el-col>
  69. <el-col :span="1.5">
  70. <el-button
  71. type="danger"
  72. plain
  73. icon="el-icon-delete"
  74. size="mini"
  75. :disabled="multiple"
  76. @click="handleDelete"
  77. v-hasPermi="['his:disease:remove']"
  78. >删除</el-button>
  79. </el-col>
  80. <el-col :span="1.5">
  81. <el-button
  82. type="warning"
  83. plain
  84. icon="el-icon-download"
  85. size="mini"
  86. :loading="exportLoading"
  87. @click="handleExport"
  88. v-hasPermi="['his:disease:export']"
  89. >导出</el-button>
  90. </el-col>
  91. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  92. </el-row>
  93. <el-table v-loading="loading" border :data="diseaseList" @selection-change="handleSelectionChange">
  94. <el-table-column type="selection" width="55" align="center" />
  95. <el-table-column label="疾病名称" align="center" prop="diseaseName" />
  96. <el-table-column label="疾病编码" align="center" prop="diseaseCode" />
  97. <el-table-column label="所属科室" align="center" prop="deptName" />
  98. <el-table-column label="简介" align="center" prop="introduction" show-overflow-tooltip/>
  99. <el-table-column label="诊断" align="center" prop="diagnose" show-overflow-tooltip/>
  100. <el-table-column label="状态" align="center">
  101. <template slot-scope="scope">
  102. <dict-tag :options="statusOptions" :value="scope.row.status"/>
  103. </template>
  104. </el-table-column>
  105. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
  106. <template slot-scope="scope">
  107. <el-button
  108. size="mini"
  109. type="text"
  110. icon="el-icon-edit"
  111. @click="handleUpdate(scope.row)"
  112. v-hasPermi="['his:disease:edit']"
  113. >修改</el-button>
  114. <el-button
  115. size="mini"
  116. type="text"
  117. @click="handledetails(scope.row)"
  118. v-hasPermi="['his:disease:details']"
  119. >详情</el-button>
  120. <el-button
  121. size="mini"
  122. type="text"
  123. icon="el-icon-delete"
  124. @click="handleDelete(scope.row)"
  125. v-hasPermi="['his:disease:remove']"
  126. >删除</el-button>
  127. </template>
  128. </el-table-column>
  129. </el-table>
  130. <pagination
  131. v-show="total>0"
  132. :total="total"
  133. :page.sync="queryParams.pageNum"
  134. :limit.sync="queryParams.pageSize"
  135. @pagination="getList"
  136. />
  137. <!-- 添加或修改疾病对话框 -->
  138. <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :rules="rules">
  139. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  140. <el-form-item label="疾病名称" prop="diseaseName">
  141. <el-input v-model="form.diseaseName" placeholder="请输入疾病名称" />
  142. </el-form-item>
  143. <el-form-item label="疾病编码" prop="diseaseCode">
  144. <el-input v-model="form.diseaseCode" placeholder="请输入疾病编码" />
  145. </el-form-item>
  146. <el-form-item label="所属科室" prop="deptId">
  147. <el-select v-model="form.deptId" placeholder="请选择所属科室">
  148. <el-option
  149. v-for="dict in depList"
  150. :key="dict.dictValue"
  151. :label="dict.dictLabel"
  152. :value="dict.dictValue"
  153. />
  154. </el-select>
  155. </el-form-item>
  156. <el-form-item label="简介">
  157. <el-input v-model="form.introduction" type="textarea"/>
  158. </el-form-item>
  159. <el-form-item label="诊断">
  160. <el-input v-model="form.diagnose" type="textarea" />
  161. </el-form-item>
  162. <el-form-item label="症状">
  163. <editor v-model="form.symptom" :min-height="292" />
  164. </el-form-item>
  165. <el-form-item label="检验">
  166. <editor v-model="form.inspect" :min-height="292"/>
  167. </el-form-item>
  168. <el-form-item label="状态" prop="status">
  169. <el-select v-model="form.status" placeholder="状态" clearable size="small">
  170. <el-option
  171. v-for="dict in statusOptions"
  172. :key="dict.dictValue"
  173. :label="dict.dictLabel"
  174. :value="dict.dictValue"
  175. />
  176. </el-select>
  177. </el-form-item>
  178. </el-form>
  179. <div slot="footer" class="dialog-footer">
  180. <el-button type="primary" @click="submitForm">确 定</el-button>
  181. <el-button @click="cancel">取 消</el-button>
  182. </div>
  183. </el-dialog>
  184. <el-drawer
  185. :with-header="false"
  186. size="75%"
  187. :title="show.title" :visible.sync="show.open">
  188. <diseaseDetails ref="diseaseDetails" :data='show'/>
  189. </el-drawer>
  190. </div>
  191. </template>
  192. <script>
  193. import { listDisease, getDisease, delDisease, addDisease, updateDisease, exportDisease ,listDepartment} from "@/api/store/disease";
  194. import diseaseDetails from '../components/diseaseDetails.vue';
  195. export default {
  196. name: "Disease",
  197. components: { diseaseDetails },
  198. data() {
  199. return {
  200. show:{
  201. title:"疾病详情",
  202. open:false,
  203. },
  204. //科室列表
  205. depList:[],
  206. statusOptions: [],
  207. // 遮罩层
  208. loading: true,
  209. // 导出遮罩层
  210. exportLoading: false,
  211. // 选中数组
  212. ids: [],
  213. // 非单个禁用
  214. single: true,
  215. // 非多个禁用
  216. multiple: true,
  217. // 显示搜索条件
  218. showSearch: true,
  219. // 总条数
  220. total: 0,
  221. // 疾病表格数据
  222. diseaseList: [],
  223. // 弹出层标题
  224. title: "",
  225. // 是否显示弹出层
  226. open: false,
  227. // 查询参数
  228. queryParams: {
  229. pageNum: 1,
  230. pageSize: 10,
  231. diseaseName: null,
  232. diseaseCode: null,
  233. deptId: null,
  234. introduction: null,
  235. symptom: null,
  236. diagnose: null,
  237. inspect: null,
  238. status: null,
  239. },
  240. // 表单参数
  241. form: {},
  242. // 表单校验
  243. rules: {
  244. diseaseName: [
  245. { required: true, message: "疾病名称不能为空", trigger: "blur" }
  246. ],
  247. diseaseCode: [
  248. { required: true, message: "疾病编码不能为空", trigger: "blur" }
  249. ],
  250. deptId: [
  251. { required: true, message: "科室不能为空", trigger: "blur" }
  252. ],
  253. introduction: [
  254. { required: true, message: "简介不能为空", trigger: "blur" }
  255. ],
  256. status: [
  257. { required: true, message: "状态不能为空", trigger: "blur" }
  258. ],
  259. }
  260. };
  261. },
  262. created() {
  263. this.getList();
  264. this.getDicts("sys_company_status").then(response => {
  265. this.statusOptions = response.data;
  266. });
  267. this.getdeplist();
  268. },
  269. methods: {
  270. /** 查询科室列表 */
  271. getdeplist() {
  272. listDepartment().then(response => {
  273. this.depList = response.rows;
  274. });
  275. },
  276. /** 查询疾病列表 */
  277. getList() {
  278. this.loading = true;
  279. this.queryParams.deptName = null;
  280. listDisease(this.queryParams).then(response => {
  281. this.diseaseList = response.rows;
  282. this.total = response.total;
  283. this.loading = false;
  284. });
  285. },
  286. // 取消按钮
  287. cancel() {
  288. this.open = false;
  289. this.reset();
  290. },
  291. // 表单重置
  292. reset() {
  293. this.form = {
  294. diseaseId: null,
  295. diseaseName: null,
  296. diseaseCode: null,
  297. deptId: null,
  298. introduction: null,
  299. symptom: null,
  300. diagnose: null,
  301. inspect: null,
  302. status: null,
  303. createTime: null
  304. };
  305. this.resetForm("form");
  306. },
  307. /** 搜索按钮操作 */
  308. handleQuery() {
  309. this.queryParams.pageNum = 1;
  310. this.getList();
  311. },
  312. /** 重置按钮操作 */
  313. resetQuery() {
  314. this.resetForm("queryForm");
  315. this.handleQuery();
  316. },
  317. // 多选框选中数据
  318. handleSelectionChange(selection) {
  319. this.ids = selection.map(item => item.diseaseId)
  320. this.single = selection.length!==1
  321. this.multiple = !selection.length
  322. },
  323. /** 新增按钮操作 */
  324. handleAdd() {
  325. this.reset();
  326. this.open = true;
  327. this.title = "添加疾病";
  328. },
  329. /** 修改按钮操作 */
  330. handleUpdate(row) {
  331. this.reset();
  332. const diseaseId = row.diseaseId || this.ids
  333. getDisease(diseaseId).then(response => {
  334. this.form = response.data;
  335. this.open = true;
  336. this.title = "修改疾病";
  337. this.form.status = String(this.form.status)
  338. });
  339. },
  340. /** 详情按钮 */
  341. handledetails(row){
  342. this.show.open=true;
  343. setTimeout(() => {
  344. this.$refs.diseaseDetails.getDetails(row.diseaseId);
  345. }, 1);
  346. },
  347. /** 提交按钮 */
  348. submitForm() {
  349. this.$refs["form"].validate(valid => {
  350. if (valid) {
  351. if (this.form.diseaseId != null) {
  352. updateDisease(this.form).then(response => {
  353. this.msgSuccess("修改成功");
  354. this.open = false;
  355. this.getList();
  356. });
  357. } else {
  358. addDisease(this.form).then(response => {
  359. this.msgSuccess("新增成功");
  360. this.open = false;
  361. this.getList();
  362. });
  363. }
  364. }
  365. });
  366. },
  367. /** 删除按钮操作 */
  368. handleDelete(row) {
  369. const diseaseIds = row.diseaseId || this.ids;
  370. this.$confirm('是否确认删除疾病编号为"' + diseaseIds + '"的数据项?', "警告", {
  371. confirmButtonText: "确定",
  372. cancelButtonText: "取消",
  373. type: "warning"
  374. }).then(function() {
  375. return delDisease(diseaseIds);
  376. }).then(() => {
  377. this.getList();
  378. this.msgSuccess("删除成功");
  379. }).catch(() => {});
  380. },
  381. /** 导出按钮操作 */
  382. handleExport() {
  383. const queryParams = this.queryParams;
  384. this.$confirm('是否确认导出所有疾病数据项?', "警告", {
  385. confirmButtonText: "确定",
  386. cancelButtonText: "取消",
  387. type: "warning"
  388. }).then(() => {
  389. this.exportLoading = true;
  390. return exportDisease(queryParams);
  391. }).then(response => {
  392. this.download(response.msg);
  393. this.exportLoading = false;
  394. }).catch(() => {});
  395. }
  396. }
  397. };
  398. </script>