esua-epdc-admin-js/src/views/modules/user/user-grid.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="扫码网格"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-table :data="userGridList" style="width: 100%">
      <!-- <el-table-column prop="street" label="街道" v-if="false"> </el-table-column>
      <el-table-column prop="community" label="社区" v-if="false"> </el-table-column>
      <el-table-column prop="grid" label="网格" v-if="false"> </el-table-column>
      <el-table-column
        v-if="false"
        prop="leaderFlag"
        label="是否为网格长"
        :formatter="showLeaderFlagFormatter"
      >
      </el-table-column> -->
      <el-table-column prop="allDeptNames" label="街道-社区-网格"> </el-table-column>
      <el-table-column prop="grid" label="网格名称" v-if="false"> </el-table-column>
      <el-table-column prop="createdTime" label="加入网格时间" > </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template slot-scope="scope">
          <el-button  type="text" size="small" @click="unbindGridHandle(scope.row.id,scope.row.userId)">解除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        partyFlag: '',
        cadreFlag: '',
        state: '',
        tagIds: [],
        remark: ''
      },
      partyFlagOptions: [
        { id: '0', name: '不是' },
        { id: '1', name: '是' }
      ],
      cadreOptions: [
        { cadreFlag: '1', cadreTitle: '是' },
        { cadreFlag: '0', cadreTitle: '否' }
      ],
      tagOptions: [],
      userGridList: []
    }
  },
  computed: {
    dataRule () {
      return {}
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
      this.getTagOptions()
    },
    getTagOptions () {
      this.$http
        .get(`/app-user/usertag/list`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.tagOptions = res.data
        })
        .catch(() => {})
    },
    // 获取信息
    getInfo () {
      this.$http
        .get(`/app-user/user/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data
          }
          this.dataForm.tagIds = []
        })
        .catch(() => {})
      this.$http
        .get(`/app-user/usergrid/listUserGrid/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.userGridList = res.data
        })
        .catch(() => {})
    },
    showLeaderFlagFormatter (row, column, cellValue, index) {
      console.log(cellValue)
      if (cellValue === '1') {
        return '是'
      } else {
        return '否'
      }
    },
    unbindGridHandle (id) {
      this.$confirm('确定解除网格关系?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
          .get(`/app-user/usergrid/unbindGridHandle/` + id)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.init()
          })
          .catch(() => {})
        this.$message({
          type: 'success',
          message: '解绑成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消解绑'
        })
      })
    }
  }
}
</script>