医院父子添加

src/components/cdssManage/hospital/AddHospital.vue

@@ -11,18 +11,114 @@
         <el-col :span="16">
           <el-form ref="form" :model="form" label-width="110px" :rules="rules">
             <el-form-item label="医院名称" prop="hospitalName">
-              <el-input v-model="form.hospitalName" placeholder="2-30位,可输入汉字、字母、数字和下划线" @blur="handlePinyin($event)"></el-input>
+              <el-input
+                v-model="form.hospitalName"
+                placeholder="2-30位,可输入汉字、字母、数字和下划线"
+                @blur="handlePinyin($event)"
+              ></el-input>
             </el-form-item>
             <el-form-item label="医院名称拼音" prop="spell">
               <el-input v-model="form.spell" placeholder="请输入医院名称拼音"></el-input>
             </el-form-item>
             <!-- <el-form-item label="医院编码" prop="hospitalCode">
               <el-input v-model="form.hospitalCode" placeholder="4-15位,可输入字母、数字和下划线"></el-input>
-            </el-form-item> -->
+            </el-form-item>-->
             <el-form-item label="医院地址" prop="address">
               <el-input type="textarea" :rows="2" v-model="form.address" placeholder="请输入医院地址"></el-input>
             </el-form-item>
-
+            <el-form-item>
+              <el-table
+                size="mini"
+                :data="form.hospitalRelationVOList"
+                border
+                :style="form.hospitalRelationVOList.length > 0?'min-height: 200px':'60px'"
+                :height="form.hospitalRelationVOList.length > 0?'calc(100vh - 500px)':'60px'"
+                class="tabs"
+                ref="tables"
+                :header-row-style="{height:'40px',cursor: 'pointer'}"
+                :row-style="{height:'40px',cursor: 'pointer'}"
+                :header-cell-style="{height:'40px',borderColor:'#DCDFE6'}"
+              >
+                <el-table-column label="序号" type="index" width="80">
+                  <template slot="header" slot-scope="scope">
+                    <span class="name">序号</span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-form-item>
+                      <i
+                        class="el-icon-warning"
+                        style="color:#e6a23c"
+                        v-if="form.hospitalRelationVOList[scope.$index].errorCurrent"
+                      ></i>
+                      <i
+                        class="el-icon-warning"
+                        style="color:#fe6c6f;margin:0 10px"
+                        v-if="form.hospitalRelationVOList[scope.$index].errorOther"
+                      ></i>
+                      <span>{{scope.$index+1}}</span>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
+                <el-table-column label="医院名称">
+                  <template slot="header" slot-scope="scope">
+                    <span class="star">*</span>
+                    <span class="name">医院名称</span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-form-item
+                      class="is-request"
+                      :prop="'hospitalRelationVOList.' + scope.$index + '.name'"
+                      :rules="{
+                        required: true, message: '请输入医院名称', trigger: 'blur'
+                      }"
+                    >
+                      <el-input
+                        class="inp-name"
+                        placeholder="请输入医院名称"
+                        maxlength="100"
+                        v-model.trim="form.hospitalRelationVOList[scope.$index].name"
+                      ></el-input>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
+                <el-table-column label="编码">
+                  <template slot="header" slot-scope="scope">
+                    <span class="star">*</span>
+                    <span class="name">编码</span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-form-item
+                      :prop="'hospitalRelationVOList.' + scope.$index + '.code'"
+                      :rules="{
+                        required: true, message: '请输入编码', trigger: 'blur'
+                      }"
+                    >
+                      <el-input
+                        class="inp-name"
+                        placeholder="请输入编码"
+                        maxlength="100"
+                        v-model.trim="form.hospitalRelationVOList[scope.$index].code"
+                      ></el-input>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="150" align="center">
+                  <template slot-scope="scope">
+                    <div class="operation">
+                      <el-button @click="addIndex(scope.$index)" type="text" size="small">
+                        <i class="el-icon-plus"></i>
+                      </el-button>
+                      <el-button @click="delIndex(scope.$index)" type="text" size="small">
+                        <i class="el-icon-minus" style="color:red"></i>
+                      </el-button>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="add" v-if="form.hospitalRelationVOList.length == 0">
+                <el-button icon="el-icon-plus" @click="add"></el-button>
+              </div>
+            </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="onSubmit" :disabled="saveDisable">确定</el-button>
             </el-form-item>
