Web/admin.ui.plus-master/src/views/admin/product/components/form-edit.vue

<template>
  <div class="admin-authorize-editInfo">
    <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" draggable width="769px">
      <el-form :model="formData.editData"
               :rules="rules"
               ref="formRef"
               v-loading="formData.loading"
               size="default"
               label-width="80px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="部件名称" prop="bomName">
              <el-input v-model="formData.editData.bomName" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="物料号" prop="bomNo">
              <el-input v-model="formData.editData.bomNo" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="状态" prop="status">
              <el-input v-model="formData.editData.status" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--            <el-form-item label="有效时间" prop="expiedTime">-->
<!--              <el-date-picker-->
<!--                v-model="formData.editData.expiedTime"-->
<!--                type="datetime"-->
<!--                value-format="YYYY-MM-DD HH:mm:ss"-->
<!--                placeholder="选择有效时间"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--            <el-form-item label="状态" prop="state">-->
<!--              <el-select v-model="formData.editData.state" class="m-2" placeholder="选择状态" >-->
<!--                <el-option-->
<!--                  v-for="item in formData.options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--            <el-form-item label="备注" prop="remark">-->
<!--              <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{formData.buttonText}}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
import eventBus from "/@/utils/mitt";
import {FormRules} from "element-plus";
import {typeTable} from "/@/api/admin/productionManagement/ComponentTypeDto";

enum Form {
  ADD,
  UPDATE
}

/**数据对象 */
const formData = reactive({
  loading: false,
  formType: Form,
  titleText:'',
  buttonText:'',
  isShowDialog: false,
  editData:{} as typeTable,
  /**动态表头 */
  dynamicColumns: [
    { prop: 'bomName', label: '部件名称' },
    { prop: 'bomNo', label: '物料号' },
    { prop: 'remark', label: '备注' },
    { prop: 'status', label: '状态' },
  ],
  options:[
    {label:'正常',value:'正常'},
    {label:'未授权',value:'未授权'},
  ]
})

/**有效时间选择校验*/
const validateDate = (rule: any, value: any, callback: any) => {
  if(new Date(value).getTime() > Date.now()){
    callback()
  }else{
    callback(new Error('选择的时间已失效'))
  }
}

/**表单校验*/
const rules = reactive<FormRules>({
  bomName: [
    { required: true, message: '请输入部件名称', trigger: 'blur' },
  ],
  bomNo: [
    { required: true, message: '请输入物料号', trigger: 'blur' },
  ],
  status: [
    { required: true, message: '请输入状态', trigger: 'blur' },
  ],
  key: [
    { required: true, message: '请输入设备授权码', trigger: 'blur' },
  ],
  expiedTime: [
    { type: 'date', required: true, message: '请选择有效期', trigger: 'blur' },
    { validator: validateDate, trigger: 'blur' }
  ],
  state: [
    { required: true, message: '请选择状态', trigger: 'blur' },
  ],
})


const formRef = ref()

const openDialog = (val) => {
  if(val){
    formData.editData = JSON.parse(JSON.stringify(val))
    formData.titleText = '更新部件'
    formData.buttonText = '更新'
    //更新操作
    formData.formType = Form.UPDATE
  }else {
    formData.editData = {} as typeTable
    formData.titleText = '添加部件'
    formData.buttonText = '添加'
    //添加操作
    formData.formType = Form.ADD

  }
  formData.isShowDialog = true
  formData.isShowDialog = true
}

const onCancel = () => {
  formData.editData = {} as typeTable
  formData.isShowDialog = false
}

/***监听弹窗关闭表单验证*/
watch(() => formData.isShowDialog,(newVal) => {
  if(newVal) formRef.value?.resetFields()
})

const onSubmit =  () => {
  formRef.value.validate(async (valid: boolean) =>{
    if(!valid) return
    console.log(formData)
  })
}

defineExpose({
  openDialog,
})
</script>
<style scoped lang="scss">

</style>