epdc-admin-yushan/src/views/modules/personroom/plotbinding.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-__epidemicplotcoordinate}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()">
        <el-form-item label="街道" prop="streetCode">
          <el-select v-model="dataForm.streetCode" placeholder="街道" @change="selectModel($event)" clearable>
            <el-option v-for="item in streetArr" :key="item.deptId"
              :label="item.name"
              :value="item.deptId" >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="小区/村名称" prop="plot" label-width="90px">
          <el-input v-model="dataForm.plot" placeholder="小区/村名称" clearable maxlength="49" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataListSearch()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="liveAddressName" label="街道名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="community" label="社区名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="gridName" label="网格" header-align="center" align="center"></el-table-column>
        <el-table-column prop="plot" label="小区/村名称" header-align="center" align="center"></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="binding(scope.row)">绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <el-dialog
        title="小区绑定"
        :visible.sync="dialogVisible"
        width="40%">
        <el-form :inline="true" :model="form" ref="dataRule" :rules="dataRule" @keyup.enter.native="getDataListSearch()">
          <el-form-item label="小区/村名称" prop="plot" label-width="100px">
            <!-- <el-input v-model="dataForm.plot" placeholder="小区/村名称" clearable maxlength="49" style="width:200px"></el-input> -->
            <el-select filterable v-model="form.plotName" placeholder="请选择小区/村名称" style="width:190%">
              <el-option
                v-for="item in datas"
                :key="item.plotName"
                :label="item.plotName"
                :value="item.plotName">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/epidemicuserinoutrecord/getCoordinateIdIsNullList',
        getDataListIsPage: true
        // deleteURL: '/epidemicplotcoordinate',
        // deleteIsBatch: true
      },
      dataForm: {
        plot: '',
        streetCode: ''
      },
      dataRule: {
        mapPlotName: [
          { required: true, message: '请选择小区/村名称', trigger: 'blur' }
        ]
      },
      form: {
        plotName: ''
      },
      submitForm: {
        plot: '',
        community: '',
        liveAddressName: '',
        latitude: null,
        longitude: null,
        coordinateId: null
      },
      dialogVisible: false,
      streetArr: [],
      datas: []
    }
  },

  components: {
  },
  created: function () {
    // 乡镇下拉框赋值
    this.getDailyTypeArrInfo()
  },
  methods: {
    binding (row) {
      this.datas = []
      this.form.plot = ''
      this.submitForm.plot = row.plot
      this.submitForm.community = row.community
      this.submitForm.liveAddressName = row.liveAddressName
      this.$http.get(`epidemicplotcoordinate/getList`).then(({ data: res }) => {
        this.datas = res.data
      }).catch(() => {})
      this.dialogVisible = true
    },
    submit () {
      this.$refs['dataRule'].validate((valid) => {
        if (valid) {
          this.datas.forEach(x => {
            if (x.plotName === this.form.plotName) {
              this.submitForm.coordinateId = x.id
              this.submitForm.latitude = x.latitude
              this.submitForm.longitude = x.longitude
            }
          })
          this.$http.post(`/demo/epidemicuserinoutrecord/plotBinding`, this.submitForm).then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            if (res.code === 0) {
              this.$message({
                message: '绑定成功，已更新 ' + res.data + ' 户居民坐标信息',
                type: 'success'
              })
              this.dialogVisible = false
              this.getDataList()
            }
          }).catch(() => {})
        }
      })
    },
    // 获取乡镇下拉信息(传参：4代表查“街道”)
    getDailyTypeArrInfo () {
      this.$http.get(`/sys/dept/deptInfo?deptPid=53613e1c5de6ed473467f0159a10b135&tags=street_party`).then(({ data: res }) => {
        this.streetArr = res.data
      }).catch(() => {})
    },
    // 乡镇取值变化事件
    selectModel (event) {
      this.streetArr.find((item) => {
        if (item.dictValue === event) {
          this.dataForm.streetCode = item.deptId
        }
      })
    }

  }
}
</script>