|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <div class="pt30" style="width: 600px">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleFormRef"
|
|
|
+ label-width="140px"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item class="mb30" prop="securityCheckName" label="安检名称">
|
|
|
+ <el-input
|
|
|
+ style="width: 280px"
|
|
|
+ v-model="ruleForm.securityCheckName"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb30" prop="shipLength" label="选择适用船长">
|
|
|
+ <div class="df aic" style="width: 100%">
|
|
|
+ <el-input
|
|
|
+ style="width: 130px"
|
|
|
+ v-model="ruleForm.minShipLen"
|
|
|
+ ></el-input>
|
|
|
+ <div class="mr10 ml10">-</div>
|
|
|
+ <el-input
|
|
|
+ style="width: 130px"
|
|
|
+ v-model="ruleForm.maxShipLen"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="df aic jcsb mb20 mt50">
|
|
|
+ <el-button class="mr30" type="primary" @click="addNewItem">
|
|
|
+ 添加新检查项目
|
|
|
+ </el-button>
|
|
|
+ <el-button-group v-show="ruleForm.items.length > 1">
|
|
|
+ <el-button
|
|
|
+ v-for="(item, index) in ruleForm.items"
|
|
|
+ @click="itemIndex = index"
|
|
|
+ :type="itemIndex == index ? 'primary' : ''"
|
|
|
+ >
|
|
|
+ {{ item.checkItemName || "新检查项目" }}
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ <el-form-item class="mb30" label="项目名称" prop="checkItemName">
|
|
|
+ <el-input
|
|
|
+ style="width: 280px"
|
|
|
+ v-model="ruleForm.items[itemIndex].checkItemName"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb30" label="项目类型" prop="checkItemTypeName">
|
|
|
+ <el-select
|
|
|
+ style="width: 280px"
|
|
|
+ v-model="ruleForm.items[itemIndex].checkItemTypeName"
|
|
|
+ value-key="checkItemTypeName"
|
|
|
+ placeholder="请选择安全检查项目类型"
|
|
|
+ @change="selectChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in templateTypeSelect"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="mb30" label="项目备注" prop="checkItemRemark">
|
|
|
+ <el-input
|
|
|
+ style="width: 280px"
|
|
|
+ v-model="ruleForm.items[itemIndex].checkItemRemark"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="df jcfe">
|
|
|
+ <el-button
|
|
|
+ v-show="ruleForm.items.length > 1"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="removeItem"
|
|
|
+ >
|
|
|
+ 移除当前项目
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="dialog-footer df aic jcfe">
|
|
|
+ <el-button @click="resetForm">重置</el-button>
|
|
|
+ <el-button type="primary" @click="addSecurityTemplate(ruleForm)">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, h, reactive, toRefs, onMounted } from "vue";
|
|
|
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
|
|
|
+import store from "../../store";
|
|
|
+import router from "../../router";
|
|
|
+import md5 from "md5";
|
|
|
+import api from "../../apis/fetch";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import _ from "lodash";
|
|
|
+import { subTimeStr } from "../../utils/utils";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+async function getSecurityTemplateDetail(id) {
|
|
|
+ let { data } = await api.getSecurityTemplateDetail({
|
|
|
+ id,
|
|
|
+ });
|
|
|
+ if (data.status == 0) {
|
|
|
+ ruleForm.value = data.result;
|
|
|
+ }
|
|
|
+}
|
|
|
+let ruleFormRef = ref(null);
|
|
|
+let ruleForm = ref({
|
|
|
+ securityCheckName: "",
|
|
|
+ items: [{}],
|
|
|
+ minShipLen: "",
|
|
|
+ maxShipLen: "",
|
|
|
+});
|
|
|
+
|
|
|
+async function resetForm() {
|
|
|
+ itemIndex.value = 0;
|
|
|
+ ruleForm.value = {
|
|
|
+ items: [{}],
|
|
|
+ };
|
|
|
+ if (route.query.id) getSecurityTemplateDetail(route.query.id);
|
|
|
+}
|
|
|
+
|
|
|
+const checkShipLength = (rule, value, callback) => {
|
|
|
+ if (!ruleForm.value.minShipLen || !ruleForm.value.maxShipLen) {
|
|
|
+ callback(new Error("请完善适用船长"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const checkItemName = (rule, value, callback) => {
|
|
|
+ if (
|
|
|
+ !ruleForm.value.items.every((item, index) => {
|
|
|
+ if (!item.checkItemName)
|
|
|
+ callback(new Error(`请完善第${index + 1}个项目名称`));
|
|
|
+ return !!item.checkItemName;
|
|
|
+ })
|
|
|
+ ) {
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+};
|
|
|
+const checkItemTypeName = (rule, value, callback) => {
|
|
|
+ if (
|
|
|
+ !ruleForm.value.items.every((item, index) => {
|
|
|
+ if (!item.checkItemTypeName)
|
|
|
+ callback(new Error(`请完善第${index + 1}个项目类型`));
|
|
|
+ return !!item.checkItemTypeName;
|
|
|
+ })
|
|
|
+ ) {
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+};
|
|
|
+const checkItemRemark = (rule, value, callback) => {
|
|
|
+ if (
|
|
|
+ !ruleForm.value.items.every((item, index) => {
|
|
|
+ if (!item.checkItemRemark)
|
|
|
+ callback(new Error(`请完善第${index + 1}个项目备注`));
|
|
|
+ return !!item.checkItemRemark;
|
|
|
+ })
|
|
|
+ ) {
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const rules = ref({
|
|
|
+ securityCheckName: [
|
|
|
+ { required: true, message: "请填写安检名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ shipLength: [{ validator: checkShipLength, trigger: "blur" }],
|
|
|
+ checkItemName: [{ validator: checkItemName, trigger: "blur" }],
|
|
|
+ checkItemTypeName: [{ validator: checkItemTypeName, trigger: "blur" }],
|
|
|
+ checkItemRemark: [{ validator: checkItemRemark, trigger: "blur" }],
|
|
|
+});
|
|
|
+let itemIndex = ref(0);
|
|
|
+let templateTypeSelect = ref([]);
|
|
|
+function addNewItem() {
|
|
|
+ ruleForm.value.items.push({});
|
|
|
+ itemIndex.value = ruleForm.value.items.length - 1;
|
|
|
+}
|
|
|
+async function getSecurityTemplateSelect() {
|
|
|
+ let { data } = await api.getSecurityTemplateSelect();
|
|
|
+ templateTypeSelect.value = data.status == 0 ? data.result : [];
|
|
|
+}
|
|
|
+async function addSecurityTemplate() {
|
|
|
+ ruleFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let { securityCheckName, minShipLen, maxShipLen, items, id } =
|
|
|
+ ruleForm.value;
|
|
|
+ let postData = {
|
|
|
+ securityCheckName,
|
|
|
+ minShipLen,
|
|
|
+ maxShipLen,
|
|
|
+ items,
|
|
|
+ id,
|
|
|
+ };
|
|
|
+ let res = await api[
|
|
|
+ id ? "updateSecurityTemplate" : "addSecurityTemplate"
|
|
|
+ ](postData);
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ ElNotification.success({
|
|
|
+ title: id ? "更新成功" : "添加成功",
|
|
|
+ duration: 1500,
|
|
|
+ message: `${securityCheckName}:${res.data.msg}`,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ router.replace("/shipSecurityManage/shipCheckTemplateList");
|
|
|
+ } else {
|
|
|
+ ElNotification.error({
|
|
|
+ title: "失败",
|
|
|
+ duration: 2000,
|
|
|
+ message: res.data.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function removeItem() {
|
|
|
+ ruleForm.value.items.splice(itemIndex.value, 1);
|
|
|
+ itemIndex.value = itemIndex.value == 0 ? 0 : itemIndex.value - 1;
|
|
|
+}
|
|
|
+
|
|
|
+function selectChange(e) {
|
|
|
+ ruleForm.value.items[itemIndex.value].checkItemTypeId = e.key;
|
|
|
+ ruleForm.value.items[itemIndex.value].checkItemTypeName = e.value;
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (route.query.id) getSecurityTemplateDetail(route.query.id);
|
|
|
+ getSecurityTemplateSelect();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dialog-footer {
|
|
|
+ margin-top: 100px;
|
|
|
+}
|
|
|
+</style>
|
