story-89 公共代码管理添加医疗机构字段

src/views/system/Code.vue

@@ -2,6 +2,11 @@
   <div class="code">
     <div>
       <el-button size="mini" type="primary" @click="save()">保存</el-button>
+      <el-select style="margin-left: 8px;" size="mini" placeholder="医疗机构"
+                 filterable clearable
+                 v-model="query.hospitalCode" @change="load($event)">
+        <el-option v-for="item in medSelectList" :key="item.pid" :label="item.name" :value="item.pid"></el-option>
+      </el-select>
     </div>
     <div
       class="rules"
@@ -15,6 +20,11 @@
         <el-input v-model="item.value" type="textarea"></el-input>
       </div>
     </div>
+    <el-transfer class="medSelectList-transfer"
+                 :titles="['可选医疗机构', '配置医疗机构']"
+                 :data="medSelectList" :props="{key: 'pid',label: 'name'}"
+                 v-model="selected" filterable
+    />
     <div class="code-item flex-vertical-center-l">
       <div class="span">
         <!-- <span>频次：</span> -->
@@ -28,48 +38,70 @@
   </div>
 </template>
 <script>
-import { getCodeMsg, addCodeMsg } from "@/api/system.js";
+import {getCodeMsg, addCodeMsg, getMedSelect, getMedlist} from '@/api/system.js';
+import {mapGetters} from 'vuex';
 export default {
   data() {
     return {
+      query: {hospitalCode: null},
+      medSelectList: [],
+      selected: [],
+
       list: [],
       sign: ""
     };
   },
   created() {
-    this.getCodeMsg();
+    this.init();
+  },
+  computed: {
+    ...mapGetters(['getuserinfo']),
   },
   methods: {
-    save() {
-      this.addCodeMsg();
+    async init() {
+      let organizationId = (() => { try { return this.getuserinfo.organizationid; } catch (e) { return void 0; } })();
+      try {
+        if (!organizationId) {
+          const res = await getMedSelect({organizationId});
+          if (res.ResultCode !== 0) throw {message: res.ResultInfo};
+          this.medSelectList = Array.isArray(res.Data) ? res.Data : [];
+        } else {
+          const res = await getMedlist({page: 1, pageSize: 100});
+          if (res.ResultCode !== 0) throw {message: res.ResultInfo};
+          this.medSelectList = res.Data && Array.isArray(res.Data.Items) ? res.Data.Items : [];
+        }
+      } catch (e) {
+        this.medSelectList = [];
+      }
+      if (this.query.hospitalCode && !this.medSelectList.find(item => item.pid === this.query.hospitalCode)) { this.query.hospitalCode = ''; }
+      await this.load(this.query.hospitalCode);
+    },
+    async load(hospitalCode) {
+      try {
+        const res = await getCodeMsg({hospitalCode: hospitalCode || '0'});
+        if (res.ResultCode !== 0) throw {message: res.ResultInfo};
+        this.list = Object.entries(res.Data).map(([type, value]) => ({type, value}));
+      } catch (e) {
+        this.list = [];
+      }
+      if (hospitalCode && hospitalCode !== '0') { this.selected = [hospitalCode]; }
     },
-    // 获取 公共代码信息
-    async getCodeMsg() {
-      let res = await getCodeMsg();
-      if (res.ResultCode == 0) {
-        let keys = Object.keys(res.Data);
-        // console.log(keys);
-        let values = Object.values(res.Data);
-        // console.log(values);
 
-        let arr = [];
-        keys.forEach((item, index) => {
-          let obj = {
-            type: item,
-            value: values[index]
-          };
 
-          // obj[`item${index}`] = values[index]
-          arr.push(obj);
-        });
-        // console.log(arr, 'arr');
-        this.list = arr;
+    save() {
+      if (!this.selected.length) {
+        this.$message.warning("请至少配置一项医疗机构")
+        const hospitalCode = this.query.hospitalCode
+        if (hospitalCode && hospitalCode !== '0') { this.selected = [hospitalCode]; }
+        return;
       }
+      this.addCodeMsg();
     },
     // 提交公共代码信息
     async addCodeMsg() {
       let params = {
-        paramList: this.list
+        paramList: this.list,
+        hospitalCodes: this.selected,
       };
       const loading = this.$loading({
         lock: true,
@@ -93,7 +125,21 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+.medSelectList-transfer {
+  display: flex;
+
+  ::v-deep {
+    .el-transfer-panel {
+      flex: 2;
+    }
 
+    .el-transfer__buttons {
+      align-self: center;
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 @import "../../style/common.scss";