Guoyan
/
ops-management-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 文档列表

ops-management-platform-frontend-dev
wbc 3 months ago
parent
2ba2fbc1b8
commit
30143b6fd2
14 changed files with 396 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 105
      src/views/document/addModal.vue
  2. 21
      src/views/document/api.ts
  3. 8
      src/views/document/data.ts
  4. 27
      src/views/document/detailDrawer.vue
  5. 29
      src/views/document/index.vue
  6. 128
      src/views/project/contractManage/addModal.vue
  7. 17
      src/views/project/contractManage/api.ts
  8. 8
      src/views/project/contractManage/detailDrawer.vue
  9. 9
      src/views/project/contractManage/index.vue
  10. 152
      src/views/project/projectManage/addModal.vue
  11. 5
      src/views/project/projectManage/api.ts
  12. 17
      src/views/project/projectManage/detailDrawer.vue
  13. 9
      src/views/project/projectManage/index.vue
  14. 9
      src/views/project/serviceManage/index.vue

105
src/views/document/addModal.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
<a-form :model="form" layout="vertical"> <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="文档名称" name="documentName"> <a-form-item label="文档名称" name="documentName">
@ -11,8 +11,13 @@
<a-form-item label="类型" name="type"> <a-form-item label="类型" name="type">
<a-select <a-select
v-model:value="form.type" v-model:value="form.type"
:options="projectNameOptions" :options="typeOptions"
placeholder="请选择" placeholder="请选择"
:fieldNames="{
label: 'typeName',
value: 'typeName',
options: 'options',
}"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -21,8 +26,8 @@
<a-col :span="24"> <a-col :span="24">
<a-form-item label="状态" name="status"> <a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status"> <a-radio-group v-model:value="form.status">
<a-radio :value="1">启用</a-radio> <a-radio :value="0">启用</a-radio>
<a-radio :value="0">禁用</a-radio> <a-radio :value="1">禁用</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -31,8 +36,10 @@
<a-col :span="24"> <a-col :span="24">
<a-form-item label="附件" name="attachment"> <a-form-item label="附件" name="attachment">
<a-upload <a-upload
v-model:file-list="form.attachment" :before-upload="beforeUpload"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="importChange"
:file-list="filelists"
:maxCount="1"
> >
<a-button type="primary"> 上传 </a-button> <a-button type="primary"> 上传 </a-button>
</a-upload> </a-upload>
@ -45,55 +52,93 @@
<script> <script>
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { getInfo, getDocumentType } from './api';
export default { export default {
setup() { setup() {
const title = ref('新增'); const title = ref('新增');
const formRef = ref();
const visible = ref(false); const visible = ref(false);
const form = reactive({ const form = reactive({
documentName: '', documentName: '',
type: '', type: '',
status: 1, status: 0,
attachment: [], attachment: null,
id: null,
}); });
//下拉框 //下拉框
const projectNameOptions = [ const typeOptions = ref([]);
{ const getOptions = async () => {
value: '1', const res = await getDocumentType();
label: 'a', typeOptions.value = res.rows;
}, };
{ getOptions();
value: '2', const showModal = async (type, id) => {
label: 'b',
},
{
value: '3',
label: 'c',
},
];
const showModal = (type, id) => {
if (type == 1) { if (type == 1) {
title.value = '新增'; title.value = '新增';
} else if (type == 2) { } else if (type == 2) {
title.value = '编辑'; title.value = '编辑';
console.log(id); const data = await getInfo(id);
for (let i in form) {
form[i] = data[i];
}
} }
visible.value = true; visible.value = true;
}; };
const rules = {
documentName: [{ required: true, message: '请输入' }],
};
const handleOk = () => { const handleOk = () => {
console.log('Form Data:', form); formRef.value.validate().then((valid) => {
// 在此处可以添加表单验证逻辑 if (valid) {
if (title.value == '新增') {
let params = {};
for (let i in form) {
params[i] = form[i];
}
add(params).then((_) => {
message.success('新增成功');
visible.value = false;
});
} else {
let params = {};
for (let i in form) {
params[i] = form[i];
}
update(params).then((_) => {
message.success('编辑成功');
visible.value = false;
});
}
}
});
};
const closeModal = () => {
formRef.value.resetFields();
visible.value = false; visible.value = false;
}; };
//附件
const filelists = ref([]);
const beforeUpload = async (file) => {
form.attachment = file;
return false;
};
const importChange = ({ fileList }) => {
filelists.value = fileList;
};
return { return {
visible, visible,
title, title,
form, form,
showModal, showModal,
handleOk, handleOk,
projectNameOptions, typeOptions,
formRef,
closeModal,
rules,
filelists,
beforeUpload,
importChange,
}; };
}, },
}; };

