feat:新增国际关键零部件模板管理列表

src/api/control/baseIntlPartTemplate.js

+import request from '@/utils/request.js'
+
+// 查询国际关键零部件模版列表
+export function listTemplate(query) {
+  return request({
+    url: '/control/baseIntlPartTemplate/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询国际关键零部件模版详细
+export function getTemplate(id) {
+  return request({
+    url: '/control/baseIntlPartTemplate/' + id,
+    method: 'get'
+  })
+}
+
+// 新增国际关键零部件模版
+export function addTemplate(data) {
+  return request({
+    url: '/control/baseIntlPartTemplate',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改国际关键零部件模版
+export function updateTemplate(data) {
+  return request({
+    url: '/control/baseIntlPartTemplate',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除国际关键零部件模版
+export function delTemplate(id) {
+  return request({
+    url: '/control/baseIntlPartTemplate/' + id,
+    method: 'delete'
+  })
+}
+
+// 逻辑删除国际关键零部件模版
+export function delLogicTemplate(id) {
+  return request({
+    url: '/control/baseIntlPartTemplate/logicDelete/' + id,
+    method: 'delete'
+  })
+}
+
+// 获取全部事业部
+export function getAllUnit() {
+  return request({
+    url: '/control/baseIntlPartTemplate/getAllUnit',
+    method: 'get'
+  })
+}

src/api/control/baseIntlPartTemplateDetail.js

+import request from '@/utils/request'
+
+// 查询国际关键零部件模版详情列表
+export function listDetail(query) {
+  return request({
+    url: '/control/baseIntlPartTemplateDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询国际关键零部件模版详情详细
+export function getDetail(id) {
+  return request({
+    url: '/control/baseIntlPartTemplateDetail/' + id,
+    method: 'get'
+  })
+}
+
+// 新增国际关键零部件模版详情
+export function addDetail(data) {
+  return request({
+    url: '/control/baseIntlPartTemplateDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改国际关键零部件模版详情
+export function updateDetail(data) {
+  return request({
+    url: '/control/baseIntlPartTemplateDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除国际关键零部件模版详情
+export function delDetail(id) {
+  return request({
+    url: '/control/baseIntlPartTemplateDetail/' + id,
+    method: 'delete'
+  })
+}
+
+// 获取市场法规清单的适用市场
+export function getMarket() {
+  return request({
+    url: '/control/baseIntlPartTemplateDetail/getApplicableMarket',
+    method: 'get'
+  })
+}

src/views/baseData/criticalPartsList/template/index.vue

+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="templateList">
+      <el-table-column label="序号" type="index" align="center" width="55"/>
+      <el-table-column label="事业部" prop="divisionCn" align="center">
+        <template #default="scope">
+         {{Object.values(JSON.parse(scope.row.divisionCn)).join('、')}}
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人" prop="createByName" align="center"/>
+      <el-table-column label="创建时间" prop="createTime" align="center"/>
+      <el-table-column label="更新人" prop="updateByName" align="center"/>
+      <el-table-column label="更新时间" prop="updateTime" align="center"/>
+
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleTemplateDetailView(scope.row)">维护模板内容</el-button>
+          <el-button link type="warning" @click="handleCopyAdd" v-show="scope.row.isDefault === 1">复制新增</el-button>
+          <el-button link type="primary" @click="handleAddDivision" v-show="scope.row.isDefault === 1">添加事业部</el-button>
+          <el-button link type="danger" @click="handleDelete(scope.row)" v-show="scope.row.isDefault === 0">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 复制新增对话框 -->
+    <el-dialog :title="title" v-model="open" width="339px" align-center>
+      <el-form ref="templateRef" :model="form" label-width="80px">
+        <el-form-item label="事业部" prop="division">
+          <el-select v-model="form.division" placeholder="请选择">
+            <el-option
+                v-for="item in divisionOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </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>
+
+    <!-- 添加事业部对话框 -->
+    <el-dialog :title="title" v-model="open2" width="500px" append-to-body>
+      <el-form ref="templateRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="事业部" prop="division">
+          <el-select v-model="form.division" placeholder="请选择">
+            <el-option
+                v-for="item in divisionOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </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>
+  </div>
+</template>
+
+<script setup>
+import { listTemplate, addTemplate, getAllUnit } from "@/api/control/baseIntlPartTemplate.js";
+
+const { proxy } = getCurrentInstance();
+
+const templateList = ref([]);
+const open = ref(false);
+const open2 = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const title = ref("");
+const divisionOptions = ref([]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+  },
+  rules: {
+    division: [
+        // 事业部不能重复  事业部存储为josn
+        {
+          validator: (rule, value, callback) => {
+            for (let i = 0; i < templateList.value.length; i++) {
+              if (templateList.value[i].division === value) {
+                callback(new Error("该事业部已存在"));
+                return;
+              }
+            }
+            callback();
+          },
+          trigger: "blur"
+        }
+    ]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询国际关键零部件模版列表 */
+function getList() {
+  loading.value = true;
+  listTemplate(queryParams.value).then(response => {
+    templateList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 获取事业部下拉框
+function getDivisionList() {
+  getAllUnit().then(response => {
+    divisionOptions.value = response.data.map(item => {
+      return {
+        value: item.id,
+        label: item.businessUnitName
+      }
+    })
+  })
+}
+
+// 维护模板内容
+function handleTemplateDetailView(row) {
+  proxy.$router.push({ path: '/baseData/criticalPartsList/templateDetail', query: { id: row.id , divisionCn: row.divisionCn , isDefault: row.isDefault} })
+}
+
+// 复制新增
+function handleCopyAdd() {
+  // 候选值为奇瑞之外且未在主列表单独列出的事业部
+  getDivisionList();
+  open.value = true;
+  title.value = "复制新增";
+}
+
+// 添加事业部
+function handleAddDivision() {
+  // 候选值为不在主列表中的事业部
+  getDivisionList();
+  open2.value = true;
+  title.value = "添加事业部";
+}
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    division: null,
+    divisionCn: null
+  };
+  proxy.resetForm("templateRef");
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["templateRef"].validate(valid => {
+    if (valid) {
+      addTemplate(form.value).then(response => {
+        if (response.code === 200){
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          open2.value = false;
+          getList();
+        }else {
+          proxy.$modal.msgError(response.msg)
+        }
+      });
+    }
+  });
+}
+
+/** 逻辑删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id;
+  proxy.$modal.confirm('是否确认删除事业部为"' + row.divisionCn + '"的数据项？').then(function() {
+    return delLogicTemplate(_ids);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
+</script>

src/views/baseData/criticalPartsList/templateDetail/index.vue

+<template>
+  <div class="app-container"><div style="margin-bottom: 20px">
+<el-button link type="info" size="large" @click="back">返回</el-button>
+        事业部:
+        {{ Object.values(JSON.parse(divisionCn)).join('、') }}
+        最近更新人:
+        {{ latestUpdatedBy }}
+  </div>
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="150px">
+      <el-form-item label="关键零部件名称:" prop="partNameId">
+        <el-input
+          v-model="queryParams.criticalPartNameCn"
+          placeholder="请输入"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="英文名称:" prop="partNameId">
+        <el-input
+            v-model="queryParams.criticalPartNameEn"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="备注:" prop="remark">
+        <el-input
+          v-model="queryParams.remark"
+          placeholder="请输入"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="零部件认证标记要求:" prop="standardRequirements">
+        <el-input
+            v-model="queryParams.standardRequirements"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="专业部门:" prop="department">
+        <el-input
+          v-model="queryParams.department"
+          placeholder="请输入"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="P8后批量生产单位:" prop="p8PostProductionUnit">
+        <el-input
+            v-model="queryParams.p8PostProductionUnit"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="适用市场" prop="suitableMarket">
+        <el-input
+            v-model="queryParams.suitableMarket"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="detailList">
+      <el-table-column label="序号" align="center" type="index" width="55" fixed="left"/>
+      <el-table-column label="关键零部件名称" prop="criticalPartNameCn" align="center" fixed="left"/>
+      <el-table-column label="英文名称" prop="criticalPartNameEn" align="center"/>
+      <el-table-column label="型号" align="center"/>
+      <el-table-column label="生产厂家" align="center"/>
+      <el-table-column label="生产厂家(英文)" align="center"/>
+      <el-table-column label="零部件认证证书/注册号" width="100" align="center"/>
+      <el-table-column label="备注" prop="remark" align="center"/>
+      <el-table-column label="零部件认证标准要求" prop="standardRequirements" width="100" align="center"/>
+      <el-table-column label="专业部门" prop="departmentName" align="center"/>
+      <el-table-column label="P8后批量生产单位" prop="p8PostProductionUnit" align="center">
+        <template #default="scope">
+          <dict-tag :options="p8_post_production_unit" :value="scope.row.p8PostProductionUnit"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="排序" prop="sort" align="center"/>
+<!--   适用市场   -->
+      <el-table-column
+          align="center"
+          v-for="(header, index) in applicableMarketHeaders"
+          :key="index"
+          :prop="header"
+          :label="header"
+      >
+        <template #default="scope">
+          <!-- 判断当前乘客是否访问过该城市 -->
+          <el-icon v-if="scope.row.applicableMarketList.includes(header)" size="20px">
+            <Check/>
+          </el-icon>
+          <span v-else></span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" >
+        <template #default="scope">
+          <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-drawer v-model="open" size="800px" direction="rtl"  title="编辑零件">
+      <template #default>
+        <el-form ref="detailRef" :model="form" :rules="rules" label-width="150px">
+          <el-form-item label="关键零部件名称:" prop="criticalPartNameCn" >
+            <el-input v-model="form.criticalPartNameCn"  disabled/>
+          </el-form-item>
+          <el-form-item label="备注:" prop="remark" v-show="isDefault === 1">
+            <el-input v-model="form.remark" placeholder="请输入" />
+          </el-form-item>
+          <el-form-item label="零部件认证标记要求" prop="standardRequirements" v-show="isDefault === 1">
+            <el-select v-model="form.partAuthenticationRequirements" placeholder="请选择">
+              <el-option
+                v-for="dict in standardRequirementsOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="专业部门" prop="department">
+            <el-select v-model="form.department" placeholder="请选择">
+              <el-option
+                v-for="dict in department"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="p8后端批量生产单位" prop="p8PostProductionUnit">
+            <el-select v-model="form.p8PostProductionUnit" placeholder="请选择">
+              <el-option
+                v-for="dict in p8_post_production_unit"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="排序" prop="sort" v-show="isDefault === 1">
+            <el-input v-model="form.sort" placeholder="请输入" type="number"/>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="cancel">取消</el-button>
+          <el-button type="primary" @click="submitForm">保存</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup >
+import { listDetail, getDetail, updateDetail, getMarket} from "@/api/control/baseIntlPartTemplateDetail.js";
+import {Check} from "@element-plus/icons-vue";
+
+const { proxy } = getCurrentInstance();
+const { p8_post_production_unit } = proxy.useDict('p8_post_production_unit');
+
+const detailList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const detailRef = ref(null);
+let divisionCn = null;
+let isDefault = null;
+const applicableMarketHeaders = ref([]);
+const data = reactive({
+  form: {},
+  queryParams: {
+    templateId: null,
+    partNameId: null,
+    // 关键零部件名称
+    criticalPartNameCn: null,
+    // 英文名称
+    criticalPartNameEn: null,
+    // 零部件认证标记要求
+    partAuthenticationRequirements: null,
+    // 适用市场
+    applicableMarketList:[],
+    department: null,
+    p8PostProductionUnit: null,
+    remark: null,
+
+  },
+  rules: {
+    partNameId: [
+      { required: true, message: "关键零部件名称", trigger: "blur" }
+    ],
+    department: [
+      { required: true, message: "专业部门不能为空", trigger: "blur" }
+    ],
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询国际关键零部件模版详情列表 */
+function getList() {
+  loading.value = true;
+  divisionCn = proxy.$route.query.divisionCn;
+  isDefault = proxy.$route.query.isDefault;
+  queryParams.value.templateId = proxy.$route.query.id;
+  listDetail(queryParams.value).then(response => {
+    detailList.value = response.data;
+    loading.value = false;
+  });
+}
+
+// 获取最近更新人
+const latestUpdatedBy = computed(() => {
+  if (!detailList.value || detailList.value.length === 0) return "无数据";
+  const latestRecord = detailList.value.reduce((latest, current) => {
+    return new Date(current.updateTime) > new Date(latest.updateTime)
+        ? current
+        : latest;
+  });
+  return latestRecord.updatedByName;
+});
+
+// 零部件认证要求下拉框，是个数据字典！！！！
+const standardRequirementsOptions = ref([
+  {
+    value: '1',
+    label: ''
+  },
+  {
+    value: '2',
+    label: '2'
+  },
+])
+
+// 专业部门下拉框
+const department = ref([
+  {
+    value: '1',
+    label: '专业部门1'
+  },
+  {
+    value: '2',
+    label: '专业部门2'
+  },
+])
+
+// 获取市场法规清单的适用市场
+function getApplicableMarket() {
+  getMarket().then(response => {
+    applicableMarketHeaders.value = response.data;
+  });
+}
+
+// 返回国际关键零部件清单模板管理
+function back() {
+  proxy.$router.push({ path: '/baseData/criticalPartsList/template' })
+}
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    templateId: null,
+    partNameId: null,
+    department: null,
+    p8PostProductionUnit: null,
+    remark: null,
+  };
+  proxy.resetForm("detailRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  // 获取详情
+  getDetail(row.id).then(response => {
+    form.value = response.data;
+    open.value = true;
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["detailRef"].validate(valid => {
+    if (valid) {
+        updateDetail(form.value).then(response => {
+          if (response.code === 200){
+            proxy.$modal.msgSuccess("修改成功");
+            open.value = false;
+            getList();
+          }else {
+            proxy.$modal.msgError(response.msg)
+          }
+        });
+      }
+  });
+}
+
+getList();
+getApplicableMarket();
+</script>
+
+<style scoped lang="scss">
+:deep(.el-form--inline .el-form-item) {
+  margin-right: 20px;
+}
+</style>