AddPlan.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <template>
  2. <div class="AddPlanWrapper clearfix" @click="close">
  3. <crumbs title="电子病历方案配置-添加方案" class="topBack" :param="$route.params" linkTo="Plan"></crumbs>
  4. <div class="AddPlanBox">
  5. <el-form ref="form" :model="form" label-width="80px" :rules="rules">
  6. <el-form-item label="方案名称" prop="planName">
  7. <el-input v-model="form.planName"></el-input>
  8. </el-form-item>
  9. <el-form-item label="方案编码" prop="planCode">
  10. <el-input v-model="form.planCode"></el-input>
  11. </el-form-item>
  12. <el-form-item label="方案配置">
  13. <ul>
  14. <li>
  15. <div class="title">
  16. <h4>辅助信息</h4>
  17. <div class="titlwSwitch">
  18. <el-switch
  19. v-model="switchSubStatus"
  20. :active-value="1"
  21. :inactive-value="0"
  22. active-color="#4BC4D7"
  23. inactive-color="#BBBBBB"
  24. ></el-switch>
  25. <span class="titlwSwitchStatus">{{switchSubStatus === 1 ? '启用中' : '未启用'}}</span>
  26. </div>
  27. </div>
  28. <ul class="sub" v-for="(item,index) in planDefaultList" :key="item.id">
  29. <li class="planItem">
  30. <div class="sort">
  31. <div
  32. class="down"
  33. @click="sortPlan('down')"
  34. v-if="index !== planDefaultList.length - 1"
  35. >下</div>
  36. <div class="top" @click="sortPlan('top')" v-if="index !== 0">上</div>
  37. </div>
  38. <div class="openOrClose">
  39. <span class="planInfo">{{item.name}}</span>
  40. <div class="switch">
  41. <el-switch
  42. v-model="item.status"
  43. :active-value="1"
  44. :inactive-value="0"
  45. active-color="#4BC4D7"
  46. inactive-color="#BBBBBB"
  47. ></el-switch>
  48. </div>
  49. <span class="planStatus">{{item.status === 1 ? '启用中' : '未启用'}}</span>
  50. </div>
  51. <div class="showNum" v-if="item.number">
  52. <span style="marginRight:8px;">默认显示个数</span>
  53. <el-select v-model="item.number" placeholder="请选择" size="small">
  54. <el-option label="1" value="1"></el-option>
  55. <el-option label="2" value="2"></el-option>
  56. <el-option label="3" value="3"></el-option>
  57. <el-option label="4" value="4"></el-option>
  58. <el-option label="5" value="5"></el-option>
  59. <el-option label="6" value="6"></el-option>
  60. </el-select>
  61. </div>
  62. </li>
  63. </ul>
  64. </li>
  65. <li>
  66. <div class="title">
  67. <h4>医学知识</h4>
  68. <div class="titlwSwitch">
  69. <el-switch
  70. v-model="switchMedStatus"
  71. :active-value="1"
  72. :inactive-value="0"
  73. active-color="#4BC4D7"
  74. inactive-color="#BBBBBB"
  75. ></el-switch>
  76. <span class="titlwSwitchStatus">{{switchMedStatus === 1 ? '启用中' : '未启用'}}</span>
  77. </div>
  78. </div>
  79. </li>
  80. </ul>
  81. </el-form-item>
  82. <el-form-item>
  83. <el-button type="primary" @click="onSubmit" :disabled="saveDisable">确定添加</el-button>
  84. </el-form-item>
  85. </el-form>
  86. </div>
  87. </div>
  88. </template>
  89. <script>
  90. import api from '@api/icss.js';
  91. export default {
  92. name: 'AddPlan',
  93. data() {
  94. return {
  95. form: {
  96. planName: '',
  97. planCode: ''
  98. },
  99. saveDisable: false, //保存按钮禁止点击
  100. rules: {
  101. planName: [
  102. { required: true, message: '方案名称不能为空', trigger: 'change' }
  103. ],
  104. planCode: [
  105. { required: true, message: '方案编码不能为空', trigger: 'change' }
  106. ]
  107. },
  108. planDefaultList: [],
  109. hospitalId: '',
  110. isEdit: false, // 是否处于编辑页面 false--新增 true--编辑
  111. switchSubStatus: 0, // 辅助信息
  112. switchMedStatus: 0 // 医学知识
  113. };
  114. },
  115. async created() {
  116. const { isEdit, data } = this.$route.params;
  117. // console.log(data, '编辑页传递的data');
  118. let res = await api.getHospitalInfo(); // 同步获取医院信息
  119. this.hospitalId = res.data.data.id;
  120. if (isEdit) {
  121. // 编辑页面
  122. this.isEdit = true;
  123. let params = {
  124. hospitalId: res.data.data.id,
  125. id: data.id
  126. };
  127. this._getPlanInfoIds(params);
  128. } else {
  129. // 新增页面
  130. this._getDefaultPlans(); // 获取默认配置信息
  131. }
  132. },
  133. methods: {
  134. close() {},
  135. // 方案配置排序
  136. sortPlan(type) {
  137. console.log('排序', type);
  138. },
  139. // 获取默认方案配置
  140. _getDefaultPlans() {
  141. api.getDefaultPlans().then(res => {
  142. // console.log(res, '获取默认的方案配置');
  143. if (res.data.code === '0') {
  144. this.planDefaultList =
  145. res.data.data &&
  146. res.data.data.planDetailDefault &&
  147. res.data.data.planDetailDefault[0].planDetails;
  148. this.switchSubStatus =
  149. res.data.data &&
  150. res.data.data.planDetailDefault &&
  151. res.data.data.planDetailDefault[0].status;
  152. this.switchMedStatus =
  153. res.data.data &&
  154. res.data.data.planDetailDefault &&
  155. res.data.data.planDetailDefault[1].status;
  156. }
  157. });
  158. },
  159. // 编辑页面 根据id获取方案配置
  160. _getPlanInfoIds(params) {
  161. api.getPlanInfoIds(params).then(res => {
  162. if (res.data.code === '0') {
  163. this.planDefaultList = res.data.data[0].sysSetInfo[0].planDetails;
  164. this.form.planName = res.data.data[0].planName;
  165. this.form.planCode = res.data.data[0].planCode;
  166. this.switchSubStatus = res.data.data[0].sysSetInfo[0].status;
  167. this.switchMedStatus = res.data.data[0].sysSetInfo[1].status;
  168. }
  169. });
  170. },
  171. // format处理细项数据
  172. handleSendData() {
  173. let TempPlanDetail = [];
  174. TempPlanDetail = this.planDefaultList.map((item, index) => {
  175. return {
  176. code: item.code,
  177. hospitalId: this.hospitalId,
  178. name: item.name,
  179. number: item.number,
  180. orderNo: item.orderNo,
  181. planId: item.planId,
  182. remark: item.remark,
  183. status: item.status,
  184. value: item.value
  185. };
  186. });
  187. return TempPlanDetail;
  188. // console.log(TempPlanDetail, 'TempPlanDetail');
  189. },
  190. // 处理保存活动信息参数
  191. _getParams() {
  192. let params = {
  193. hospitalId: this.hospitalId,
  194. planCode: this.form.planCode,
  195. planDetailParent: [
  196. {
  197. code: 'auxiliary',
  198. hospitalId: this.hospitalId,
  199. name: '辅助信息',
  200. number: 0,
  201. orderNo: 1,
  202. planDetailSub: this.handleSendData(),
  203. status: this.switchSubStatus,
  204. },
  205. {
  206. code: 'medical',
  207. hospitalId: this.hospitalId,
  208. name: '医学知识',
  209. orderNo: 3,
  210. planDetailSub: [{}],
  211. status: this.switchMedStatus,
  212. }
  213. ], // 方案配置信息
  214. planName: this.form.planName,
  215. planStatus: 1,
  216. };
  217. if (this.isEdit){
  218. // 编辑状态,需要额外添加ID
  219. const { data } = this.$route.params;
  220. params = {...params,id: data.id}
  221. }
  222. return params;
  223. },
  224. onSubmit() {
  225. this.$refs.form.validate(valid => {
  226. if (valid) {
  227. this.saveDisable = true
  228. let params = this._getParams();
  229. api.savePlanInfoDatas(params).then(res => {
  230. if (res.data.code === '0') {
  231. this.$message({
  232. showClose: true,
  233. message: '操作成功',
  234. type: 'success'
  235. });
  236. } else if (res.data.code === '00020007') {
  237. // 方案名/方案编码已存在
  238. this.$message({
  239. showClose: true,
  240. message: res.data.msg,
  241. type: 'error'
  242. });
  243. }
  244. this.saveDisable = false
  245. });
  246. } else {
  247. this.saveDisable = false
  248. return false;
  249. }
  250. });
  251. }
  252. }
  253. };
  254. </script>
  255. <style lang="less">
  256. .AddPlanWrapper {
  257. min-width: 940px;
  258. .AddPlanBox {
  259. padding: 20px 60px 120px 60px;
  260. margin: 70px 20px 0 20px;
  261. background: #fff;
  262. }
  263. color: #606266;
  264. .topBack {
  265. top: 0;
  266. }
  267. .title {
  268. background-color: #f2f2f2;
  269. display: flex;
  270. .titlwSwitch {
  271. width: 120px;
  272. }
  273. h4 {
  274. flex: 1;
  275. }
  276. .titlwSwitchStatus{
  277. margin-left: 16px;
  278. }
  279. }
  280. .sub {
  281. .planItem {
  282. display: flex;
  283. .sort {
  284. width: 60px;
  285. display: flex;
  286. .top {
  287. width: 30px;
  288. cursor: pointer;
  289. }
  290. .down {
  291. width: 30px;
  292. cursor: pointer;
  293. }
  294. }
  295. .openOrClose {
  296. display: flex;
  297. flex: 1;
  298. .planInfo {
  299. width: 140px;
  300. }
  301. .switch {
  302. }
  303. .planStatus {
  304. margin-left: 16px;
  305. }
  306. }
  307. .showNum {
  308. display: flex;
  309. width: 320px;
  310. /deep/.el-input--small {
  311. width: 60px;
  312. }
  313. }
  314. }
  315. }
  316. .el-button {
  317. float: right;
  318. }
  319. }
  320. </style>