21
src/views/document/api.ts
View File

@ -1,21 +1,16 @@
import { ID, IDS, PageQuery, commonExport } from '@/api/base';
import { defHttp } from '@/utils/http/axios'; import { defHttp } from '@/utils/http/axios';
enum Api { enum Api {
root = '/workflow/leave', root = '/platform/documentInfo',
list = '/workflow/leave/list', list = '/platform/documentInfo/list',
export = '/workflow/leave/export', getDocumentType = '/platform/documentType/list',
} }
export function list(params?: PageQuery) { export function list(params: any) {
return defHttp.get({ url: Api.list, params }); return defHttp.get({ url: Api.list, params });
} }
export function exportExcel(data: any) { export function getInfo(id: any) {
return commonExport(Api.export, data);
}
export function getInfo(id: ID) {
return defHttp.get({ url: `${Api.root}/${id}` }); return defHttp.get({ url: `${Api.root}/${id}` });
} }
@ -27,6 +22,10 @@ export function update(data: any) {
return defHttp.put({ url: Api.root, data }); return defHttp.put({ url: Api.root, data });
} }
export function removeByIds(ids: IDS) { export function removeByIds(ids: any) {
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` });
} }
export function getDocumentType() {
return defHttp.get({ url: Api.getDocumentType });
}

8
src/views/document/data.ts
View File

@ -3,7 +3,7 @@ import { FormSchema } from '@/components/Form';
export const formSchemas: FormSchema[] = [ export const formSchemas: FormSchema[] = [
{ {
field: 'ducumentName', field: 'documentName',
label: '文档名称', label: '文档名称',
component: 'Input', component: 'Input',
componentProps: { componentProps: {
@ -11,11 +11,10 @@ export const formSchemas: FormSchema[] = [
}, },
}, },
]; ];
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '文档名称', title: '文档名称',
dataIndex: 'ducumentName', dataIndex: 'documentName',
}, },
{ {
title: '类型', title: '类型',
@ -24,6 +23,9 @@ export const columns: BasicColumn[] = [
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
customRender({ value }) {
return value == 0 ? '启用' : '禁用';
},
}, },
{ {
title: '创建时间', title: '创建时间',

27
src/views/document/detailDrawer.vue
View File

@ -13,7 +13,7 @@
<a-tab-pane key="1" tab="详细信息"> <a-tab-pane key="1" tab="详细信息">
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<div><span class="titleLabel">名称：</span>{{ detail.ducumentName }}</div> <div><span class="titleLabel">名称：</span>{{ detail.documentName }}</div>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
@ -44,30 +44,29 @@
<script> <script>
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
// import { getInfo } from './api'; import { getInfo } from './api';
export default { export default {
setup() { setup() {
//抽屉详情 //抽屉详情
let detail = reactive({ let detail = reactive({
ducumentName: '', documentName: '',
type: '', type: '',
status: '', status: null,
createTime: '', createTime: '',
attachment: [], attachment: null,
}); });
// 打开抽屉的方法 // 打开抽屉的方法
const visible = ref(false); const visible = ref(false);
// const showDrawer = async(id) => { const showDrawer = async (id) => {
// const data = await getInfo(id) const data = await getInfo(id);
// for(let i in detail){ for (let i in detail) {
// detail[i] = data[i] detail[i] = data[i];
// } }
// visible.value = true; detail.status == 0 ? (detail.status = '启用') : (detail.status = '禁用');
// console.log(detail)
// };
const showDrawer = () => {
visible.value = true; visible.value = true;
console.log(detail);
}; };
// 关闭抽屉的方法 // 关闭抽屉的方法
const onClose = () => { const onClose = () => {

29
src/views/document/index.vue
View File

@ -3,13 +3,19 @@
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleAdd">新增</a-button> <a-button type="primary" @click="handleAdd">新增</a-button>
<a-button type="link" @click="handleDetail">详情</a-button>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column && record && column.key === 'action'"> <template v-if="column && record && column.key === 'action'">
<!-- <a-button type="link" @click="handleEdit(record.id)">编辑</a-button> <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> --> <a-popconfirm
<a-button type="link" @click="handleDetail">详情</a-button> title="确定要删除吗?"
ok-text="是"
cancel-text="否"
@confirm="handleDelete(record.id)"
>
<a-button type="link">删除</a-button>
</a-popconfirm>
<a-button type="link" @click="handleDetail(record.id)">详情</a-button>
</template> </template>
</template> </template>
</BasicTable> </BasicTable>
@ -21,7 +27,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable } from '@/components/Table'; import { BasicTable, useTable } from '@/components/Table';
import { list } from './api'; import { list, removeByIds } from './api';
import { formSchemas, columns } from './data'; import { formSchemas, columns } from './data';
import detailDrawer from './detailDrawer.vue'; import detailDrawer from './detailDrawer.vue';
import { ref } from 'vue'; import { ref } from 'vue';
@ -29,7 +35,7 @@
defineOptions({ name: 'Document' }); defineOptions({ name: 'Document' });
const [registerTable] = useTable({ const [registerTable, { reload }] = useTable({
rowSelection: { rowSelection: {
type: 'checkbox', type: 'checkbox',
}, },
@ -59,14 +65,21 @@
//抽屉 //抽屉
const detailDrawerRef = ref(); const detailDrawerRef = ref();
const handleDetail = () => { const handleDetail = (id: any) => {
detailDrawerRef.value.showDrawer(); detailDrawerRef.value.showDrawer(id);
}; };
//新增编辑弹窗 //新增编辑弹窗
const addModalRef = ref(); const addModalRef = ref();
const handleAdd = () => { const handleAdd = () => {
addModalRef.value.showModal(1); addModalRef.value.showModal(1);
}; };
const handleEdit = (id: any) => {
addModalRef.value.showModal(2, id);
};
const handleDelete = async (id: any) => {
await removeByIds([id]);
reload();
};
</script> </script>
<style scoped></style> <style scoped></style>

128
src/views/project/contractManage/addModal.vue
View File

@ -1,6 +1,22 @@
<template> <template>
<a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%"> <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
<a-form ref="formRef" :model="form" layout="vertical"> <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-form-item label="所属项目" name="projectName">
<a-select
v-model:value="form.projectName"
:options="projectNameOptions"
placeholder="请选择"
:fieldNames="{
label: 'projectName',
value: 'projectName',
options: 'options',
}"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<a-form-item label="合同名称" name="contractName"> <a-form-item label="合同名称" name="contractName">
@ -8,7 +24,7 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <!-- <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<a-form-item label="父级合同" name="contractParent"> <a-form-item label="父级合同" name="contractParent">
<a-select <a-select
@ -18,7 +34,7 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row> -->
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<a-form-item label="合同编号" name="contractCode"> <a-form-item label="合同编号" name="contractCode">
@ -31,8 +47,13 @@
<a-form-item label="合同类别" name="contractType"> <a-form-item label="合同类别" name="contractType">
<a-select <a-select
v-model:value="form.contractType" v-model:value="form.contractType"
:options="projectNameOptions" :options="contractTypeOptions"
placeholder="请选择" placeholder="请选择"
:fieldNames="{
label: 'typeName',
value: 'id',
options: 'options',
}"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -40,8 +61,13 @@
<a-form-item label="所属区域" name="district"> <a-form-item label="所属区域" name="district">
<a-select <a-select
v-model:value="form.district" v-model:value="form.district"
:options="projectNameOptions" :options="districtOptions"
placeholder="请选择" placeholder="请选择"
:fieldNames="{
label: 'districtName',
value: 'districtName',
options: 'options',
}"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -75,8 +101,13 @@
<a-form-item label="甲方单位" name="partyA"> <a-form-item label="甲方单位" name="partyA">
<a-select <a-select
v-model:value="form.partyA" v-model:value="form.partyA"
:options="projectNameOptions" :options="partyAOptions"
placeholder="请选择" placeholder="请选择"
:fieldNames="{
label: 'partyName',
value: 'partyName',
options: 'options',
}"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -91,8 +122,13 @@
<a-form-item label="乙方单位" name="partyB"> <a-form-item label="乙方单位" name="partyB">
<a-select <a-select
v-model:value="form.partyB" v-model:value="form.partyB"
:options="projectNameOptions" :options="partyBOptions"
placeholder="请选择" placeholder="请选择"
:fieldNames="{
label: 'partyName',
value: 'partyName',
options: 'options',
}"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -136,7 +172,15 @@
<script> <script>
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { getInfo, add, update } from './api'; import {
getInfo,
add,
update,
getPartyInfo,
getDistrictInfo,
getProjectInfo,
getContractType,
} from './api';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
export default { export default {
@ -146,38 +190,42 @@
const visible = ref(false); const visible = ref(false);
const filelists = ref([]); const filelists = ref([]);
let form = reactive({ let form = reactive({
projectName: null,
contractName: '', contractName: '',
contractCode: '', contractCode: '',
contractParent: '', // contractParent: '',
contractType: '', contractType: null,
district: '', district: null,
contractPrice: '', contractPrice: '',
signDate: '', signDate: '',
contractDuration: [], contractDuration: [],
partyA: '', partyA: null,
partyAPerson: '', partyAPerson: '',
partyB: '', partyB: null,
partyBPerson: '', partyBPerson: '',
contractContent: '', contractContent: '',
remark: '', remark: '',
attachment: [], attachment: null,
id: null, id: null,
}); });
//下拉框 //下拉框
const projectNameOptions = [ const projectNameOptions = ref([]);
{ const contractTypeOptions = ref([]);
value: '1', const partyAOptions = ref([]);
label: 'a', const districtOptions = ref([]);
}, const partyBOptions = ref([]);
{ const getOptions = async () => {
value: '2', const res1 = await getPartyInfo();
label: 'b', partyAOptions.value = res1.rows.filter((item) => item.partyType == '甲方');
}, partyBOptions.value = res1.rows.filter((item) => item.partyType == '乙方');
{ const res2 = await getDistrictInfo();
value: '3', districtOptions.value = res2;
label: 'c', const res3 = await getProjectInfo();
}, projectNameOptions.value = res3;
]; const res4 = await getContractType();
contractTypeOptions.value = res4.rows;
};
getOptions();
const showModal = async (type, id) => { const showModal = async (type, id) => {
visible.value = true; visible.value = true;
if (type == 1) { if (type == 1) {
@ -189,7 +237,6 @@
form[i] = data[i]; form[i] = data[i];
} }
form.contractDuration = [data.startDate, data.endDate]; form.contractDuration = [data.startDate, data.endDate];
form.attachment = data.attachment ? data.attachment : [];
} }
}; };
const beforeUpload = async (file) => { const beforeUpload = async (file) => {
@ -201,6 +248,22 @@
filelists.value = fileList; filelists.value = fileList;
console.log(fileList); console.log(fileList);
}; };
const rules = {
projectName: [{ required: true, message: '请选择' }],
contractName: [{ required: true, message: '请输入' }],
contractCode: [{ required: true, message: '请输入' }],
contractType: [{ required: true, message: '请选择' }],
district: [{ required: true, message: '请选择' }],
contractPrice: [{ required: true, message: '请输入' }],
signDate: [{ required: true, message: '请选择' }],
contractDuration: [{ required: true, message: '请选择' }],
partyA: [{ required: true, message: '请选择' }],
partyAPerson: [{ required: true, message: '请输入' }],
partyB: [{ required: true, message: '请选择' }],
partyBPerson: [{ required: true, message: '请输入' }],
contractContent: [{ required: true, message: '请输入' }],
remark: [{ required: true, message: '请输入' }],
};
const handleOk = () => { const handleOk = () => {
formRef.value.validate().then((valid) => { formRef.value.validate().then((valid) => {
if (valid) { if (valid) {
@ -240,12 +303,17 @@
form, form,
showModal, showModal,
handleOk, handleOk,
projectNameOptions,
formRef, formRef,
closeModal, closeModal,
beforeUpload, beforeUpload,
importChange, importChange,
filelists, filelists,
projectNameOptions,
contractTypeOptions,
districtOptions,
partyAOptions,
partyBOptions,
rules,
}; };
}, },
}; };

17
src/views/project/contractManage/api.ts
View File

@ -3,6 +3,10 @@ import { defHttp } from '@/utils/http/axios';
enum Api { enum Api {
root = '/platform/contractInfo', root = '/platform/contractInfo',
list = '/platform/contractInfo/list', list = '/platform/contractInfo/list',
getPartyInfo = '/platform/partyInfo/list',
getDistrictInfo = '/platform/districtInfo/queryAll',
getProjectInfo = '/platform/projectInfo/getNames',
getContractType = '/platform/contractType/list',
} }
export function list(params: any) { export function list(params: any) {
@ -24,3 +28,16 @@ export function update(data: any) {
export function removeByIds(ids: any) { export function removeByIds(ids: any) {
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` });
} }
export function getPartyInfo() {
return defHttp.get({ url: Api.getPartyInfo });
}
export function getDistrictInfo() {
return defHttp.get({ url: Api.getDistrictInfo });
}
export function getProjectInfo() {
return defHttp.get({ url: Api.getProjectInfo });
}
export function getContractType() {
return defHttp.get({ url: Api.getContractType });
}