@@ -30,6 +126,20 @@
         </el-col>
       </el-row>
     </div>
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+      <div class="diag-center">
+        <p class="diag-title">操作失败,请检查"医院名称+医院编码"重复项</p>
+        <p class="title-warning">
+          <i class="el-icon-warning" style="color:#e6a23c"></i>标记为当前父医院重复项
+        </p>
+        <p class="title-warning title-warning-2">
+          <i class="el-icon-warning" style="color:#fe6c6f"></i>标记为与其他父医院重复项
+        </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -60,8 +170,10 @@ export default {
         hospitalName: '',
         spell: '',
         // hospitalCode: '',
-        address: ''
+        address: '',
+        hospitalRelationVOList: []
       },
+      tableData: [],
       rules: {
         hospitalName: [
           { required: true, message: '医院名称不能为空', trigger: 'change' },
@@ -73,16 +185,16 @@ export default {
         //   { min: 4, max: 15, message: '长度4-15位', trigger: 'blur' },
         //   { required: true, validator: validatePass1, trigger: 'blur' }
         // ],
-        address:[
-          {  max: 200, message: '长度最多200字', trigger: 'change' },
-        ],
-        spell:[
-          {  max: 30, message: '医院名称拼音长度最多30位', trigger: 'change' },
-        ],
+        address: [{ max: 200, message: '长度最多200字', trigger: 'change' }],
+        spell: [
+          { max: 30, message: '医院名称拼音长度最多30位', trigger: 'change' }
+        ]
       },
       hospitalId: '',
       isEdit: false,
-      saveDisable: false
+      saveDisable: false,
+      dialogVisible: false,
+      list: []
     };
   },
   created() {
@@ -107,6 +219,7 @@ export default {
             address: this.form.address,
             name: this.form.hospitalName,
             spell: this.form.spell,
+            hospitalRelationVOList: this.form.hospitalRelationVOList
             // code: this.form.hospitalCode
           };
           if (this.isEdit) {
@@ -129,6 +242,19 @@ export default {
                   currentPage: 1
                 })
               });
+            } else if (res.data.code === '20020009') {
+              const data = res.data.data;
+              this.dialogVisible = true;
+              let errorOtherList = [];
+              let errorCurrentList = [];
+              this.getIndex(data.errorOther, errorOtherList);
+              this.getIndex(data.errorCurrent, errorCurrentList);
+              errorOtherList.forEach(i => {
+                this.form.hospitalRelationVOList[i].errorOther = true;
+              });
+              errorCurrentList.forEach(i => {
+                this.form.hospitalRelationVOList[i].errorCurrent = true;
+              });
             } else {
               this.$message({
                 showClose: true,
@@ -142,11 +268,36 @@ export default {
         }
       });
     },
-
+    getIndex(data, list) {
+      let arr2Map = {};
+      data.forEach((item, index) => (arr2Map[item.name] = item));
+      this.form.hospitalRelationVOList.forEach((item, index) => {
+        arr2Map[item.name] && list.push(index);
+      });
+    },
     // 处理拼音转换
-    handlePinyin(e){
+    handlePinyin(e) {
       // console.log(e.target.value,'==========');
-      this.form.spell = pinyin.getCamelChars(e.target.value)
+      this.form.spell = pinyin.getCamelChars(e.target.value);
+    },
+    add() {
+      this.form.hospitalRelationVOList.push({
+        name: '',
+        code: '',
+        errorOther: false,
+        errorCurrent: false
+      });
+    },
+    addIndex(i) {
+      this.form.hospitalRelationVOList.splice(i + 1, 0, {
+        name: '',
+        code: '',
+        errorOther: false,
+        errorCurrent: false
+      });
+    },
+    delIndex(i) {
+      this.form.hospitalRelationVOList.splice(i, 1);
     }
   }
 };
@@ -270,4 +421,49 @@ export default {
     border-color: transparent;
   }
 }
+.tabs {
+  max-width: 100%;
+  min-width: 100%;
+  border-color: #dcdfe6;
+  .star {
+    color: #ff545b;
+  }
+  /deep/.el-input__inner {
+    height: 32px;
+    margin-bottom: 20px;
+  }
+  /deep/.el-form-item__error {
+    top: 34px;
+  }
+  .operation {
+    display: flex;
+    justify-content: center;
+  }
+}
+.add {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.diag-center {
+  text-align: center;
+  .diag-title {
+    font-size: 18px;
+    margin-bottom: 5px;
+  }
+  .title-warning {
+    display: block;
+    margin: 10px 0;
+  }
+  .title-warning-2 {
+    padding-left: 13px;
+  }
+}
+.dialog-footer {
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+}
 </style>