网格员

packages/2.0.5/AppGridMember/components/add.vue

@@ -117,15 +117,34 @@
             <template slot="content">
               <template v-if="editTwo==true">
                 <el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
-                  <el-tag
+                  <!-- <el-tag
                     :key="index"
                     v-for="(tag,index) in forms.girdInfoList"
                     closable
                     :disable-transitions="false"
                     @close="handleClose(tag)">
                     {{tag.girdName}}
-                  </el-tag>
+                  </el-tag> -->
-                  <el-button size="small" @click="showGrid=true">选择网格</el-button>
+                  <el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
+                    <div class="form-flex">
+                      <el-select v-model="item.checkType" placeholder="请选择">
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                      <el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请输入选项">
+                        <template slot="append">
+                          <el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
+                        </template>
+                      </el-input>
+                      <el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
+                    </div>
+                  </el-form-item>
+                  <el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
+                  <!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
                 </el-form-item>
                 <div class="above">
                   <div class="left">
@@ -221,6 +240,7 @@ export default {
   data() {
     return {
       users: [],
+      currIndex: 0,
       forms: {
         birthday: "",
         education: "",
@@ -240,6 +260,13 @@ export default {
         sex: "",
         userId: "",
       },
+      options: [{
+        value: '2',
+        label: '网格管理员'
+      }, {
+        value: '1',
+        label: '网格员'
+      }],
       showGrid: false,
       treeObj: {
         treeList: [],
@@ -330,6 +357,18 @@ export default {
         isRefresh: !!isRefresh,
       })
     },
+
+    removeGrid (index) {
+      this.forms.girdInfoList.splice(index, 1)
+    },
+
+    addGrid () {
+      this.forms.girdInfoList.push({
+        id: '',
+        girdName: '',
+        checkType: ''
+      })
+    },
     photoChange(val) {
       this.forms.photo = val[0].url;
     },
@@ -339,7 +378,17 @@ export default {
       this.forms.userId = val[0].sysUserId
     },
     getCheckedTree() {
-      this.forms.girdInfoList = this.$refs.tree.getCheckedNodes();
+      if (!this.$refs.tree.getCheckedNodes().length) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不支持多选')
+      }
+      this.$set(this.forms.girdInfoList, this.currIndex, {
+        ...this.$refs.tree.getCheckedNodes()[0],
+        checkType: this.forms.girdInfoList[this.currIndex].checkType
+      })
       this.showGrid = false;
     },
     handleClose(tag) {
@@ -359,6 +408,15 @@ export default {
     save() {
       this.$refs["rules"].validate((valid) => {
         if (valid) {
+          for (let i = 0; i < this.forms.girdInfoList.length; i++) {
+            if (!this.forms.girdInfoList[i].checkType) {
+              return this.$message.error('请选择网格员类型')
+            }
+            if (!this.forms.girdInfoList[i].id) {
+              return this.$message.error('请选择网格')
+            }
+          }
+
           this.instance
             .post(
               `/app/appgirdmemberinfo/addOrUpdate`,
@@ -408,6 +466,23 @@ export default {
 <style lang="scss" scoped>
 .add {
   height: 100%;
+    .form-flex {
+      display: flex;
+      align-items: center;
+
+      & > .el-button {
+        margin-left: 20px;
+      }
+
+      .el-input {
+        width: 300px;
+        margin-left: 20px;
+      }
+
+      ::v-deep .el-form-item__content {
+        margin-left: 0!important;
+      }
+    }
   .ai-detail__title {
     background-color: #fff;
   }

packages/2.0.5/AppGridMember/components/list.vue

@@ -117,17 +117,16 @@ export default {
         },
         {
           prop: "name",
-          align: "center",
           label: "网格员姓名",
         },
         {
           prop: "girdInfoListStr",
-          align: "left",
+          align: "center",
           label: "责任网格",
         },
         {
           prop: "phone",
-          align: "left",
+          align: "center",
           label: "联系电话",
         },
         {