8
src/views/project/contractManage/detailDrawer.vue
View File

@ -60,10 +60,7 @@
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<div <div><span class="titleLabel">所属项目名称：</span>{{ detail.projectName }}</div>
><span class="titleLabel">关联合同数量：</span
>{{ detail.relatedContractAmount }}</div
>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
@ -101,11 +98,12 @@
partyA: '', partyA: '',
partyAPerson: '', partyAPerson: '',
partyB: '', partyB: '',
partyBPerson: '',
contractPrice: '', contractPrice: '',
signDate: '', signDate: '',
startDate: '', startDate: '',
endDate: '', endDate: '',
relatedContractAmount: null, // relatedContractAmount: null,
contractContent: '', contractContent: '',
remark: '', remark: '',
attachment: [], attachment: [],

9
src/views/project/contractManage/index.vue
View File

@ -7,7 +7,14 @@
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column && record && column.key === 'action'"> <template v-if="column && record && column.key === 'action'">
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> <a-popconfirm
title="确定要删除吗?"
ok-text="是"
cancel-text="否"
@confirm="handleDelete(record.id)"
>
<a-button type="link">删除</a-button>
</a-popconfirm>
<a-button type="link" @click="handleDetail(record.id)">详情</a-button> <a-button type="link" @click="handleDetail(record.id)">详情</a-button>
</template> </template>
</template> </template>

