|
|
<template> <div class="box"> <div style="width: 95%"> <el-card> <el-table :data="tableData" style="width: 100%" row-key="id" height="240" class="el-table__body-wrapper tbody" @row-click="rowick" highlight-current-row > <el-table-column prop="id" label="id" width="300"> </el-table-column> <el-table-column prop="displayName" label="名称" width=""> </el-table-column> <el-table-column prop="creatorName" label="创建者" width=""> </el-table-column> <el-table-column prop="lastModifierName" label="修改者" width=""> </el-table-column> <el-table-column prop="creationTime" label="创建时间" width="200"> <template slot-scope="scope"> {{ scope.row.creationTime | dateFormat }} </template> </el-table-column> <el-table-column prop="lastModificationTime" label="修改时间" width="200" > <template slot-scope="scope"> {{ scope.row.lastModificationTime | dateFormat }} </template> </el-table-column> <el-table-column label="操作"> <template> <el-tag class="move" style="cursor: move; margin-left: 15px" draggable="true" > <i class="el-icon-d-caret" style="width: 1rem; height: 1rem" ></i> </el-tag> </template> </el-table-column> </el-table> <!-- 新增或者编辑弹框 --> <el-dialog :title="title == 1 ? '新增' : '编辑'" :visible.sync="dialogVisible" width="50%" @close="bindidclose" > <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" > <el-row> <el-col :span="8"> <el-form-item label="名称" prop="displayName"> <el-input v-model="form.displayName"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="简称" prop="shortName"> <el-input v-model="form.shortName"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="适用性别" prop="forSexId"> <el-select v-model="form.forSexId" placeholder="请选择"> <el-option v-for="item in forSexId" :key="item.id" :label="item.displayName" :value="item.id" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="项目类别" prop="itemTypeId"> <el-select v-model="form.itemTypeId" placeholder="请选择"> <el-option v-for="item in itemTypeId" :key="item.id" :label="item.displayName" :value="item.id" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="价格" prop="price"> <el-input v-model="form.price"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="仪器类别" prop="deviceTypeId"> <el-select v-model="form.deviceTypeId" placeholder="请选择"> <el-option v-for="item in deviceTypeId" :key="item.id" :label="item.displayName" :value="item.id" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="发票类别" prop="invoiceItemTypeId"> <el-select v-model="form.invoiceItemTypeId" placeholder="请选择" > <el-option v-for="item in invoiceItemTypeId" :key="item.id" :label="item.displayName" :value="item.id" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="项目结果合并" prop="isItemResultMerger" label-width="110px" > <el-select v-model="form.isItemResultMerger" placeholder="请选择" > <el-option v-for="item in isItemResultMerger" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="餐前项目" prop="isBeforeEat"> <el-select v-model="form.isBeforeEat" placeholder="请选择"> <el-option v-for="item in isBeforeEat" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="临床意义" prop=""> <el-input v-model="form.clinicalMeaning"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="默认结果" prop=""> <el-input v-model="form.defaultResult"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="候诊时间" prop="queueTime"> <el-input v-model="form.queueTime"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="启用诊断" prop="isDiagnosisFunction"> <el-select v-model="form.isDiagnosisFunction" placeholder="请选择" > <el-option v-for="item in isDiagnosisFunction" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="诊断函数" prop="diagnosisFunction"> <el-input v-model="form.diagnosisFunction" maxlength="1" show-word-limit ></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="函数处理完毕" prop="isContinueProcess" label-width="110px" > <el-select v-model="form.isContinueProcess" placeholder="请选择" > <el-option v-for="item in isContinueProcess" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="体检报告" prop="isPictureRotate"> <el-select v-model="form.isPictureRotate" placeholder="请选择" > <el-option v-for="item in isPictureRotate" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="检查项目" prop="isCheck"> <el-select v-model="form.isCheck" placeholder="请选择"> <el-option v-for="item in isCheck" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="启用" prop="isActive"> <el-select v-model="form.isActive" placeholder="请选择"> <el-option v-for="item in isActive" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="addoredit">确 定</el-button> </span> </el-dialog> <span style="margin-top: 10px; padding: 5px; margin-left: 25.8%" >项目类别</span > <el-select v-model="values" placeholder="请选择" @change="ischangs" style="margin-top: 5px" > <el-option v-for="item in projectid" :key="item.id" :label="item.displayName" :value="item.id" > </el-option> </el-select> <span style="margin-left: 10%; padding: 5px">搜索选择</span> <el-select @change="selectitem" filterable v-model="flitvalues" placeholder="请选择" style="margin-top: 5px" > <el-option v-for="item in filetelists" :key="item.id" :label="item.displayName" :value="item.id" > </el-option> </el-select> <!--表单穿梭区域 --> <div class="mainbox"> <div class="mainleftbox"> <div class="weixuan">未选项目</div> <div v-for="(item, index) in leftdata" :key="index" @click="clickPaixu(item, index)" @dblclick="shuanji(item, index)" :class="num === index ? 'activetext' : ''" style="" > <div>{{ item.displayName }}</div> </div> </div> <div class="Selectbutton"> <div style="margin-top: 10px"> <el-button @click="addall" >全添加<i class="el-icon-caret-right"></i ><i class="el-icon-caret-right"></i ></el-button> </div> <div style="margin-top: 10px"> <el-button @click="addobj" style="width: 111px" >添加<i class="el-icon-caret-right"></i> </el-button> </div> <div style="margin-top: 10px"> <el-button @click="removeright" style="width: 111px" >移去<i class="el-icon-caret-left"></i> </el-button> </div> <div style="margin-top: 10px"> <el-button @click="allclear" >全移去<i class="el-icon-caret-left"></i ><i class="el-icon-caret-left"></i> </el-button> </div> </div> <div class="mainleftbox"> <div class="weixuan">已选项目</div> <div v-for="(item, index) in rightdata" :key="index" @click="rightindex(item, index)" @dblclick="rightdelite(item, index)" :class="nums === index ? 'activetext' : ''" > <div>{{ item.displayName }}</div> </div> </div> </div> <div class="confirmcancellation"> <el-button :disabled="isdislob" @click="Onsubmit">确定</el-button> <el-button :disabled="isdislob">取消</el-button> </div> </el-card> </div> <!-- 按钮区域 --> <div style="margin-left: 10px; margin-top: 5%"> <el-button type="primary" @click="addll">新增</el-button> <div style="margin-top: 10px"> <el-button type="primary" @click="editpopup">编辑</el-button> </div> <div style="margin-top: 10px"> <el-button type="danger" @click="deleteid">删除</el-button> </div> <div style="margin-top: 10px"> <el-button type="primary" @click="topping">置顶</el-button> </div> <div style="margin-top: 10px"> <el-button type="primary" @click="setlow">置底</el-button> </div> <div style="margin-top: 10px"> <el-button type="primary" :disabled="isshow" @click="assertion" >排序</el-button > </div> <div style="margin-top: 10px"> <el-button type="primary" :disabled="isshow" @click="cancellation" >取消</el-button > </div> </div> </div></template><script>import Sortable from "sortablejs";import { getapi, postapi } from "@/api/api";import { examinationgender, instrumentlist } from "@/request/systemapi";import { groupsandlist, projectlist, invoicetypelist, newcombination, asbitemgetid, updateombination, samplesetlow, deletescombinationprojectid, combination,} from "@/request/commonapi";export default { data() { return { isdislob: true, filetelists: [], flitvalues: [], num: 0, isshow: true, values: [], projectid: [], rules: { displayName: [ { required: true, message: "请输入名称", trigger: "blur" }, ], shortName: [{ required: true, message: "请输入简称", trigger: "blur" }], forSexId: [ { required: true, message: "请选择适用性别", trigger: "blur" }, ], itemTypeId: [ { required: true, message: "请选择项目类别", trigger: "blur" }, ], price: [{ required: true, message: "请输入价格", trigger: "blur" }], deviceTypeId: [ { required: true, message: "请选择仪器类别", trigger: "blur" }, ], invoiceItemTypeId: [ { required: true, message: "请选择发票类别", trigger: "blur" }, ], isItemResultMerger: [ { required: true, message: "请选择项目结果", trigger: "blur" }, ], isBeforeEat: [ { required: true, message: "请选择餐前项目", trigger: "blur" }, ], clinicalMeaning: [ { required: true, message: "请输入临床意义", trigger: "blur" }, ], defaultResult: [ { required: true, message: "请输入默认结果", trigger: "blur" }, ], queueTime: [ { required: true, message: "请输入候诊时间", trigger: "blur" }, ], isDiagnosisFunction: [ { required: true, message: "请选择启用诊断函数", trigger: "blur" }, ], diagnosisFunction: [ { required: true, message: "请输入诊断函数", trigger: "blur" }, ], isContinueProcess: [ { required: true, message: "请选择诊断函数处理完毕后继续处理", trigger: "blur", }, ], isPictureRotate: [ { required: true, message: "请选择体检报告图片旋", trigger: "blur" }, ], isCheck: [ { required: true, message: "请选择是检查项目", trigger: "blur" }, ], isActive: [ { required: true, message: "请选择是否启用", trigger: "blur" }, ], }, //表单校验对象
form: { displayName: "", shortName: "", forSexId: "", itemTypeId: "", price: "", deviceTypeId: "", invoiceItemTypeId: "", isItemResultMerger: "", isBeforeEat: "", clinicalMeaning: "", defaultResult: "", queueTime: "", isDiagnosisFunction: "", diagnosisFunction: "", isContinueProcess: "", isPictureRotate: "", isCheck: "", isActive: "", }, forSexId: [], //性别
itemTypeId: [], //项目类别
deviceTypeId: [], //仪器类别
invoiceItemTypeId: [], //发票类别
isItemResultMerger: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //项目结果合并
isBeforeEat: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //餐前项目
isDiagnosisFunction: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //启用诊断函数
isContinueProcess: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //诊断函数处理完毕
isContinueProcess: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //诊断函数处理完毕后继续处理
isPictureRotate: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //体检报告图片旋转
isCheck: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //是检查项目
isActive: [ { value: "Y", label: "是", }, { value: "N", label: "否", }, ], //是否启用
title: 1, dialogVisible: false, isshow: true, tableHeight: window.innerHeight - 180, //表格动态高度
screenHeight: window.innerHeight, //内容区域高度
pages: { Filter: "", SkipCount: 0, MaxResultCount: 100, Sorting: "displayOrder desc", }, tableData: [], initTableData: [], leftdata: [], ary2: [], ary1: [], rightobj: {}, rightdata: [], rightobj: {}, nums: 0, itemid: "", //项目id
}; }, created() { this.getlist(); this.gitprojectcategory(); }, mounted() { this.rowDrop(); this.gitfleslist(); }, methods: { gitfleslist() { getapi("/api/app/item").then((res) => { this.filetelists = res.data.items; console.log(res, "我是项目"); }); }, //搜索选择
selectitem(v) { this.itemid = v; }, Onsubmit() { let sampleGroupId = this.form.id; console.log(sampleGroupId); let sdate = []; console.log(this.rightdata, "2222"); let sss = { itemId: this.itemid, asbitemId: sampleGroupId }; sdate.push(sss); // this.rightdata.forEach((element) => {
// console.log('项目元素id',element.id);
// console.log('组合项目id',sampleGroupId);
// sdate.push(sss);
// });
// this.leftdata.forEach((element) => {
// let sss = { sampleGroupId: sampleGroupId, asbitemId: element.id };
// sdate.push(sss);
// });
// console.log(sdate);
if (sampleGroupId == undefined) { this.$message.warning("请选择列表"); } else if (this.itemid == "") { this.$message.warning("请选择项目"); } else { postapi("/api/app/asbitem-detail/many", sdate).then((res) => { this.$message.success("操作成功"); this.isdislob = true; }); } }, //右侧双击移动删除
rightdelite(item, index) { this.isdislob = false; this.rightdata.splice(this.num, 1); this.leftdata.push(item); this.isdislob = true; this.updatedate(); }, //右侧点击选中
rightindex(item, index) { this.nums = index; this.leftobj = item; console.log(this.leftobj); }, //左侧添加按钮
addobj() { if (this.leftdata.length > 0) { this.leftdata.splice(this.num, 1); this.rightdata.push(this.rightobj); this.isdislob = false; } }, //右移动
removeright() { if (this.rightdata.length > 0) { this.rightdata.splice(this.num, 1); this.leftdata.push(this.leftobj); this.isdislob = true; this.updatedate(); } }, //q全移去
allclear() { this.isdislob = false; if (this.rightdata.length > 0) { this.ary1 = this.rightdata; this.ary2 = this.leftdata; this.updatedate(); this.rightdata = []; } }, //全添加
addall() { this.isdislob = false; if (this.leftdata.length > 0) { this.ary1 = this.leftdata; this.ary2 = this.rightdata; this.updatedate(); this.leftdata = []; } }, //左侧双击事件
shuanji(item, index) { console.log(item); this.leftdata.splice(index, 1); this.rightdata.push(item); }, clickPaixu(item, index) { this.rightobj = item; this.num = index; console.log(this.num); }, //获取项目类别 3a0b0b10-719f-5824-6956-8cb70f204013 /api/app/item-type/by-code-all
gitprojectcategory() { getapi("/api/app/item-type/by-code-all").then((res) => { this.projectid = res.data; console.log("res项目类别", res); }); }, //ary1 需要追加的数据 ary2目标数组
updatedate() { this.ary1.forEach((item) => { let iscz = false; this.ary2.forEach((item2) => { if (item2.id == item.id) { iscz = true; } }); if (!iscz) { console.log(item.id); this.ary2.push(item); // this.allid.push({ id: item.id });
} }); }, //项目类别选择
ischangs(v) { console.log(v); //`/api/app/diagnosis/in-item-type/${v}`3a0c50b9-9621-61b7-fc93-1cfab1ec0478
getapi(`/api/app/asbitem/in-item-type/${v}`).then((res) => { console.log(res); this.leftdata = res.data; }); }, bindidclose() { this.form = {}; }, rowDrop() { this.$nextTick(() => { const tbody = document.querySelector(".el-table__body-wrapper tbody"); const _this = this; Sortable.create(tbody, { handle: ".move", animation: 300, onEnd({ newIndex, oldIndex }) { _this.isshow = false; const currRow = _this.tableData.splice(oldIndex, 1)[0]; _this.tableData.splice(newIndex, 0, currRow); _this.tableData.map((item, index) => { if (index == newIndex && index == oldIndex) { } else if (index == oldIndex) { } else if (index == newIndex) { } }); console.log(_this.tableData.map((item) => item.displayOrder)); }, }); }); }, //取消按钮
cancellation() { this.$message.info("操作取消"); this.isshow = true; this.getlist(); }, //确定排序
assertion() { const result = []; this.tableData.forEach((item, index) => { const currentDisplayOrder = this.initTableData[index].displayOrder; if (item.displayOrder != currentDisplayOrder) { result.push({ id: item.id, displayOrder: currentDisplayOrder }); } }); combination({ itemList: result }).then((res) => { this.$message.success("操作成功"); this.isshow = true; this.getlist(); }); }, //置底
setlow() { if (this.form.id == undefined) { this.$message.warning("请选择操作的数据"); } else { samplesetlow(this.form.id, 2).then((res) => { console.log(res, "3333"); this.getlist(); this.$message.success("操作成功"); }); } }, //置顶
topping() { if (this.form.id == undefined) { this.$message.warning("请选择操作的数据"); } else { samplesetlow(this.form.id, 1).then((res) => { this.$message.success("操作成功"); this.getlist(); }); } }, //删除
deleteid() { if (this.form.id == undefined) { this.$message.warning("请选择操作的数据"); } else { deletescombinationprojectid(this.form.id).then((res) => { this.$message.success("删除成功"); this.getlist(); }); } }, //编辑弹框
editpopup() { if (this.form.id == undefined) { this.$message.warning("请点击选择操作的数据"); } else { this.dialogVisible = true; this.title = 2; asbitemgetid(this.form.id).then((res) => { this.form = res.data; }); //性别
examinationgender().then((res) => { this.forSexId = res.data; }); //项目类别
projectlist().then((res) => { this.itemTypeId = res.data; }); //仪器类别
instrumentlist().then((res) => { this.deviceTypeId = res.data.items; console.log(this.deviceTypeId); }); //发票项目类别
invoicetypelist().then((res) => { this.invoiceItemTypeId = res.data.items; }); } }, //确定新增或者编辑
addoredit() { this.$refs.ruleForm.validate((v) => { if (v) { if (this.title == 1) { let obj = { displayName: this.form.displayName, shortName: this.form.shortName, forSexId: this.form.forSexId, itemTypeId: this.form.itemTypeId, price: Number(this.form.price), deviceTypeId: this.form.deviceTypeId, invoiceItemTypeId: this.form.invoiceItemTypeId, isItemResultMerger: this.form.isItemResultMerger, isBeforeEat: this.form.isBeforeEat, clinicalMeaning: this.form.clinicalMeaning, defaultResult: this.form.defaultResult, queueTime: this.form.queueTime, isDiagnosisFunction: this.form.isDiagnosisFunction, diagnosisFunction: this.form.diagnosisFunction, isContinueProcess: this.form.isContinueProcess, isPictureRotate: this.form.isPictureRotate, isCheck: this.form.isCheck, isActive: this.form.isActive, }; newcombination(obj).then((res) => { this.$message.success("新增成功"); this.getlist(); this.form = {}; this.dialogVisible = false; }); } else if (this.title == 2) { let obj = { displayName: this.form.displayName, shortName: this.form.shortName, forSexId: this.form.forSexId, itemTypeId: this.form.itemTypeId, price: Number(this.form.price), deviceTypeId: this.form.deviceTypeId, invoiceItemTypeId: this.form.invoiceItemTypeId, isItemResultMerger: this.form.isItemResultMerger, isBeforeEat: this.form.isBeforeEat, clinicalMeaning: this.form.clinicalMeaning, defaultResult: this.form.defaultResult, queueTime: this.form.queueTime, isDiagnosisFunction: this.form.isDiagnosisFunction, diagnosisFunction: this.form.diagnosisFunction, isContinueProcess: this.form.isContinueProcess, isPictureRotate: this.form.isPictureRotate, isCheck: this.form.isCheck, isActive: this.form.isActive, }; updateombination(this.form.id, obj).then((res) => { this.$message.success("修改成功"); this.getlist(); this.dialogVisible = false; }); } } }); }, //新增弹框
addll() { this.dialogVisible = true; this.title = 1;
//性别
examinationgender().then((res) => { console.log(res); this.forSexId = res.data; console.log(this.forSexId); }); //项目类别
projectlist().then((res) => { this.itemTypeId = res.data; }); //仪器类别
instrumentlist().then((res) => { this.deviceTypeId = res.data.items; }); //发票项目类别
invoicetypelist().then((res) => { this.invoiceItemTypeId = res.data.items; }); }, rowick(row) { asbitemgetid(row.id).then((res) => { this.form = res.data; }); getapi( `/api/app/asbitem-detail/asbitem-detail-in-item?AsbitemId=${row.id}` ).then((res) => { this.rightdata = res.data; console.log(res, "右侧"); let dq = res.data; if (dq.length > 0) { this.rightdata = []; dq.forEach((element) => { let bb = { displayName: element.displayName, id: element.id }; this.rightdata.push(bb); }); } }); }, getlist() { groupsandlist(this.pages).then((res) => { this.initTableData = [...res.data.items]; this.tableData = res.data.items; console.log(res); }); }, },};</script><style scoped>.mainleftbox { width: 200px; height: 240px; border: 1px solid #ccc; margin-left: 6%;}.Selectbutton { margin-left: 3%;}.mainbox { display: flex; justify-content: center; margin-top: 20px;}.weixuan { text-align: center; line-height: 20px; background: rgb(185, 203, 235);}.leftbox { width: 200px; height: 240px; border: 1px solid #ccc;}.instrumentcategory { width: 100%; display: flex;}.box { display: flex;}.confirmcancellation { margin-left: 45%;}.activetext { background: rgb(185, 203, 235);}.weixuan { text-align: center; line-height: 20px; background: rgb(185, 203, 235);}</style>
|