hotline-admin-wex/src/views/quality/project/components/Project-edit.vue

<template>
  <el-dialog title="编辑违禁词" v-model="state.dialogVisible" width="769px" draggable @close="close">
    <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="110px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="质检项名称" prop="name" :rules="[{ required: true, message: '请输入质检项名称', trigger: 'blur' }]">
            <el-input v-model="state.ruleForm.name" placeholder="请输入质检项名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="质检项分组" prop="groupingName" :rules="[{ required: true, message: '请选择质检项分组', trigger: 'change' }]">
            <el-select v-model="state.ruleForm.groupingName" placeholder="请选择质检项分组" class="w100">
              <el-option v-for="item in props.qualityItemGrouping" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="质检项分值" prop="grade" :rules="[{ required: true, message: '请输入质检项分值', trigger: 'blur' }]">
            <el-input-number
                v-model="state.ruleForm.grade"
                :precision="0"
                :min="1"
                :max="100"
                placeholder="请输入质检项分值"
            />
            <span class="ml10">分</span>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="是否智能质检" prop="isIntelligent" :rules="[{ required: false, message: '请选择是否智能质检', trigger: 'change' }]">
            <el-switch
                v-model="state.ruleForm.isIntelligent"
                inline-prompt
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="是否启用" prop="isEnable" :rules="[{ required: false, message: '请选择是否启用性', trigger: 'change' }]">
            <el-switch
                v-model="state.ruleForm.isEnable"
                inline-prompt
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="质检项描述" prop="describe" :rules="[{ required: false, message: '请输入质检项描述', trigger: 'blur' }]">
            <el-input v-model="state.ruleForm.describe" placeholder="请输入质检项描述" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" v-waves="'light'" :loading="state.loading">确 定 </el-button>
				</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="qualityProjectEdit">
import {reactive, ref} from 'vue';
import {ElInput, ElMessage, FormInstance} from 'element-plus';
import {projectDetail,projectUpdate} from '/@/api/quality/project'
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

const props = defineProps({
  qualityItemGrouping: {
    type: Array,
    default: () => [],
  }
})


// 定义变量内容
const ruleFormRef = ref<FormInstance>();
const state = reactive<any>({
  dialogVisible: false, // 弹窗显示隐藏
  ruleForm: {
    name: '', // 质检项名称
    groupingName: '', // 质检项分组
    grade: 1, // 质检项分值
    isIntelligent: 0, // 是否智能质检
    isEnable: 1, // 是否启用
    describe: '', // 质检项描述
  },
  loading: false, // 确定按钮loading
});

// 打开弹窗
const openDialog = async (row: any) => {
  try {
    const res = await projectDetail(row.id);
    state.ruleForm = res.result ?? {};
    state.dialogVisible = true;
  }catch (e) {
    console.log(e);
  }

};
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
const close = ()=>{
  ruleFormRef.value?.clearValidate();
  ruleFormRef.value?.resetFields();
}
// 保存
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (!valid) return;
    state.loading = true;
    const request = {
      ...state.ruleForm
    }
    projectUpdate(request)
        .then(() => {
          emit('updateList');
          closeDialog(); // 关闭弹窗
          ElMessage.success('操作成功');
          state.loading = false;
        })
        .catch(() => {
          emit('updateList');
          state.loading = false;
        });
  });
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>