udiwms-vue-frame/src/views/dev/invDeviceInspectEditDialog.vue

<template>
  <div>
    <el-form :model="inputQuery" :rules="rules" ref="inputQuery" label-width="100px">
      <div style=" float: right;
              text-align: right;
            margin-bottom: 8px;"
      >
        <el-button type="primary" size="mini" icon="search" @click="addCert"
                   style="text-align:right"
        >添加相关人员
        </el-button>
      </div>
      <el-table v-loading="certLoading" :data="certList" style=" width: 100%;margin-top: 20px" border
                highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="人员类别" prop="userType">
          <template slot-scope="scope">
            <span>{{ dict.type.device_user_type[scope.row.userType].label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="人员名称" prop="userName"></el-table-column>
        <el-table-column label="联系电话" prop="contact1"></el-table-column>
        <el-table-column label="其他联系方式" prop="contact2"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native="addCert(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native="deleteDeviceCert(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer"
                       :url-list="imgList"
      />
      <pagination
        v-show="certTotal>0"
        :total="certTotal"
        :page.sync="certQuery.page"
        :limit.sync="certQuery.limit"
        @pagination="certHandleCurrentChange"
      ></pagination>


      <el-dialog
        :title="formMap[formName]"
        :visible.sync="addCertVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="70%"
        v-if="addCertVisible"
        append-to-body
        @close="closeLocalDialog"
      >
        <depUserAddDialog
          :closeDialog="closeLocalDialog"
          :inputQuery="inputQuery"
          :addType="addType"
          :editTye="editTye"
          :deviceUserType="dict.type.device_user_type"
        ></depUserAddDialog>
      </el-dialog>


    </el-form>
  </div>
</template>

<script>
import { modifyCompany, addCompany, bindCorp, previewImage } from '@/api/purchase/supCompany'
import store from '@/store'
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import { filterDeviceUser,insertCompanyUser,deleteDeviceUser,updateDeviceUser } from '@/api/dev/deviceUser'
import corpMaintainSelect from '@/views/basic/corpMaintain/corpMaintainSelect'
import depUserAddDialog from '@/views/inventory/user/depUserAddDialog.vue'
import draggable from 'vuedraggable'
import { getUUID, isBlank } from '@/utils/strUtil'
import supCertSetSelectDialog from '@/views/purchase/cert/supCertSetSelectDialog'
import { getBasicUnitMaintains, getCorpList } from '@/api/basic/basicUnitMaintain'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {

  name: 'invDeviceInspectEditDialog',
  dicts: ['device_user_type'],
  props: {
    // closeDialog: {
    //   type: Function,
    //   required: true,
    // },
    // inputEdit: {
    //   type: Object,
    //   required: true,
    // },
    // editType: {
    //   type: Number,
    //   required: true,
    // }
    idQuery: {
      type: Object,
      required: true
    },
    rowData: {
      type: Object,
      required: true
    }

  },
  watch: {
    rowData: function(newVal, oldVal) {

      this.searchData(newVal)
    }
  }
  ,
  data() {
    return {
      formName: null,
      formMap: {
        "add": "添加相关人员",
        "edit": "编辑相关人员"
      },
      BASE_URL: process.env.VUE_APP_BASE_API,
      headers: {},
      classesDisplay: false,
      selectedOptions: [],
      imgViewerVisible: false,
      imgList: [],
      options: regionDataPlus,
      inputQuery: {
        // customerId: null,
        devCodeFk: null,
        companyName: null,
        contacts: null,
        mobile: null,
        detailAddr: null
      },
      rules: {
        companyName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }
        ],
        creditNum: [
          {
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          }
        ],
        classes: [
          {
            required: true,
            message: '请选择企业类别',
            trigger: 'change'
          }
        ],
        area: [
          {
            required: true,
            message: '请选择所属地区',
            trigger: 'change'
          }
        ],
        detailAddr: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'change'
          }
        ],
        contacts: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'change'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'change'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'change'
          }
        ],
        updateCause: [
          {
            required: true,
            message: '请输入变更原因',
            trigger: 'change'
          }
        ]

      },
      uploadUrl: '',
      fileUrl: '',
      certFileUrl: '',
      url: 'http://127.0.0.1:9996/udiwms/image/register/file/getImage?type=image1&name=t11111.jpg',
      certQuery: {
        devCodeFk: '',
        page: 1,
        limit: 20,
        type: 1
      },
      expire: {
        0: '有效',
        1: '失效'
      },
      certList: [],
      certTotal: 0,
      certLoading: false,
      addCertVisible: false,
      salesmanQuery: {
        name: '',
        page: 1,
        limit: 20
      },
      salesmanList: [],
      salesmanTotal: 0,
      salesmanLoading: false,
      addSalesmanVisible: false,
      certTypeMap: {
        1: '身份证'
      },
      selectLocalVisible: false,
      productQuery: {
        ylqxzcrbarmc: '',
        cpmctymc: '',
        ggxh: '',
        page: 1,
        limit: 20
      },
      maintainsList: [],
      productList: [],
      productTotal: 0,
      productLoading: false,
      uuid: null,
      companyApplyUpdateVisible: false,
      companyEditDisabled: true,
      companyEditButtonStr: '编辑',
      addType: '1', //证书类型（1：资质证书；2：技术材料）
      checkFlag: {
        0: '草稿',
        1: '已通过',
        2: '已拒绝',
        3: '变更未审核',
        6: '未审核'
      },
      editTye: 1,

      selectCorpVisible: false,
      selectCertVisible: false,
      certType: 1,
      customerId: null

    }
  }
  ,
  methods: {
    searchData(query) {
      console.log('完成！')
      console.log(query)
      this.idQuery = { ...query }

      this.getDeviceCertList()

    },
    //预览照片
    showImgViewer(row) {
      this.certFileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
      this.imgList = []
      previewImage({ imageUrl: row.filePath, certFileUrl: this.certFileUrl }).then(response => {
        if (response.code === 20000) {
          this.imgList = response.data
        }
      })
      this.imgViewerVisible = true
      const m = (e) => {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, false) // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgViewerVisible = false
      const m = (e) => {
        e.preventDefault()
      }
      document.body.style.overflow = 'auto'
      document.removeEventListener('touchmove', m, true)
    },
    selectBasicCorp() {
      this.selectCorpVisible = true
    },
    cancelDialog() {
      this.closeDialog()
    },
    //关闭添加证书界面
    closeLocalDialog() {
      this.addCertVisible = false
      this.selectCertVisible = false
      // this.getCompanyCertList();
      this.getDeviceCertList()
    }
    ,
    //添加资质证书
    addCert(row) {
      // console.log("this.inputQuery.devCodeFk",this.inputQuery.devCodeFk)
      if (isBlank(this.inputQuery.devCodeFk)) {
        return this.$message.error('请先选择设备')
      }
      // console.log(this.inputQuery.devCodeFk)
      if (this.$isNotBlank(row) && this.$isNotBlank(row.id)) {
        this.formName = "edit"
        this.inputQuery.formData = row
        this.editTye = 2
      } else {
        this.formName = "add"
        this.inputQuery.formData = {}
        this.inputQuery.formData.addType = 1
        this.editTye = 1
      }
      this.addCertVisible = true
    }
    ,
    //页数
    certHandleCurrentChange(val) {
      this.certQuery.page = val.page
      // this.getCompanyCertList();
      this.getDeviceCertList()
    },

    getDeviceCertList() {
      this.certLoading = true
      // let certRuery = {}
      // this.certQuery.customerId = this.inputEdit.customerId;
      // console.log('获取idQuery：')
      // console.log(this.idQuery)
      this.certQuery.devCodeFk = this.idQuery.devCodeFk
      this.certQuery.type = 1
      this.inputQuery = { ...this.idQuery }
      this.inputQuery.devCodeFk = this.idQuery.devCodeFk
      // console.log(this.inputQuery)
      // console.log('获取this.certQuery:')
      // console.log(this.certQuery)
      filterDeviceUser(this.certQuery)
        .then((response) => {
          this.certLoading = false
          this.certList = response.data.list || []
          this.certTotal = response.data.total
        })
        .catch(() => {
          this.certLoading = false
          this.certList = []
        })
    },

    deleteDeviceCert(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.certLoading = true
        let tquery = {
          id: row.id,
          filePath: row.filePath
        }
        deleteDeviceUser(tquery)
          .then((response) => {
            this.certLoading = false
            if (response.code === 20000) {
              this.getDeviceCertList()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
            } else {
              this.$message.error(response.message)
            }
          })
          .catch(() => {
            this.certLoading = false
          })
      }).catch(() => {
      })
    }
  }
  ,
  created() {
    // // console.log("触发设备资质组件 idQuery",this.idQuery)
    // // if (this.rowData.editType == 1) {
    // this.getDeviceCertList()
    // // }
    // // this.getBasicUnitMaintainsList();
    // this.headers = {
    //   ADMINID: store.getters.adminId,
    //   ADMINTOKEN: store.getters.token
    // }
  },
  components: {
    draggable, depUserAddDialog, corpMaintainSelect, supCertSetSelectDialog, ElImageViewer
  }
}

</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>