152
src/views/project/projectManage/addModal.vue
View File

@ -1,17 +1,6 @@
<template> <template>
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
<a-form :model="form" layout="vertical"> <a-form :model="form" layout="vertical" :rules="rules" ref="formRef">
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-form-item label="所属合同" name="contractName">
<a-select
v-model:value="form.contractName"
:options="projectNameOptions"
placeholder="请选择"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<a-form-item label="项目名称" name="projectName"> <a-form-item label="项目名称" name="projectName">
@ -31,7 +20,7 @@
<a-form-item label="项目类别" name="projectType"> <a-form-item label="项目类别" name="projectType">
<a-select <a-select
v-model:value="form.projectType" v-model:value="form.projectType"
:options="projectNameOptions" :options="projectTypeOptions"
placeholder="请选择" placeholder="请选择"
/> />
</a-form-item> </a-form-item>
@ -42,7 +31,12 @@
<a-form-item label="故障大类" name="faultCategory"> <a-form-item label="故障大类" name="faultCategory">
<a-select <a-select
v-model:value="form.faultCategory" v-model:value="form.faultCategory"
:options="projectNameOptions" :options="faultCategoryOptions"
:fieldNames="{
label: 'typeName',
value: 'id',
options: 'options',
}"
placeholder="请选择" placeholder="请选择"
/> />
</a-form-item> </a-form-item>
@ -83,8 +77,10 @@
<a-col :span="24"> <a-col :span="24">
<a-form-item label="项目图标" name="icon"> <a-form-item label="项目图标" name="icon">
<a-upload <a-upload
v-model:file-list="form.icon" :before-upload="beforeUploadIcon"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="importChangeIcon"
:file-list="iconLists"
:maxCount="1"
> >
<a-button type="primary"> 上传 </a-button> <a-button type="primary"> 上传 </a-button>
</a-upload> </a-upload>
@ -95,8 +91,10 @@
<a-col :span="24"> <a-col :span="24">
<a-form-item label="附件" name="attachment"> <a-form-item label="附件" name="attachment">
<a-upload <a-upload
v-model:file-list="form.attachment" :before-upload="beforeUpload"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="importChange"
:file-list="filelists"
:maxCount="1"
> >
<a-button type="primary"> 上传 </a-button> <a-button type="primary"> 上传 </a-button>
</a-upload> </a-upload>
@ -109,42 +107,54 @@
<script> <script>
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { getInfo } from './api'; import { getInfo, getFaultCategoryType, add, update } from './api';
// import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
export default { export default {
setup() { setup() {
const title = ref('新增'); const title = ref('新增');
const formRef = ref();
const visible = ref(false); const visible = ref(false);
const form = reactive({ const form = reactive({
contractName: '', projectName: '',
contractCode: '',
projectCode: '', projectCode: '',
projectType: '', projectType: null,
faultCategory: '', faultCategory: null,
orderTakingOverTime: '', orderTakingOverTime: '',
orderTakingCost: '', orderTakingCost: '',
handleOverTime: '', handleOverTime: '',
handleCost: '', handleCost: '',
projectContent: '', projectContent: '',
icon: [], icon: null,
attachment: [], attachment: null,
id: null, id: null,
}); });
//下拉框 //下拉框
const projectNameOptions = [
const projectTypeOptions = [
{ {
value: '1', value: '交警',
label: 'a',
}, },
{ {
value: '2', value: '公安',
label: 'b',
}, },
{ {
value: '3', value: '环保',
label: 'c', },
{
value: '公路',
},
{
value: '其他',
}, },
]; ];
const faultCategoryOptions = ref([]);
const getOptions = async () => {
const res = await getFaultCategoryType();
faultCategoryOptions.value = res.rows;
};
getOptions();
//打开弹窗
const showModal = async (type, id) => { const showModal = async (type, id) => {
if (type == 1) { if (type == 1) {
title.value = '新增'; title.value = '新增';
@ -158,12 +168,66 @@
} }
visible.value = true; visible.value = true;
}; };
//校验
const handleOk = () => { const rules = {
console.log('Form Data:', form); projectName: [{ required: true, message: '请输入' }],
// 在此处可以添加表单验证逻辑 projectCode: [{ required: true, message: '请输入' }],
projectType: [{ required: true, message: '请选择' }],
faultCategory: [{ required: true, message: '请选择' }],
orderTakingOverTime: [{ required: true, message: '请输入' }],
orderTakingCost: [{ required: true, message: '请输入' }],
handleOverTime: [{ required: true, message: '请输入' }],
handleCost: [{ required: true, message: '请输入' }],
projectContent: [{ required: true, message: '请输入' }],
};
//关闭modal
const closeModal = () => {
formRef.value.resetFields();
visible.value = false; visible.value = false;
}; };
//图标，附件上传
const filelists = ref([]);
const beforeUpload = async (file) => {
form.attachment = file;
return false;
};
const importChange = ({ fileList }) => {
filelists.value = fileList;
};
const iconLists = ref([]);
const beforeUploadIcon = async (file) => {
form.attachment = file;
return false;
};
const importChangeIcon = ({ fileList }) => {
iconLists.value = fileList;
};
//提交
const handleOk = () => {
formRef.value.validate().then((valid) => {
if (valid) {
if (title.value == '新增') {
let params = {};
for (let i in form) {
params[i] = form[i];
}
add(params).then((_) => {
message.success('新增成功');
visible.value = false;
});
} else {
let params = {};
for (let i in form) {
params[i] = form[i];
}
update(params).then((_) => {
message.success('编辑成功');
visible.value = false;
});
}
}
});
};
return { return {
visible, visible,
@ -171,7 +235,17 @@
form, form,
showModal, showModal,
handleOk, handleOk,
projectNameOptions, projectTypeOptions,
faultCategoryOptions,
rules,
formRef,
closeModal,
filelists,
iconLists,
beforeUpload,
beforeUploadIcon,
importChange,
importChangeIcon,
}; };
}, },
}; };

