dvcp_v2_webapp/project/sass/apps/AppCommunityManage/components/Add.vue

<template>
  <ai-detail showFooter class="add-detail">
    <template slot="title">
      <ai-title :title="isEdit ? '编辑小区信息' : '添加小区'" :isShowBack="true" @onBackClick="cancel()"
                :isShowBottomBorder="true"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="基础信息">
        <el-form class="ai-form" slot="content" label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
          <el-form-item style="width: 100%;" label="小区名称" prop="communityName"
                        :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
            <el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%;" label="行政归属" prop="areaId" :rules="[
              { required: true, message: '请选择行政归属', trigger: 'blur' },
              { pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
            <ai-area-get :instance="instance" v-model="form.areaId" @select="handleAreaSelect"/>
          </el-form-item>
          <el-form-item style="width: 100%;" label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
            <el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
          </el-form-item>

          <el-form-item style="width: 100%;" label="所属网格" prop="girdInfoList"
                        :rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
            <el-tag
                :key="index"
                v-for="(tag,index) in form.girdInfoList"
                closable
                style="margin-right: 16px;"
                :disable-transitions="false"
                @close="handleClose(tag)">
              {{ tag.girdName }}
            </el-tag>
            <el-button size="small" @click="showGrid=true">选择网格</el-button>
          </el-form-item>
        </el-form>
      </ai-card>
      <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true"
                 @opened="beforeSelectTree" border width="720px">
        <div class="grid">
          <el-tree
            :data="treeObj.treeList"
            :props="treeObj.defaultProps"
            node-key="id"
            ref="tree"
            :check-strictly="true"
            show-checkbox
            :default-checked-keys="treeObj.checkedKeys"
            default-expand-all
            @check="onCheckChange">
          </el-tree>
        </div>
        <div class="dialog-footer" slot="footer">
          <el-button size="medium" @click="showGrid=false">取消</el-button>
          <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
        </div>
      </ai-dialog>
    </template>
    <template slot="footer" class="footer">
      <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
      <el-button class="footer-btn" type="primary" @click="onSubmit('0')">保存</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Add',

  props: {
    dict: Object,
    params: Object,
    instance: Function,
  },

  data() {
    return {
      gridList: [],
      girdId: '',
      subGridId: '',
      subGridList: [],
      sonGridList: [],
      form: {
        communityName: '',
        areaName: '',
        areaId: '',
        girdId: '',
        dealOpinion: '',
        recordUser: '',
        address: '',
        girdInfoList: [],
        girdName: '',
      },
      showGrid: false,
      treeObj: {
        treeList: [],
        defaultProps: {
          children: "girdList",
          label: "girdName",
        },
        checkedKeys: [],
      },
    }
  },

  computed: {
    ...mapState(['user']),

    isEdit() {
      return !!this.params.id
    },
  },

  created() {
    this.dict.load('cardType', 'sex', 'nation').then(() => {
      if (this.params && this.params.id) {
        this.getInfo(this.params.id)
      }
    })
  },
  methods: {
    beforeSelectTree() {
      this.treeObj.checkedKeys = [];
      this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
        if (res.code == 0) {
          this.treeObj.treeList = this.format(res.data)
          if (this.form.girdInfoList.length) {
            this.form.girdInfoList.map((e) => {
              this.treeObj.checkedKeys.push(e.id)
            })
          }
        }
      })
    },

    format (list) {
      return list.map(item => {
        if (item.girdLevel !== '2') {
          item.disabled = true
        }

        if (item.girdList && item.girdList.length) {
          item.girdList = this.format(item.girdList)
        }

        return item
      })
    },

    onCheckChange (e) {
      this.$nextTick(() => {
        this.$refs.tree.getCheckedKeys().forEach(v => {
          this.$refs.tree.setChecked(v, false)
        })
        this.$refs.tree.setChecked(e.id, true)
      })
    },

    getCheckedTree() {
      if (this.$refs.tree.getCheckedNodes().length > 1) {
        return this.$message.error('不能绑定多个网格')
      }
      this.form.girdInfoList = this.$refs.tree.getCheckedNodes();
      this.showGrid = false;
    },
    handleClose(tag) {
      this.form.girdInfoList.splice(this.form.girdInfoList.indexOf(tag), 1);
    },
    getInfo(id) {
      this.instance.post(`/app/appcommunityinfo/queryDetailById?id=${id}`).then((res) => {
        if (res.code === 0) {
          this.girdId = res.data.girdId0
          this.form.communityName = res.data.communityName
          this.form.address = res.data.address
          this.form.areaName = res.data.areaName
          this.form.girdId = res.data.girdId
          this.form.girdName = res.data.girdName
          this.form.girdInfoList = [{id: res.data.girdId, girdName: res.data.girdName}]
          this.$set(this.form, 'areaId', res.data.areaId)
        }
      })
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.girdInfoList.length > 1) {
            return this.$message.error('不能绑定多个网格')
          }

          this.form.girdName = this.form.girdInfoList[0].girdName
          this.form.girdId = this.form.girdInfoList[0].id
          this.instance
          .post(`/app/appcommunityinfo/addOrUpdate`, {
            ...this.form,
            id: this.params ? this.params.id : '',
          })
          .then((res) => {
            if (res.code === 0) {
              this.$message.success('提交成功')
              setTimeout(() => {
                this.cancel(true)
              }, 800)
            }
          })
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh,
      })
    },
    handleAreaSelect(v) {
      this.form.areaName = v?.[0]?.label
    },
  },
}
</script>

<style lang="scss" scoped>
.add-detail {

  .footer-btn {
    width: 130px;
  }
}
</style>