|
@@ -1,123 +1,101 @@
|
|
|
<template>
|
|
|
<div class="modal">
|
|
|
- <el-dialog v-model="props.isVisible" width="70%" left :close-on-click-modal="false" @close="onCancel">
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="dialogTitle"
|
|
|
+ :width="modalConfig.dialogWidth || '80%'"
|
|
|
+ center
|
|
|
+ @close="handleExcel(ruleFormRef)"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
<template #header>
|
|
|
- <pageTitle :title="props.title"></pageTitle>
|
|
|
+ <pageTitle :title="dialogTitle"></pageTitle>
|
|
|
</template>
|
|
|
<div class="form">
|
|
|
<el-form
|
|
|
ref="ruleFormRef"
|
|
|
+ :rules="modalConfig.formRules"
|
|
|
label-suffix=":"
|
|
|
- :rules="formRules"
|
|
|
:model="formData"
|
|
|
- label-width="140px"
|
|
|
+ :label-width="modalConfig.labelWidth || '100px'"
|
|
|
size="large"
|
|
|
>
|
|
|
- <el-row>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="发布单位" prop="release_unit">
|
|
|
- <el-input :disabled="true" v-model="formData.release_unit" placeholder="请输入发布单位" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="创建日期" prop="createDate">
|
|
|
- <el-input :disabled="true" v-model="formData.createDate" placeholder="请输入创建日期" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="创建人员" prop="creater">
|
|
|
- <el-input :disabled="true" v-model="formData.creater" placeholder="请输入创建人员" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="发布状态" prop="send_status">
|
|
|
- <el-select
|
|
|
- v-model="formData.send_status"
|
|
|
- placeholder="请选择发布状态"
|
|
|
- style="width: 100%"
|
|
|
- :disabled="true"
|
|
|
- >
|
|
|
- <template v-for="(val, index) in sendStatusOptions" :key="index">
|
|
|
- <el-option :value="val.value" :label="val.label" />
|
|
|
+ <el-row :gutter="12">
|
|
|
+ <template v-for="item in modalConfig.formItems" :key="item.prop">
|
|
|
+ <el-col :span="item.span || 24">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop">
|
|
|
+ <template v-if="item.type === 'input'">
|
|
|
+ <el-input
|
|
|
+ :disabled="item.disabled"
|
|
|
+ v-model="formData[item.prop]"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ />
|
|
|
</template>
|
|
|
- </el-select> </el-form-item
|
|
|
- ></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="通报类型" prop="report_type">
|
|
|
- <el-select v-model="formData.report_type" placeholder="请选择通报类型" style="width: 100%">
|
|
|
- <template v-for="(val, index) in reportTypeOptions" :key="index">
|
|
|
- <el-option :value="val.value" :label="val.label" />
|
|
|
+ <template v-if="item.type === 'textarea'">
|
|
|
+ <el-input
|
|
|
+ :disabled="item.disabled"
|
|
|
+ type="textarea"
|
|
|
+ v-model="formData[item.prop]"
|
|
|
+ show-word-limit
|
|
|
+ autosize
|
|
|
+ :maxlength="item.maxlength || 200"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 'number'">
|
|
|
+ <el-input
|
|
|
+ v-model="formData[item.prop]"
|
|
|
+ type="number"
|
|
|
+ :min="0"
|
|
|
+ :max="999999999999"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 'select'">
|
|
|
+ <el-select
|
|
|
+ v-model="formData[item.prop]"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ <template v-for="(val, index) in item.options" :key="index">
|
|
|
+ <el-option :value="val.value" :label="val.label" />
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="通报事件类别" prop="report_event_type">
|
|
|
- <el-select
|
|
|
- v-model="formData.report_event_type"
|
|
|
- placeholder="请选择通报事件类别"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <template v-for="(val, index) in reportEventTypeOptions" :key="index">
|
|
|
- <el-option :value="val.value" :label="val.label" />
|
|
|
+ <template v-if="item.type === 'date-picker'">
|
|
|
+ <el-date-picker
|
|
|
+ :type="item.dateType || 'daterange'"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ v-model="formData[item.prop]"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
</template>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="事项编号" prop="event_code">
|
|
|
- <el-input v-model="formData.event_code" placeholder="请输入事项编号" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
+ <template v-if="item.type === 'date'">
|
|
|
+ <el-date-picker
|
|
|
+ type="date"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="formData[item.prop]"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
</el-row>
|
|
|
- <el-form-item label="通报事项" prop="report_event">
|
|
|
- <el-input
|
|
|
- v-model="formData.report_event"
|
|
|
- maxlength="200"
|
|
|
- show-word-limit
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入通报事项,内容200字以内"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="通报标准或具体行为列举" prop="report_standard">
|
|
|
- <el-input
|
|
|
- v-model="formData.report_standard"
|
|
|
- maxlength="1000"
|
|
|
- show-word-limit
|
|
|
- type="textarea"
|
|
|
- autosize
|
|
|
- placeholder="请输入通报标准或具体行为列举,内容200字以内"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="通报依据" prop="report_base">
|
|
|
- <el-input
|
|
|
- v-model="formData.report_base"
|
|
|
- maxlength="200"
|
|
|
- show-word-limit
|
|
|
- autosize
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入通报依据,内容200字以内"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="发出单位" prop="send_unit">
|
|
|
- <el-select v-model="formData.send_unit" placeholder="请选择发出单位" style="width: 100%">
|
|
|
- <template v-for="(val, index) in sendUnitOptions" :key="index">
|
|
|
- <el-option :value="val.value" :label="val.label" />
|
|
|
- </template>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="接收单位" prop="receive_unit">
|
|
|
- <el-input v-model="formData.receive_unit" placeholder="请输入择接收单位" />
|
|
|
- </el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
- <el-button type="primary" @click="handleConfirmClick(ruleFormRef)">保存</el-button>
|
|
|
- <el-button type="primary" @click="handleConfirmClick(ruleFormRef)">提交</el-button>
|
|
|
- <el-button @click="onCancel()">返回</el-button>
|
|
|
+ <el-button @click="handleExcel(ruleFormRef)">返回</el-button>
|
|
|
+ <el-button type="primary" v-show="dialogLook == false" @click="handleConfirmClick(ruleFormRef)"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ <slot name="button"></slot>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
@@ -127,129 +105,129 @@
|
|
|
<script setup lang="ts" name="modal">
|
|
|
import { reactive, ref } from 'vue';
|
|
|
import type { FormInstance } from 'element-plus';
|
|
|
-import pageTitle from '@/components/components/pageTitle.vue';
|
|
|
import useSystemStore from '@/store/main';
|
|
|
+import { outTypeList } from '@/libs/commonMeth';
|
|
|
+import { template } from 'lodash';
|
|
|
+// 定义props
|
|
|
+interface IProps {
|
|
|
+ modalConfig: {
|
|
|
+ pageName: string;
|
|
|
+ addTitle: string;
|
|
|
+ editTitle: string;
|
|
|
+ detailTitle: string;
|
|
|
+ dialogWidth: string;
|
|
|
+ labelWidth: string;
|
|
|
+ formItems: any[];
|
|
|
+ formRules: object;
|
|
|
+ pageListParams?: object; //新增一个对象,用来传给特殊的列表接口刷新页面(非必传)
|
|
|
+ };
|
|
|
+ otherInfo?: any;
|
|
|
+}
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- isVisible: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
-});
|
|
|
-type Emit = {
|
|
|
- (e: 'update:isVisible', isVisible: boolean): void;
|
|
|
-};
|
|
|
-const emit = defineEmits<Emit>();
|
|
|
+const props = defineProps<IProps>();
|
|
|
+
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const isEdit = ref(false);
|
|
|
|
|
|
-const formData = reactive<any>({
|
|
|
- release_unit: '交通运输部海事局',
|
|
|
- createDate: '2025-07-28',
|
|
|
- type: 'mobile',
|
|
|
- creater: '张三',
|
|
|
- send_status: 'inner',
|
|
|
- report_type: '',
|
|
|
- report_event_type: '',
|
|
|
- event_code: '',
|
|
|
- report_event: '',
|
|
|
- report_standard: '',
|
|
|
- report_base: '',
|
|
|
- send_unit: '',
|
|
|
- receive_unit: '',
|
|
|
-});
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
|
|
|
|
const systemStore = useSystemStore();
|
|
|
|
|
|
-const onCancel = () => {
|
|
|
- resetForm();
|
|
|
- emit('update:isVisible', false);
|
|
|
-};
|
|
|
+const { pageDetailInfo, pageOperateType } = storeToRefs(systemStore);
|
|
|
|
|
|
-const resetForm = () => {
|
|
|
- if (!ruleFormRef.value) return;
|
|
|
- ruleFormRef.value.resetFields();
|
|
|
-};
|
|
|
+onMounted(async () => {});
|
|
|
+
|
|
|
+// 定义数据绑定
|
|
|
+const initialForm: any = {};
|
|
|
+for (const item of props.modalConfig.formItems) {
|
|
|
+ initialForm[item.prop] = item.initialValue ?? '';
|
|
|
+}
|
|
|
|
|
|
-const formRules = {
|
|
|
- report_type: [{ required: true, message: '请选择通报类型', trigger: 'select' }],
|
|
|
- report_event_type: [{ required: true, message: '请选择通报类型', trigger: 'select' }],
|
|
|
- report_event: [{ required: true, message: '请输入通报事项', trigger: 'change' }],
|
|
|
- report_base: [{ required: true, message: '请输入通报依据', trigger: 'change' }],
|
|
|
- send_unit: [{ required: true, message: '请选择发出单位', trigger: 'select' }],
|
|
|
- receive_unit: [{ required: true, message: '请选择接收单位', trigger: 'change' }],
|
|
|
- report_standard: [{ required: true, message: '请选择通报标准或具体行为列举', trigger: 'select' }],
|
|
|
-};
|
|
|
+let formData = ref(JSON.parse(JSON.stringify(initialForm)));
|
|
|
|
|
|
-// 通报类型
|
|
|
-const reportTypeOptions = [
|
|
|
- {
|
|
|
- label: '内部',
|
|
|
- value: 'inner',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '外部',
|
|
|
- value: 'outer',
|
|
|
- },
|
|
|
-];
|
|
|
-// 通报事项类别
|
|
|
-const reportEventTypeOptions = [
|
|
|
- {
|
|
|
- label: '信息告知类',
|
|
|
- value: 'msg',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '协助处理类',
|
|
|
- value: 'assist',
|
|
|
- },
|
|
|
-];
|
|
|
-// 发布状态
|
|
|
-const sendStatusOptions = [
|
|
|
- {
|
|
|
- label: '待发布',
|
|
|
- value: 'inner',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '已发布',
|
|
|
- value: 'outer',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '已结案',
|
|
|
- value: 'outer',
|
|
|
- },
|
|
|
-];
|
|
|
-// 发出单位
|
|
|
-const sendUnitOptions = [
|
|
|
- {
|
|
|
- label: '上海海事',
|
|
|
- value: 'msg',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '广州海事',
|
|
|
- value: 'assist',
|
|
|
- },
|
|
|
-];
|
|
|
+const dialogTitle = ref();
|
|
|
+const dialogLook = ref(false);
|
|
|
+// 新建或者编辑
|
|
|
+async function setDialogVisible(isNew: boolean = true, check: boolean = false) {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+ await nextTick();
|
|
|
+ dialogLook.value = false;
|
|
|
+ if (!isNew) {
|
|
|
+ watch(pageDetailInfo, newVal => {
|
|
|
+ formData.value = pageDetailInfo.value;
|
|
|
+ });
|
|
|
|
|
|
+ if (check) {
|
|
|
+ dialogTitle.value = props.modalConfig.detailTitle;
|
|
|
+ dialogLook.value = true;
|
|
|
+ systemStore.getDetailType('detail');
|
|
|
+ } else {
|
|
|
+ dialogTitle.value = props.modalConfig.editTitle;
|
|
|
+ systemStore.getDetailType('edit');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ props.modalConfig.formItems.map((m: any) => {
|
|
|
+ if (m.numberType === '2') {
|
|
|
+ if (m.prop === initialForm[m.prop]) {
|
|
|
+ initialForm[m.prop] = (0.0).toFixed(2);
|
|
|
+ }
|
|
|
+ } else if (m.numberType === '1') {
|
|
|
+ if (m.porp === initialForm[m.porp]) {
|
|
|
+ initialForm[m.prop] = Math.trunc(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ formData.value = JSON.parse(JSON.stringify(initialForm));
|
|
|
+ await nextTick();
|
|
|
+ dialogTitle.value = props.modalConfig.addTitle;
|
|
|
+ systemStore.detailPageEval(initialForm);
|
|
|
+ systemStore.getDetailType('add');
|
|
|
+ }
|
|
|
+ isEdit.value = !isNew;
|
|
|
+}
|
|
|
// 点击确定
|
|
|
function handleConfirmClick(formEl: FormInstance | undefined) {
|
|
|
if (!formEl) return;
|
|
|
formEl.validate((valid, fields) => {
|
|
|
if (valid) {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ let data = { ...formData.value };
|
|
|
+ if (props.otherInfo) {
|
|
|
+ data = { ...data, ...props.otherInfo };
|
|
|
+ }
|
|
|
+ if (!isEdit.value) {
|
|
|
+ systemStore.newPageDataAction(props.modalConfig.pageName, data, props.modalConfig.pageListParams);
|
|
|
+ } else {
|
|
|
+ if (pageOperateType.value === 'edit') {
|
|
|
+ systemStore.editPageDataAction(props.modalConfig.pageName, data, props.modalConfig.pageListParams);
|
|
|
+ }
|
|
|
+ }
|
|
|
} else {
|
|
|
console.log('error submit!', fields);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+// 取消
|
|
|
+function handleExcel(formEl: FormInstance | undefined) {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+// 获取详情
|
|
|
+function onPageDetail(urlId: number | [] | string) {
|
|
|
+ systemStore.detailPageDataAction(props.modalConfig.pageName, urlId);
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ setDialogVisible,
|
|
|
+ onPageDetail,
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style scoped lang="scss">
|
|
|
.form {
|
|
|
padding: 10px 30px;
|
|
|
}
|
|
|
-.form .el-input__wrapper {
|
|
|
- width: 100% !important;
|
|
|
-}
|
|
|
</style>
|