|
|
@@ -0,0 +1,178 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="visible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="handleClose"
|
|
|
+ resizable
|
|
|
+ maxable
|
|
|
+ >
|
|
|
+ <div v-loading="loading || saving">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="addForm"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ :disabled="type === 'details'"
|
|
|
+ >
|
|
|
+ <el-form-item label="模板名称" prop="name">
|
|
|
+ <el-input v-model.trim="addForm.name" placeholder="请输入模板名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模板编码" prop="code">
|
|
|
+ <el-input v-model.trim="addForm.code" placeholder="请输入模板编码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否启用" prop="isEnabled">
|
|
|
+ <el-switch
|
|
|
+ v-model="addForm.isEnabled"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="addForm.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ maxlength="200"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-slot:footer>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :loading="saving"
|
|
|
+ :disabled="saving"
|
|
|
+ @click="submit"
|
|
|
+ >提 交</el-button
|
|
|
+ >
|
|
|
+ <el-button :disabled="saving" @click="handleClose">取 消</el-button>
|
|
|
+ </template>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import dictMixins from '@/mixins/dictMixins';
|
|
|
+ import {
|
|
|
+ getQmsReportTemplateById,
|
|
|
+ updateQmsReportTemplate,
|
|
|
+ saveQmsReportTemplate
|
|
|
+ } from '@/api/qmsreporttemplate/index';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins: [dictMixins],
|
|
|
+ data() {
|
|
|
+ const formBaseData = {
|
|
|
+ code: '',
|
|
|
+ id: null,
|
|
|
+ isEnabled: 0,
|
|
|
+ name: '',
|
|
|
+ remark: '',
|
|
|
+ type: 0
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ type: 'add',
|
|
|
+ title: '表单弹窗',
|
|
|
+ formBaseData,
|
|
|
+ addForm: JSON.parse(JSON.stringify(formBaseData)),
|
|
|
+ loading: false,
|
|
|
+ saving: false,
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入模板名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ code: [
|
|
|
+ { required: true, message: '请输入模板编码', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ min: 1,
|
|
|
+ max: 50,
|
|
|
+ message: '长度在 1 到 50 个字符',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ remark: [
|
|
|
+ { max: 200, message: '备注最多 200 个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 打开弹窗
|
|
|
+ open(type = 'add', data) {
|
|
|
+ this.type = type;
|
|
|
+ this.visible = true;
|
|
|
+
|
|
|
+ if (type === 'add') {
|
|
|
+ this.title = '新建模板';
|
|
|
+ } else {
|
|
|
+ this.title = '编辑模板';
|
|
|
+ this.getDetail(data.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取详情
|
|
|
+ async getDetail(id) {
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ const data = await getQmsReportTemplateById(id);
|
|
|
+ console.log('data', data);
|
|
|
+ this.addForm = Object.assign({}, this.formBaseData, data || {});
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error('获取模板详情失败');
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.addForm = JSON.parse(JSON.stringify(this.formBaseData));
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.formRef && this.$refs.formRef.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 关闭时清理表单
|
|
|
+ handleClose() {
|
|
|
+ this.visible = false;
|
|
|
+ this.resetForm();
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ submit() {
|
|
|
+ this.$refs.formRef.validate(async (valid) => {
|
|
|
+ if (!valid) return;
|
|
|
+ this.saving = true;
|
|
|
+ try {
|
|
|
+ const payload = { ...this.addForm };
|
|
|
+ let res;
|
|
|
+ if (this.type === 'add') {
|
|
|
+ res = await saveQmsReportTemplate(payload);
|
|
|
+ } else {
|
|
|
+ res = await updateQmsReportTemplate(payload);
|
|
|
+ }
|
|
|
+ this.$message.success('保存成功');
|
|
|
+ this.$emit('reload');
|
|
|
+ this.handleClose();
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error(e?.message || '保存失败');
|
|
|
+ } finally {
|
|
|
+ this.saving = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ :deep(.el-form) {
|
|
|
+ .el-form-item:last-child {
|
|
|
+ margin-bottom: 22px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.el-row) {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+</style>
|