Commit d5f968f3 authored by 祁正's avatar 祁正

ccap

parent ca172282
<template>
<div class="app-container">
<el-form v-model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="70px">
<el-form-item label="事业部:" prop="status">
<el-select
v-model="queryParams.businessUnitId"
placeholder="请选择"
clearable
style="width: 200px"
>
<el-option
v-for="dict in businessList"
:label="dict.businessUnitName"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item >
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</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="applicableBrand" />
<el-table-column label="项目情况" align="center" prop="listCode" >
<template #default="scope">
<span style="text-decoration: underline;text-decoration-color: #2f9bfe;color: #2f9bfe;cursor: pointer">{{scope.row.relatedCount}}</span>
</template>
</el-table-column>
<el-table-column label="创建人" align="center" prop="createUserName" />
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="更新人" align="center" prop="updateUserName" />
<el-table-column label="更新时间" align="center" prop="updateTime" width="180" >
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<div style="display: flex;align-items: flex-start">
<el-button type="text" style="color: rgb(0,0,255)" @click="handleMaintain(scope.row)">维护项目</el-button>
<el-button type="text" style="color: rgb(255,153,0)" v-if="scope.row.id === adminId" @click="handleView(scope.row)">复制新增</el-button>
<el-button type="text" v-if="scope.row.id === adminId" @click="handleView(scope.row)">添加事业部</el-button>
<el-button type="text" style="color: rgb(244,93,93)" v-else="scope.row.id === adminId" @click="handleView(scope.row)">删除</el-button>
</div>
</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-drawer @close="closeDrawer" v-model="drawer2" size='40%'>
<template #header>
<div style="font-weight: bold;font-size: 14px">
维护项目(奇瑞、星途、智界)
</div>
</template>
<template #default>
<div style="display: flex;justify-content: space-between">
<el-form class="drawer-form" v-model="drawerQueryParams" ref="drawerQueryRef" :inline="true" v-show="showSearch" >
<el-form-item label="项目:" prop="project">
<el-input v-model="drawerQueryParams.project" style="width: 110px" placeholder="请输入"/>
</el-form-item>
<el-form-item label="分组:" prop="groupName">
<el-select
v-model="drawerQueryParams.groupName"
placeholder="请选择"
clearable
style="width: 125px"
>
<el-option
v-for="dict in groupList"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="drawerHandleQuery">查询</el-button>
<el-button @click="drawerResetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="top-btn">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="resetQuery">批量删除</el-button>
</div>
</div>
<el-table border style="margin-top: 10px" :data="drawer2TableList">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column type="index" width="55" align="center" label="序号"/>
<el-table-column label="项目" align="center" prop="project" width="300"/>
<el-table-column label="分组" align="center" prop="groupName" />
<el-table-column label="操作" align="center">
<template #default="scope" align="center">
<div >
<el-button type="text" style="color: rgb(0,0,255)" @click="handleView(scope.row)">编辑</el-button>
<el-button type="text" style="color: rgb(244,93,93)" @click="handleView(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
<template #footer>
<div style="flex: auto">
<el-button @click="cancelClick">取消</el-button>
<el-button type="primary" @click="confirmClick">保存</el-button>
</div>
</template>
</el-drawer>
<!-- 对话框-->
<el-dialog
top="30"
v-model="dialogVisible"
:title="addTitle"
width="500"
>
<div style="width: 85%;margin-left: 7.5%">
<el-form v-model="dialogForm" ref="dialogQueryRef" >
<el-form-item label="项目:" prop="project" >
<el-input v-model="dialogForm.project" placeholder="请输入"/>
</el-form-item>
<el-form-item label="分组:" prop="groupName" >
<el-select
v-model="dialogForm.groupName"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in groupList"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogCencal">取消</el-button>
<el-button type="primary" @click="dialogSave">
保存
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ref, getCurrentInstance } from 'vue';
import {
getDataList,
getAllBusinessUnitList,
getProjectListById,
inserTableData
} from "@/api/CCAPProjectManagement/list";
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const drawer2 = ref(false)
const dialogVisible = ref(false)
//第一条数据id
const adminId = '12321'
const businessList = ref([])
const drawer2TableList = ref([]);
const showSearch = ref(true);
const dialogQueryRef = ref(null);
const drawerQueryRef = ref(null);
const addTitle = ref('新增');
const total = ref(0);
const dialogRules = {
project: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
groupName: [{ required: true, message: '分组不能为空', trigger: 'change' }]
};
const dialogForm = ref({
projectStatusId: null,
project: null,
groupName: null
});
const queryParams = ref({
pageNum: 1,
pageSize: 10,
businessUnitId: null
});
const drawerQueryParams = ref({
id: null,
project: null,
groupName: null
});
const groupList = ref([
'制造', '质管'
]);
function getList() {
getDataList(queryParams.value).then(res => {
tableList.value = res.rows.sort((a, b) => {
if (a.id === adminId) return 1
else if (b.id === adminId) return 1
});
total.value = res.total;
});
}
//获取抽屉里面的表格数据
function getDataProjectListById() {
getProjectListById(drawerQueryParams.value).then(res => {
console.log(res);
drawer2TableList.value = res.data;
});
}
function getBusinessList() {
getAllBusinessUnitList().then(res => {
console.log(res);
businessList.value = res.data;
});
}
//抽屉里面点击了新增按钮
function handleAdd() {
dialogVisible.value = true;
addTitle.value = '新增';
dialogForm.value.projectStatusId = drawerQueryParams.value.id;
}
//对话框里面的保存
function dialogSave() {
console.log(dialogForm.value);
inserTableData(dialogForm.value).then(res=>{
console.log(res)
if(res.code === 200) {
ElMessage.success("新增成功")
dialogCencal()
getDataProjectListById()
}
})
// dialogQueryRef.value.validate((valid) => {
// if (valid) {
// console.log(dialogForm.value);
// } else {
// return false;
// }
// });
}
//对话框里面的取消
function dialogCencal() {
dialogForm.value.project = null;
dialogForm.value.groupName = null;
dialogForm.value.projectStatusId = null;
dialogVisible.value = false;
}
// 取消按钮
function cancelClick() {
drawer2.value = false;
drawerQueryParams.value.id = null;
drawer2TableList.value = [];
}
function drawerHandleQuery() {
getDataProjectListById();
}
//关闭抽屉的方法
function closeDrawer(){
getList()
}
// 表单重置
function reset() {
form.value = {
id: null,
applicableMarket: null,
listCode: null,
listName: null,
steeringType: null,
listVersion: null,
releaseDate: null,
author: null,
listStatus: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
delFlag: null
};
proxy.resetForm("listRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
function drawerResetQuery() {
drawerQueryParams.value.groupName = null;
drawerQueryParams.value.project = null;
getDataProjectListById();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
queryParams.value = {
pageNum: 1,
pageSize: 10,
applicableMarket: null,
listCode: null,
listName: null,
listVersion: null,
listStatus: null,
};
handleQuery();
}
function handleMaintain(row) {
drawerQueryParams.value.id = row.id;
drawer2.value = true;
getDataProjectListById();
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('marketRegulations/list/export', {
...queryParams.value
}, `list_${new Date().getTime()}.xlsx`);
}
getList();
getBusinessList();
</script>
<style scoped lang="scss">
:deep(.drawer-form.el-form--inline .el-form-item) {
margin-right: 15px;
}
:deep(.drawer-form .el-button + .el-button) {
margin-left: 5px;
}
:deep(.top-btn .el-button + .el-button) {
margin-left: 5px;
}
:deep(.el-drawer__header) {
margin-bottom: 0;
padding-bottom: 20px;
background-color: rgb(245, 245, 245);
}
:deep(.el-dialog) {
margin-top: 17% !important;
}
</style>
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