5
src/views/project/projectManage/api.ts
View File

@ -3,6 +3,7 @@ import { defHttp } from '@/utils/http/axios';
enum Api { enum Api {
root = '/platform/projectInfo', root = '/platform/projectInfo',
list = '/platform/projectInfo/list', list = '/platform/projectInfo/list',
getFaultCategoryType = '/platform/faultCategoryType/list',
} }
export function list(params: any) { export function list(params: any) {
@ -20,7 +21,9 @@ export function add(data: any) {
export function update(data: any) { export function update(data: any) {
return defHttp.put({ url: Api.root, data }); return defHttp.put({ url: Api.root, data });
} }
export function getFaultCategoryType() {
return defHttp.get({ url: Api.getFaultCategoryType });
}
export function removeByIds(ids: any) { export function removeByIds(ids: any) {
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` });
} }

17
src/views/project/projectManage/detailDrawer.vue
View File

@ -39,23 +39,32 @@
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<div <div
><span class="titleLabel">接单超期时间：</span>{{ detail.orderTakingOverTime }}</div ><span class="titleLabel">接单超期时间(小时)：</span
>{{ detail.orderTakingOverTime }}</div
> >
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<div><span class="titleLabel">接单超期扣款：</span>{{ detail.orderTakingCost }}</div> <div
><span class="titleLabel">接单超期扣款(元/小时)：</span
>{{ detail.orderTakingCost }}</div
>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<div><span class="titleLabel">处理超期时间：</span>{{ detail.handleOverTime }}</div> <div
><span class="titleLabel">处理超期时间(小时)：</span
>{{ detail.handleOverTime }}</div
>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <a-col :span="24">
<div><span class="titleLabel">处理超期扣款：</span>{{ detail.handleCost }}</div> <div
><span class="titleLabel">处理超期扣款(元/小时)：</span>{{ detail.handleCost }}</div
>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">

9
src/views/project/projectManage/index.vue
View File

@ -9,7 +9,14 @@
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column && record && column.key === 'action'"> <template v-if="column && record && column.key === 'action'">
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> <a-popconfirm
title="确定要删除吗?"
ok-text="是"
cancel-text="否"
@confirm="handleDelete(record.id)"
>
<a-button type="link">删除</a-button>
</a-popconfirm>
<a-button type="link" @click="handleDetail(record.id)">详情</a-button> <a-button type="link" @click="handleDetail(record.id)">详情</a-button>
</template> </template>
</template> </template>

9
src/views/project/serviceManage/index.vue
View File

@ -54,7 +54,14 @@
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column && record && column.key === 'action'"> <template v-if="column && record && column.key === 'action'">
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> <a-popconfirm
title="确定要删除吗?"
ok-text="是"
cancel-text="否"
@confirm="handleDelete(record.id)"
>
<a-button type="link">删除</a-button>
</a-popconfirm>
</template> </template>
</template> </template>
</BasicTable> </BasicTable>

Write Preview
Loading…
Cancel
Save