zhgdyun/src/views/projectFront/emergency/materialRegistration.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
        <el-form-item>
          <el-button size="medium" type="primary" @click="addBefore()">新增应急物资 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock" style="margin-top: 15px">
      <vue-scroll>
        <el-table class="tables" :data="dataList">
          <el-table-column
            type="index"
            width="50"
            align="center"
            :label="$t('message.personnelPosition.beaconManage.table.index')"
          ></el-table-column>
          <el-table-column prop="detailCode" label="应急物资编码">
            <template slot-scope="scope">
              {{ scope.row.detailCode }}
            </template>
          </el-table-column>
          <el-table-column prop="detailName" label="应急物资名称">
            <template slot-scope="scope">
              {{ scope.row.detailName }}
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column prop="model" label="规格型号">
            <template slot-scope="scope">
              {{ scope.row.model }}
            </template>
          </el-table-column>
          <el-table-column prop="source" label="物资来源">
            <template slot-scope="scope">
              {{ scope.row.source }}
            </template>
          </el-table-column>
          <el-table-column prop="storageWarehouse" label="存放仓库/位置">
            <template slot-scope="scope">
              <div style="color: #749af8; cursor: pointer" @click="handleMap(true)">
                <i class="el-icon-location"></i>
                {{ scope.row.storageWarehouse }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="manager" label="管理员">
            <template slot-scope="scope">
              {{ scope.row.manager }}
            </template>
          </el-table-column>
          <el-table-column prop="managerPhone" label="管理员联系方式">
            <template slot-scope="scope">
              {{ scope.row.managerPhone }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('message.docManage.table.operation')" width="160">
            <template slot-scope="scope">
              <div class="tableBtns">
                <div @click="editBefore(scope.row)" class="operationText">
                  <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                  <span>{{ $t('message.workType.edit') }}</span>
                </div>
                <div @click="deleteBefore(scope.row)" class="operationText">
                  <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
                  <span>{{ $t('message.workType.delete') }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <el-dialog :modal-append-to-body="false" :title="$t('message.workType.operate')[type]" :visible.sync="dialogVisible" width="667px">
      <div class="dialog_content">
        <el-form label-width="120px" size="medium" class="dialogFormBox" ref="addEditForm" :model="dataInfo">
          <el-form-item label="应急物资" prop="detailId">
            <el-select v-model="dataInfo.detailId" placeholder="请选择" clearable @change="handleChangeMaterials">
              <el-option v-for="item in materialsList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="应急物资编码"
            prop="detailCode"
            :rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
          >
            <span>{{ dataInfo.detailCode }}</span>
          </el-form-item>
          <el-form-item
            label="应急物资名称"
            prop="detailName"
            :rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
          >
            <span>{{ dataInfo.detailName }}</span>
          </el-form-item>
          <el-form-item
            label="规格型号"
            prop="model"
            :rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
          >
            <el-input v-model="dataInfo.model" :placeholder="$t('message.workType.placeholder')"></el-input>
          </el-form-item>
          <el-form-item
            label="数量"
            prop="num"
            :rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
          >
            <el-input v-model="dataInfo.num" :placeholder="$t('message.workType.placeholder')"></el-input>
          </el-form-item>
          <el-form-item
            label="资源来源"
            prop="source"
            :rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
          >
            <el-input v-model="dataInfo.source" :placeholder="$t('message.workType.placeholder')"></el-input>
          </el-form-item>
          <el-form-item
            label="存放仓库"
            prop="storageWarehouse"
            :rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
          >
            <el-input v-model="dataInfo.storageWarehouse" :placeholder="$t('message.workType.placeholder')"></el-input>
          </el-form-item>
          <el-form-item label="存放位置经纬度" prop="version">
            <el-button type="primary" @click="handleMap(false)">获取位置</el-button>
            {{ dataInfo.longitude }}&nbsp;{{ dataInfo.latitude }}
          </el-form-item>
          <el-form-item label="管理员" prop="manager">
            <el-input v-model="dataInfo.manager" :placeholder="$t('message.workType.placeholder')"></el-input>
          </el-form-item>
          <el-form-item
            label="管理员联系方式"
            prop="managerPhone"
            :rules="[
              {
                required: false,
                message: '请输入正确的手机号格式',
                trigger: 'blur',
                pattern: /^1(3|4|5|6|7|8|9)\d{9}$/
              }
            ]"
          >
            <el-input v-model="dataInfo.managerPhone" :placeholder="$t('message.workType.placeholder')"></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <el-button class="cancleBtn" @click="dialogVisible = false" icon="el-icon-circle-close" size="medium"
              >{{ $t('message.personnelPosition.cancel') }}
            </el-button>
            <el-button type="primary" icon="el-icon-circle-check" @click="addWorker" size="medium"
              >{{ $t('message.personnelPosition.determine') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <gd-map v-if="showMap" :addProjectForm="mapForm" @closeMap="closeMap" :hideSaveBtn="hideSaveBtn" @save="getLngLat"></gd-map>
  </div>
</template>
<script>
import {
  getUrgentEventCategoryDetailApi,
  getUrgentEventMaterialsApi,
  addUrgentEventMaterialsApi,
  editUrgentEventMaterialsApi,
  deleteUrgentEventMaterialsApi
} from '@/assets/js/api/emergency'
import { download } from '@/util/index.js'
import gdMap from '@/components/map/gd-map'
import SelectTree from '@/components/selectTree/selectTree'
export default {
  mounted() {
    this.getSelectList()
    this.getList()
  },
  components: {
    SelectTree,
    gdMap
  },
  data() {
    return {
      showMap: false,
      mapForm: {
        id: 'mapDom',
        areaName: '',
        longitude: '',
        latitude: ''
      },
      hideSaveBtn: false,
      type: 'add',
      dataInfo: {},
      dataList: [],
      searchForm: {
        name: ''
      },
      materialsList: [],
      dialogVisible: false
    }
  },
  methods: {
    addWorker() {
      if (this.type === 'add') {
        this.$refs['addEditForm'].validate(valid => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.dataInfo))
            data.fileUrl = JSON.stringify(this.dataInfo.fileUrl)
            addUrgentEventMaterialsApi({
              projectSn: this.$store.state.projectSn,
              ...data
            }).then(result => {
              if (result.success) {
                this.dialogVisible = false
                this.$message.success(result.message)
                this.getList()
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (this.type === 'edit') {
        this.$refs['addEditForm'].validate(valid => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.dataInfo))
            data.fileUrl = JSON.stringify(this.dataInfo.fileUrl)
            editUrgentEventMaterialsApi(data).then(result => {
              if (result.success) {
                this.dialogVisible = false
                this.$message.success(result.message)
                this.getList()
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (this.type === 'delete') {
        deleteUrgentEventMaterialsApi({ id: this.dataInfo.id }).then(result => {
          if (result.success) {
            this.$message.success(result.message)
            this.getList()
          }
        })
      }
    },
    PopupBefore(type, worker) {
      this.dialogVisible = true
      this.$refs['addEditForm']?.resetFields()
      this.type = type
      this.dataInfo = JSON.parse(JSON.stringify(worker))
      this.dataInfo.fileUrl = JSON.parse(worker.fileUrl || '[]')
    },
    addBefore(parentId) {
      this.PopupBefore('add', {})
      console.log('添加前', this.type)
    },
    editBefore(worker) {
      this.dataInfo = JSON.parse(JSON.stringify(worker))
      this.PopupBefore('edit', worker)
      console.log('编辑前', this.dataInfo)
    },
    deleteBefore(worker) {
      // this.PopupBefore('delete', worker);
      this.type = 'delete'
      this.dataInfo = worker
      console.log('删除前', this.type)
      this.$confirm(
        this.$t('message.personnelPosition.beaconManage.table.confirmText') + '【' + worker.name + '】?',
        this.$t('message.personnelPosition.beaconManage.table.Tips'),
        {
          confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
          cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
          type: 'warning'
        }
      )
        .then(() => {
          this.addWorker()
        })
        .catch(() => {})
    },
    handleChangeMaterials(val) {
      let obj = this.materialsList.find(item => item.id === val) || {}
      this.dataInfo.detailName = obj.name
      this.dataInfo.detailCode = obj.code
    },
    getSelectList() {
      getUrgentEventCategoryDetailApi({ pageNo: -1, sn: this.$store.state.userInfo.headquartersSn }).then(res => {
        this.materialsList = res.result
      })
    },
    getList() {
      getUrgentEventMaterialsApi({ pageNo: -1 }).then(res => {
        this.dataList = res.result.records
      })
    },
    handleMap(hideSaveBtn = false) {
      this.hideSaveBtn = hideSaveBtn
      this.mapForm.longitude = this.dataInfo.longitude || ''
      this.mapForm.latitude = this.dataInfo.latitude || ''
      this.showMap = true
    },
    closeMap(val) {
      this.showMap = val
      console.log('打印子组件', val)
    },
    getLngLat(v) {
      this.showMap = false
      console.info(v, '======')
      this.dataInfo.longitude = v.lng
      this.dataInfo.latitude = v.lat
    }
  }
}
</script>
<style lang="less" scoped>
.primaryText {
  text-decoration: none;
}
</style>