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

<template>
  <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title'
             style='max-width: 450px;height: 320px' top="30vh">
    <el-scrollbar>
      <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>

        <el-form-item label='设备类型' prop='deviceType'>
          <el-radio-group v-model='formData.deviceType'>
            <el-radio border label='1'>设备</el-radio>
            <el-radio border label='2'>监测点</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label='设备' prop='deviceId'>
<!--          <el-select-->
<!--              v-model='formData.deviceId'-->
<!--              clearable-->
<!--              placeholder='请选择设备'-->
<!--              style='width: 100%'-->
<!--          >-->
<!--            <el-option-->
<!--                v-for='category in categoryList'-->
<!--                :key='category.id'-->
<!--                :label='category.name'-->
<!--                :value='category.id'-->
<!--            />-->
<!--          </el-select>-->
          <el-tree-select
              v-model="value"
              :data="data"
              filterable
              style="width: 240px"
          />
        </el-form-item>

        <el-form-item label='资产编号'>
          <el-input
              v-model='formData.propertyNo'
              clearable
              placeholder='请输入资产编号'
          />
        </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, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getFormSimpleList } from '@/api/bpm-boot/form'
import { getCategorySimpleList } from '@/api/bpm-boot/category'
import { addModel, updateModel } from '@/api/bpm-boot/model'
import { getTerminalSelectTree } from '@/api/device-boot/Business'


const value = ref()

const sourceData = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
const data = ref(sourceData)
const filterMethod = (value) => {
  data.value = [...sourceData].filter((item) => item.label.includes(value))
}
const filterNodeMethod = (value, data) => data.label.includes(value)

const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()

const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const formData = reactive({
  id: '',
  deviceId: '',
  deviceType: '',
  propertyNo: '',
})

//form表单校验规则
const rules = {
  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
}
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

const open = async (text: string, data?: any) => {
  title.value = text
  //终端
  await getTerminalSelectTree(4)
  //监测点
  await getTerminalSelectTree(6)

  if (data) {
    // 表单赋值
    for (let key in formData) {
      formData[key] = data[key]
    }
  } else {
    resetForm()
    // 在此处恢复默认表单
    for (let key in formData) {
      formData[key] = ''
    }
    formData.deviceType = '1'
  }
  dialogVisible.value = true
}


/**
 * 提交用户表单数据
 */
const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (formData.id) {
        await updateModel(formData)
        ElMessage.success('更新成功')
        tableStore.index()
        dialogVisible.value = false
      } else {
        await addModel(formData).then(res => {
          formData.id = res.data
          //查询进线数据，避免一直处于loading状态
          ElMessage.success('保存成功')
          tableStore.index()
          dialogVisible.value = false
        })
      }

    }
  })
}

defineExpose({ open })
</script>

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

.el-select {
  min-width: 180px;
}
</style>