Skip to content

Q
qr-consistency-vue3
Commit ea83385f authored by 祁正's avatar 祁正
Browse files
Options

feat(通知单内容维护)：列表页

parent 553ad48d
Hide whitespace changes
Inline Side-by-side
Showing with 420 additions and 16 deletions
src/views/controlPlan/controlPlanNotice/notificationContent/index.vue
View file @ ea83385f
<template>
<div class="app-container">
通知单内容维护
<el-form v-model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="通知单编号:" prop="notificationNumber">
<el-input placeholder="请输入" v-model="queryParams.notificationNumber" style="width: 120px" />
</el-form-item>
<el-form-item label="认证机构:" prop="certificationBody">
<el-select
v-model="queryParams.certificationBody"
placeholder="请选择"
clearable
style="width: 120px"
>
<el-option
v-for="dict in certification_body"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="事业部:" prop="businessDivisionId">
<el-select
v-model="queryParams.businessDivisionId"
placeholder="请选择"
clearable
style="width: 120px"
>
<el-option
v-for="dict in unitList"
:label="dict.businessUnitName"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item label="车型代码:" prop="vehicleModelCode">
<el-select
v-model="queryParams.vehicleModelCode"
placeholder="请选择"
clearable
style="width: 120px"
>
<el-option
v-for="dict in modelCodeList"
:label="dict.vehicleModelCode"
:value="dict.vehicleModelCode"
/>
</el-select>
</el-form-item>
<el-form-item label="车型系列:" prop="vehicleSeries">
<el-select
v-model="queryParams.vehicleSeries"
placeholder="请选择"
clearable
style="width: 120px"
>
<el-option
v-for="dict in vehicleModelSeriesList"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="生产地址:" prop="productionAddress">
<el-input placeholder="请输入" v-model="queryParams.productionAddress" style="width: 120px" />
</el-form-item>
<el-form-item label="变更类型:" prop="changeType">
<el-select
v-model="queryParams.changeType"
placeholder="请选择"
clearable
style="width: 120px"
>
<!-- 假设这里有变更类型的字典数据 -->
<el-option
v-for="dict in change_type_dict"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="认证负责人:" prop="certificationResponsiblePerson">
<el-input placeholder="请输入" v-model="queryParams.certificationResponsiblePerson" style="width: 120px" />
</el-form-item>
<el-form-item label="创建人:" prop="createUserName">
<el-input placeholder="请输入" v-model="queryParams.createUserName" style="width: 120px" />
</el-form-item>
<el-form-item label="批准人:" prop="approvalUserName">
<el-input placeholder="请输入" v-model="queryParams.approvalUserName" style="width: 120px" />
</el-form-item>
<el-form-item label="通知单状态:" prop="notificationStatus">
<el-select
v-model="queryParams.notificationStatus"
placeholder="请选择"
clearable
style="width: 120px"
>
<el-option
v-for="dict in notification_status"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item class="button-container" style="position: relative;">
<el-button type="primary" class="btn-A" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery" class="btn-B">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableList">
<el-table-column type="index" width="55" align="center" label="序号"/>
<el-table-column label="通知单编号" align="center" prop="notificationNumber" >
</el-table-column>
<el-table-column label="认证机构" align="center" prop="certificationBody" />
<el-table-column label="事业部" align="center" prop="businessUnitName" />
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="车型代码" align="center" prop="vehicleModelCode" />
<el-table-column label="车型系列" align="center" prop="vehicleSeries" >
<template #default="scope">
<dict-tag :options="getDictList(scope.row.vehicleSeries)?vehicle_model_series_icar:vehicle_model_series" :value="scope.row.vehicleSeries" />
</template>
</el-table-column>
<el-table-column label="生产地址" align="center" prop="productionAddress" width="150" />
<el-table-column label="变更类型" align="center" prop="changeType" >
<template #default="scope">
<span>{{scope.row.vehicleAnnouncementNumber || '--'}}</span>
</template>
</el-table-column>
<el-table-column label="认证负责人" align="center" prop="certificationResponsiblePerson" >
<template #default="scope">
<span class="renzheng">共{{scope.row.certificationResponsiblePerson.split(',').length}}人<el-icon style="font-size: 16px;margin-left: 5px"><EditPen @click="addPerson(scope.row)"/></el-icon></span>
</template>
</el-table-column>
<el-table-column label="批准日期" align="center" prop="approvalDate" >
<template #default="scope">
<span>{{scope.row.approvalDate || '--'}}</span>
</template>
</el-table-column>
<el-table-column label="我的维护状态" align="center" prop="notificationStatus" width="120">
<template #default="scope">
<dict-tag :options="notification_status" :value="scope.row.notificationStatus" />
</template>
</el-table-column>
<el-table-column label="通知单状态" align="center" prop="notificationStatus" >
<template #default="scope">
<dict-tag :options="notification_status" :value="scope.row.notificationStatus" />
</template>
</el-table-column>
<el-table-column label="创建人" align="center" prop="createUserName" />
<el-table-column label="批准人" align="center" prop="approvalUserName" />
<el-table-column label="操作" align="center" width="140">
<template #default="scope">
<el-button type="text" style="color: rgb(0,0,255)" @click="handleMaintain(scope.row)">查看详情</el-button>
<el-button type="text" v-if="scope.row.notificationStatus === '1' || scope.row.notificationStatus === '4'" style="color: rgb(255,54,54)" @click="delNotification(scope.row)">删除</el-button>
<el-button type="text" v-if="scope.row.notificationStatus === '2'" style="color: rgb(255,153,0)" @click="copeAdd(scope.row)">撤回</el-button>
<el-button type="text" v-if="scope.row.notificationStatus === '3'" style="color: rgb(255,153,0)" @click="copeAdd(scope.row)">作废</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"
/>
</div>
</template>
<script setup>
import DeleteDialog from '@/components/DeleteDialog/index.vue';
import SelectRole from "@/components/SelectRole/index.vue"
import {
brandData,
getALLManufacturerList,
getAllModelCode,
getALLUserList,
getPersonnelInfoByIdsInfoByIds,
getUnitList,
insert,
list,
updateCertificationManager,
deleteNotificationManagementById
} from "@/api/notificationManagement/list.js"
import {ref} from "vue";
import {ElMessage,ElMessageBox } from 'element-plus'
const allUserList = ref([])
const undoDialogVisible = ref(false)
const personTableList = ref([])
// 获取当前组件实例的代理对象，用于访问全局属性和方法
const { proxy } = getCurrentInstance();
const dialogTitle = ref('')
const dialogVisible = ref(false)
const Prompt = ref('')
// 从全局字典中获取认证机构相关的数据
const { certification_body } = proxy.useDict('certification_body')
// 从全局字典中获取通知单状态相关的数据
const { notification_status } = proxy.useDict('notification_status')
// 从全局字典中获取事业部 icar 才能选择的车型系列数据
const { vehicle_model_series_icar } = proxy.useDict('vehicle_model_series_icar')
// 从全局字典中获取除事业部 icar 外可选择的车型系列数据
const { vehicle_model_series } = proxy.useDict('vehicle_model_series')
// 存储新增通知单表单的引用，用于操作表单方法，如验证、重置等
const drawerQueryRef = ref()
// 存储通知单列表数据，使用响应式引用
const tableList = ref([])
// 存储车型代码列表数据，使用响应式引用
const modelCodeList = ref([])
// 存储人员选择相关的数据，使用响应式引用
const userList = ref([])
// 控制人员选择组件的显示与隐藏，默认关闭，使用响应式引用
const selectRole = ref(false)
// 控制人员选择组件的选择模式，默认是多选模式，使用响应式引用
const selectType = ref('multiple')
// 存储车型系列列表数据，使用响应式引用
const vehicleModelSeriesList = ref([])
// 存储生产地址列表数据，使用响应式引用
const addressList = ref([])
// 控制新增通知单抽屉的显示与隐藏，使用响应式引用
const drawer = ref(false)
// 存储通知单列表的总数据量，使用响应式引用
const total = ref(0)
// 存储事业部列表数据，使用响应式引用
const unitList = ref([])
// 存储品牌列表数据，使用响应式引用
const brandList = ref([])
// 存储新增通知单表单的查询参数，部分值暂时写死等待接口，使用响应式引用
const drawerQueryParams = ref({
})
// 存储列表查询的参数，包含页码、每页数量等，使用响应式引用
const queryParams = ref({
// 当前页码，默认第一页
pageNum: 1,
// 每页显示的数据数量，默认 10 条
pageSize: 10,
// 通知单编号
notificationNumber: "",
// 认证机构
certificationBody: null,
// 事业部 id
businessDivisionId: null,
// 车型代码
vehicleModelCode: null,
// 车型系列
vehicleSeries: null,
// 生产地址
productionAddress: "",
// 车型公告号
vehicleAnnouncementNumber: "",
// 变更类型
changeType: null,
// 认证负责人
certificationResponsiblePerson: "",
// 创建人
createUserName: "",
// 批准人
approvalUserName: "",
// 通知单状态
notificationStatus: null,
// 通用的输入框查询值，这里可根据实际情况调整或移除
number: ""
});
//查询
function handleQuery(){
queryParams.value.pageNum = 1
getList()
}
//重置
function resetQuery(){
queryParams.value = {
pageNum: 1,
pageSize: 10
}
getList()
}
//获取事业部列表
function getUnitDataList(){
getUnitList().then(res=>{
unitList.value = res.data
})
}
function getDictList(v){
//车型系列-除了事业部icar选这个
let a = toRaw(toRaw(vehicle_model_series_icar)._object).vehicle_model_series_icar
// let b = toValue(vehicle_model_series)
if(a.find(item => item.value === v)) {
return true
}else return false
}
//获取品牌列表
function getBrandDataList(){
brandData().then(res=>{
brandList.value = res.rows
})
}
function onChange(){
let id = drawerQueryParams.value.businessDivisionId
drawerQueryParams.value.vehicleSeries = null
//icak的id（暂时）
if(id === "1911691206111260672"){
vehicleModelSeriesList.value = toValue(vehicle_model_series_icar)
}else {
vehicleModelSeriesList.value =toValue(vehicle_model_series)
}
}
//获取所有制造商数据-生产地址
function getALLManufacturerDataList(){
getALLManufacturerList().then(res=>{
addressList.value = res.data
})
}
//获取列表
function getList(){
list(queryParams.value).then(res=>{
tableList.value = res.rows
total.value = res.total
})
}
//获取所有车型代码
function getALLModelCodeList(){
getAllModelCode().then(res=>{
modelCodeList.value = res.data
})
}
//获取所有人员
function getALLUserDeptList(){
getALLUserList().then(res=>{
userList.value = res.data
let list = res.data
// 提取所有用户的昵称和id
for(let i in list){
let list2 = list[i].nickName
for(let i2 in list2){
allUserList.value.push(list2[i2])
}
}
})
}
getList()
getALLUserDeptList()
getALLModelCodeList()
getALLManufacturerDataList()
getUnitDataList()
getBrandDataList()
</script>
<style scoped lang="scss">
.renzheng{
color: #1890ff;
text-decoration: underline #1890ff;
cursor: pointer;
display: flex;
align-items: center;
}
:deep(.el-form--inline .el-form-item) {
margin-right: 5px;
}
.button-container {
width: 50%;
}
:deep(.custom-dialog) {
display: flex;
flex-direction: column;
margin: 0 auto !important; /* 水平居中 */
max-height: calc(100vh - 30px); /* 限制最大高度 */
top: 30%; /* 顶部偏移 30% */
transform: translateY(-50%); /* 向上偏移自身高度的 50%，实现垂直居中 */
.el-dialog__body {
flex: 1;
overflow: auto;
}
}
</style>
src/views/controlPlan/controlPlanNotice/notificationManagement/index.vue
View file @ ea83385f
......@@ -563,10 +563,8 @@ function confirmClick(formRef) {
if (valid) {
drawerQueryParams.value.certificationResponsiblePerson = drawerQueryParams.value.certificationResponsiblePerson.join(",")
console.log(drawerQueryParams.value)
insert(drawerQueryParams.value).then(res=>{
console.log("新增结果",res)
if(res.code === 200){
ElMessage.success("新增成功")
cancelClick()
......@@ -611,9 +609,7 @@ const beforeClose = (done) => {
//提示框确认删除操作
function handleDelete(){
//删除操作
console.log("删除",delId.value)
deleteNotificationManagementById(delId.value).then(res=>{
console.log(res)
if(res.code === 200){
ElMessage.success("删除成功")
undoDialogVisible.value = false
......@@ -626,13 +622,11 @@ function hideDeleteDialog(){
}
function addPerson(row){
console.log(row)
tObj.value.id = row.id
dialogTitle.value = '维护需求人（'+row.notificationNumber+' -'+row.businessUnitName+'-'+row.vehicleModelCode+')';
dialogVisible.value = true
getPersonnelInfoByIdsInfoByIds(row.certificationResponsiblePerson).then(res=>{
console.log(res)
personTableList.value = res.data
})
}
......@@ -657,11 +651,9 @@ function remove(row){
return item.userId
}).join(",")
updateCertificationManager(tObj.value).then(res=>{
console.log(res)
if(res.code === 200){
ElMessage.success("移除成功")
getPersonnelInfoByIdsInfoByIds(tObj.value.endArrStr).then(res=>{
console.log(res)
personTableList.value = res.data
})
}
......@@ -704,9 +696,7 @@ function drawerColse(){
//获取列表
function getList(){
console.log("查询参数",queryParams.value)
list(queryParams.value).then(res=>{
console.log(res)
tableList.value = res.rows
total.value = res.total
})
......@@ -730,7 +720,6 @@ function cancelClick(){
//提交方法
const handleSelectionSubmit = (selectedItems) => {
const t = toRaw(selectedItems)
console.log('已选中的项:', t); // 处理已选择的用户
if(dialogVisible.value){
//添加人员-编辑人员对话框的时候-多选
......@@ -742,11 +731,9 @@ const handleSelectionSubmit = (selectedItems) => {
tObj.value.endArrStr = combinedArray.join(",");
updateCertificationManager(tObj.value).then(res=>{
console.log(res)
if(res.code === 200){
ElMessage.success("添加成功")
getPersonnelInfoByIdsInfoByIds(tObj.value.endArrStr).then(res=>{
console.log(res)
personTableList.value = res.data
})
}
......@@ -770,7 +757,6 @@ const handleSelectionSubmit = (selectedItems) => {
function getALLUserDeptList(){
getALLUserList().then(res=>{
userList.value = res.data
console.log(res.data)
let list = res.data
// 提取所有用户的昵称和id
for(let i in list){
......@@ -779,7 +765,6 @@ function getALLUserDeptList(){
allUserList.value.push(list2[i2])
}
}
console.log("123",allUserList.value)
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment