|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <!-- 添加或修改培训记录配置对话框 -->
|
|
|
+ <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body
|
|
|
+ @close="closeDialog">
|
|
|
+ <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="演练名称" prop="drillName">
|
|
|
+ <el-input v-model="form.drillName" placeholder="请输入演练名称" maxlength="30" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="演练单位" prop="drillUnit">
|
|
|
+ <el-input v-model="form.drillUnit" placeholder="请输入演练单位" maxlength="30" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="年度" prop="year">
|
|
|
+ <el-input v-model="form.year" placeholder="请输入演练年度" maxlength="11" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20" class="block">
|
|
|
+ <el-form-item label="演练时间" prop="drillTime">
|
|
|
+ <el-date-picker :shortcuts="shortcuts" v-model="form.drillTime" placeholder="请选择开始时间"
|
|
|
+ maxlength="11" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="演练地点" prop="drillAddress">
|
|
|
+ <el-button>地图定位</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="演练方案" prop="drillProject">
|
|
|
+ <el-button>上传</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="演练视频" prop="drillVideo">
|
|
|
+ <el-button>上传</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="演练图片" prop="drillPicture">
|
|
|
+ <el-button>上传</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel()">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+import api from '@/api/system/user';
|
|
|
+import {DrillForm,DrillVO,DrillQuery} from '@/api/system/user/types';
|
|
|
+const userFormRef = ref<ElFormInstance>();
|
|
|
+const ids = ref<Array<number | string>>([]);
|
|
|
+const drillList = ref<DrillVO[]>();
|
|
|
+const loading = ref(true);
|
|
|
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const emits = defineEmits(['update:modelValue','getList']);
|
|
|
+const total = ref(0);
|
|
|
+import { to } from 'await-to-js';
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: Boolean,
|
|
|
+ id: String
|
|
|
+})
|
|
|
+
|
|
|
+watch(() => props.modelValue, (val) => {
|
|
|
+ visible.value = val
|
|
|
+})
|
|
|
+
|
|
|
+let visible = ref(false);
|
|
|
+const title = computed(() => {
|
|
|
+ return props.id ? '编辑演练' : '新建演练'
|
|
|
+})
|
|
|
+
|
|
|
+/***培训记录编辑界面时间选择 */
|
|
|
+
|
|
|
+const shortcuts = [
|
|
|
+ {
|
|
|
+ text: '今天',
|
|
|
+ value: new Date(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ value: () => {
|
|
|
+ const date = new Date()
|
|
|
+ date.setDate(date.getDate() - 1)
|
|
|
+ return date
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '一周前',
|
|
|
+ value: () => {
|
|
|
+ const date = new Date()
|
|
|
+ date.setDate(date.getDate() - 7)
|
|
|
+ return date
|
|
|
+ },
|
|
|
+ },
|
|
|
+]
|
|
|
+const initFormData: DrillForm = {
|
|
|
+ drillId: undefined,
|
|
|
+ drillName: undefined,
|
|
|
+ drillUnit: undefined,
|
|
|
+ year: undefined,
|
|
|
+ drillTime: undefined,
|
|
|
+ drillAddress: undefined,
|
|
|
+ drillProject: undefined,
|
|
|
+ drillVideo: undefined,
|
|
|
+ drillPicture: undefined
|
|
|
+};
|
|
|
+
|
|
|
+const initData: PageData<DrillForm, DrillQuery> = {
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ drillName: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ drillName: [
|
|
|
+ { required: true, message: '演练名称不能为空', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ min: 1,
|
|
|
+ message: '演练名称长度必须介于 1 和 20 之间',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ drillUnit: [
|
|
|
+ { required: true, message: '演练单位不能为空', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ min: 1,
|
|
|
+ max: 20,
|
|
|
+ message: '演练单位长度必须介于 1 和 20 之间',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ year: [
|
|
|
+ { required: true, message: '演练年度不能为空', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ drillTime: [
|
|
|
+ { required: true, message: '演练时间不能为空', trigger: 'change' },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const data = reactive<PageData<DrillForm, DrillQuery>>(initData);
|
|
|
+
|
|
|
+const { queryParams, form, rules } = toRefs<PageData<DrillForm, DrillQuery>>(data);
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ const res = await api.listDrill(proxy?.addDateRange(queryParams.value, dateRange.value));
|
|
|
+ loading.value = false;
|
|
|
+ drillList.value = res.rows;
|
|
|
+ total.value = res.total;
|
|
|
+};
|
|
|
+
|
|
|
+/** 重置操作表单 */
|
|
|
+const reset = () => {
|
|
|
+ form.value = { ...initFormData };
|
|
|
+ userFormRef.value?.resetFields();
|
|
|
+ form.value.drillId = undefined;
|
|
|
+};
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ emits('update:modelValue', false);
|
|
|
+ reset();
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 删除预案按钮操作 */
|
|
|
+const drillDelete = async (row?: DrillVO) => {
|
|
|
+ const drillIds = row?.drillId || ids.value;
|
|
|
+ const [err] = await to(proxy?.$modal.confirm('是否确认删除记录编号为"' + drillIds + '"的数据项？') as any);
|
|
|
+ if (!err) {
|
|
|
+ await api.delDrill(drillIds);
|
|
|
+ await getList();
|
|
|
+ proxy?.$modal.msgSuccess('删除成功');
|
|
|
+ }
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 关闭用户弹窗
|
|
|
+ */
|
|
|
+const closeDialog = () => {
|
|
|
+ emits('update:modelValue', false);
|
|
|
+ resetForm();
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = () => {
|
|
|
+ userFormRef.value?.resetFields();
|
|
|
+ userFormRef.value?.clearValidate();
|
|
|
+
|
|
|
+ form.value.drillId = undefined;
|
|
|
+};
|
|
|
+
|
|
|
+/**提交按钮 */
|
|
|
+const submitForm = () => {
|
|
|
+ userFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ form.value.drillId ? await api.updateDrill(form.value) : await api.addDrill(form.value);
|
|
|
+ proxy?.$modal.msgSuccess('操作成功');
|
|
|
+ emits('update:modelValue', true);
|
|
|
+ emits('getList');
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
zhangyihao