admin-sjzx/src/views/pqs/supervise/retire/deviceQuitPopup.vue

<template>
  <el-dialog
      draggable
      class='cn-operate-dialog'
      v-model='dialogVisible'
      :title='title'
      width='450px'
      top='20vh'
  >
    <el-scrollbar>
      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
        <el-form-item label='终端' prop='deviceId'>
          <el-tree-select
              v-model='form.deviceId'
              :data='data'
              filterable
              style='width: 100%'
              @change='changeDevStatus'
              clearable
          />
        </el-form-item>

        <el-form-item label='状态选择:' prop='devStatus'>
          <el-select v-model='form.devStatus' placeholder='请选择终端状态' clearable class='select'>
            <el-option
                v-for='item in devStatusList'
                :key='item.value'
                :label='item.name'
                :value='item.value'
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label='变更原因' prop='propertyNo'>
          <el-input
              type='textarea'
              clearable
              :autosize='{ minRows: 2, maxRows: 4 }'
              placeholder='请输入变更原因'
              v-model='form.propertyNo'
          ></el-input>
        </el-form-item>
      </el-form>
    </el-scrollbar>

    <template #footer>
            <span class='dialog-footer'>
                <el-button @click='dialogVisible = false'>取消</el-button>
                <el-button type='primary' @click='submit'>确认</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getTerminalSelectTree } from '@/api/device-boot/Business'
import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
import { getDeviceDetailData } from '@/api/device-boot/line'
import { defaultProps } from '@/utils/tree'
const devStatusList = ref([
  { 'name': '运行', 'value': '0' },
  { 'name': '检修', 'value': '1' },
  { 'name': '退运', 'value': '4' }
])
//下拉数据源
const sourceData = ref()
const deviceList = ref()
const data = ref()
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()

const dialogVisible = ref(false)

// 注意不要和表单ref的命名冲突
const form = ref({
  id: '',
  deviceId: '',
  deviceType: '1',
  devOriginalStatus: '0',
  devStatus: '0',
  propertyNo: ''
})

//form表单校验规则
const rules = {
  deviceId: [{ required: true, message: '终端不能为空', trigger: 'change' }],
  devStatus: [{ required: true, message: '状态不能为空', trigger: 'change' }],
  propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
}
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

const open = async (text: string, tempData?: any) => {
  title.value = text
  //终端
  await getTerminalSelectTree(4).then(res => {
    deviceList.value = res.data
  })
  sourceData.value = deviceList.value
  data.value = deviceList.value
  if (tempData) {
    // 表单赋值
    for (let key in form.value) {
      form.value[key] = tempData[key]
    }
    form.value.deviceType = form.value.deviceType + ''
  } else {
    resetForm()
    // 在此处恢复默认表单
    for (let key in form.value) {
      form.value[key] = ''
    }
    form.value.deviceType = '1'
  }
  form.value.deviceType = '1'
  form.value.devStatus = '0'
  // changeType(form.value.deviceType)
  dialogVisible.value = true
}

/**
 * 提交用户表单数据
 */
const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (form.value.devOriginalStatus == form.value.devStatus) {
        if (form.value.devOriginalStatus == '0') {
          ElMessage.warning('终端当前状态就是运行，无需变更!')
        } else if (form.value.devOriginalStatus == '1') {
          ElMessage.warning('终端当前状态就是检修，无需变更!')
        } else {
          ElMessage.warning('终端当前状态就是退运，无需变更!')
        }
      } else {
        if (form.value.id) {
          await quitRunningDeviceUpdate(form.value)
          ElMessage.success('重新发起成功')
          tableStore.index()
          dialogVisible.value = false
        } else {
          await addRunningDevice(form.value)
          //查询进线数据，避免一直处于loading状态
          ElMessage.success('申请成功')
          tableStore.index()
          dialogVisible.value = false
        }
      }
    }
  })
}

/**
 * 终端类型切换
 */

const changeType = (event: any) => {
  sourceData.value = deviceList.value
  form.value.deviceId = ''
  data.value = sourceData.value
}

const changeDevStatus = async (event: any) => {
  await getDeviceDetailData(event).then(res => {
    //给当前终端赋值初始运行状态
    form.value.devOriginalStatus = res.data.runFlag
  })
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.el-upload-list__item {
  transition: none !important;
}

.el-select {
  min-width: 180px;
}
::v-deep .el-tree-node__children>div{
    display: block !important;
}

</style>