ShippingService_WebApp/src/views/shipSecurityManage/shipCheckTemplateDetail.vue

<template>
  <div class="line-container-p24">
    <div class="pt40 pl30" 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>
  </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 getSecurityTemplateTypeSelect() {
  let { data } = await api.getSecurityTemplateTypeSelect();
  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);
  getSecurityTemplateTypeSelect();
});
</script>

<style scoped>
.dialog-footer {
  margin-top: 100px;
}
</style>