优化界面

This commit is contained in:
wcq 2023-08-03 21:16:18 +08:00
parent 4bf4f1a13d
commit 22ea4b8e3d
1 changed files with 303 additions and 285 deletions

View File

@ -6,16 +6,16 @@
</div>
<div class="flex">
<el-input
placeholder="请输入公司名称"
size="small"
@change="getData"
v-model="query.company_name"
placeholder="请输入公司名称"
size="small"
@change="getData"
v-model="query.company_name"
/>
<el-button
circle
:icon="Search"
class="mx-4"
@click="getData"
circle
:icon="Search"
class="mx-4"
@click="getData"
></el-button>
</div>
</div>
@ -26,24 +26,24 @@
<el-table-column align="center" prop="mgr_data_state" label="数据准备">
<template #header>
<el-select
clearable
v-model="query.mgr_data_state"
@change="getData"
@clear="()=>query.mgr_data_state=null"
size="small"
placeholder="数据准备"
clearable
v-model="query.mgr_data_state"
@change="getData"
@clear="()=>query.mgr_data_state=null"
size="small"
placeholder="数据准备"
>
<el-option
v-for="item in ['已就绪', '未就绪']"
:label="item"
:key="item"
:value="item"
v-for="item in ['已就绪', '未就绪']"
:label="item"
:key="item"
:value="item"
/>
</el-select>
</template>
<template #default="scope">
<span
:style="{
:style="{
color: scope.row.mgr_data_state === '已就绪' ? 'green' : 'red'
}"
>{{ scope.row.mgr_data_state }}</span
@ -60,23 +60,23 @@
<template #default="scope">
<div class="flex flex-c">
<el-button
type="primary"
size="small"
@click="showDetailEdit(scope.row)"
type="primary"
size="small"
@click="showDetailEdit(scope.row)"
>详情
</el-button
>
<el-button
type="primary"
size="small"
@click="loadApiData(scope.row)"
type="primary"
size="small"
@click="loadApiData(scope.row)"
>导入
</el-button
>
<el-button
type="danger"
size="small"
@click="showDeleteConfirm(scope.row)"
type="danger"
size="small"
@click="showDeleteConfirm(scope.row)"
>删除
</el-button
>
@ -96,21 +96,21 @@
<!-- </div>-->
<div class="flex justify-center mt-1.5">
<el-pagination
v-model:current-page="query.page"
v-model:page-size="query.page_size"
@size-change="getData"
:page-sizes="[10, 20,30,40]"
:small="false"
layout="total,sizes,prev, pager, next"
:total="count"
@current-change="getData"
v-model:current-page="query.page"
v-model:page-size="query.page_size"
@size-change="getData"
:page-sizes="[10, 20,30,40]"
:small="false"
layout="total,sizes,prev, pager, next"
:total="count"
@current-change="getData"
/>
</div>
<el-dialog
title="详情"
class="detailEditCard"
v-model="detailEditVisible"
style="
title="详情"
class="detailEditCard"
v-model="detailEditVisible"
style="
width: 90%;
margin-top: 1rem;
margin-bottom: 1rem;
@ -121,7 +121,7 @@
<div class="px-4 flex flex-col">
<div class="flex">
<div
:class="
:class="
'nav-item' +
(detailEditTab && detailEditTab.split('-')[0] == '企业填报数据'
? ' active'
@ -129,25 +129,25 @@
"
>
<div
class="nav-name"
@click="() => (detailEditTab = '企业填报数据-问卷')"
class="nav-name"
@click="() => (detailEditTab = '企业填报数据-问卷')"
>
企业填报数据
</div>
<div class="nav-des flex">
<div
:class="
:class="
'nav-item-child' +
(detailEditTab == '企业填报数据-问卷' ? ' active' : '')
"
@click="detailEditTab = '企业填报数据-问卷'"
@click="detailEditTab = '企业填报数据-问卷'"
>
问卷
</div>
<div
style="margin-left: 0.5rem"
@click="detailEditTab = '企业填报数据-财报'"
:class="
style="margin-left: 0.5rem"
@click="detailEditTab = '企业填报数据-财报'"
:class="
'nav-item-child' +
(detailEditTab == '企业填报数据-财报' ? ' active' : '')
"
@ -157,8 +157,8 @@
</div>
</div>
<div
@click="() => (detailEditTab = '三方接口数据-天眼查')"
:class="
@click="() => (detailEditTab = '三方接口数据-天眼查')"
:class="
'nav-item' +
(detailEditTab && detailEditTab.split('-')[0] == '三方接口数据'
? ' active'
@ -168,47 +168,47 @@
<div class="nav-name">三方接口数据</div>
<div class="nav-des">
<div
:class="
:class="
'nav-item-child' +
(detailEditTab == '三方接口数据-天眼查' ? ' active' : '')
"
@click="detailEditTab = '三方接口数据-天眼查'"
@click="detailEditTab = '三方接口数据-天眼查'"
>
天眼查
</div>
</div>
</div>
<!-- <div-->
<!-- @click="() => (detailEditTab = '尽调核实数据-定性指标')"-->
<!-- :class="-->
<!-- 'nav-item' +-->
<!-- (detailEditTab && detailEditTab.split('-')[0] == '尽调核实数据'-->
<!-- ? ' active'-->
<!-- : '')-->
<!-- "-->
<!-- >-->
<!-- <div class="nav-name">尽调核实数据</div>-->
<!-- <div class="nav-des">-->
<!-- <div-->
<!-- :class="-->
<!-- 'nav-item-child' +-->
<!-- (detailEditTab == '尽调核实数据-定性指标' ? ' active' : '')-->
<!-- "-->
<!-- @click="detailEditTab = '尽调核实数据-定性指标'"-->
<!-- >-->
<!-- 指标数据-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div-->
<!-- @click="() => (detailEditTab = '尽调核实数据-定性指标')"-->
<!-- :class="-->
<!-- 'nav-item' +-->
<!-- (detailEditTab && detailEditTab.split('-')[0] == '尽调核实数据'-->
<!-- ? ' active'-->
<!-- : '')-->
<!-- "-->
<!-- >-->
<!-- <div class="nav-name">尽调核实数据</div>-->
<!-- <div class="nav-des">-->
<!-- <div-->
<!-- :class="-->
<!-- 'nav-item-child' +-->
<!-- (detailEditTab == '尽调核实数据-定性指标' ? ' active' : '')-->
<!-- "-->
<!-- @click="detailEditTab = '尽调核实数据-定性指标'"-->
<!-- >-->
<!-- 指标数据-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="ml-auto mx-2">
<div style="font-size: 1.1rem">{{ rowTemp.company_name }}</div>
<div class="flex mt-2">
<span class="ml-auto">数据状态</span>
<div style="font-size: 1rem">
<el-icon
v-if="rowTemp.mgr_data_state == '已就绪'"
class="mx-2"
style="color: green"
v-if="rowTemp.mgr_data_state == '已就绪'"
class="mx-2"
style="color: green"
>
<Check
/>
@ -227,11 +227,11 @@
<div v-if="detailEditTab == '企业填报数据-问卷'">
<!-- -->
<el-table
height="70vh"
max-height="70vh"
style="overflow-x: hidden"
:data="bjDataConfig.企业填报数据.问卷.columns"
border
height="70vh"
max-height="70vh"
style="overflow-x: hidden"
:data="bjDataConfig.企业填报数据.问卷.columns"
border
>
<el-table-column align="center" label="字段名">
<template #default="scope">
@ -241,25 +241,33 @@
<el-table-column label="字段值" align="center">
<template #default="scope">
{{ fileDataTemp["问卷数据"][scope.row?.key] }}
<EditFormItem
:column-config="scope.row"
class="max-w-[12rem]"
:model-value="manDataEditTemp[scope.row?.key]"
@update:model-value="(newVal)=>manDataEditTemp[scope.row?.key] = newVal"
></EditFormItem>
</template>
<!-- <template #default="scope">-->
<!-- {{ manDataEditTemp["问卷数据"][scope.row?.key] }}-->
<!-- </template>-->
</el-table-column>
</el-table>
</div>
<div v-if="detailEditTab == '企业填报数据-财报'">
<el-table
height="70vh"
max-height="70vh"
:span-method="arraySpanMethod"
style="overflow-x: hidden"
:data="bjDataConfig.企业填报数据.财报.columns"
border
height="70vh"
max-height="70vh"
:span-method="arraySpanMethod"
style="overflow-x: hidden"
:data="bjDataConfig.企业填报数据.财报.columns"
border
>
<el-table-column align="center" label="科目">
<template #default="scope">
<div
v-if="scope.row.type == 'label'"
style="font-weight: 600; font-size: 1rem"
v-if="scope.row.type == 'label'"
style="font-weight: 600; font-size: 1rem"
>
{{ scope.row?.name }}
</div>
@ -269,38 +277,35 @@
</template>
</el-table-column>
<el-table-column
:label="Object.keys(fileDataTemp['财报数据'])[0]"
align="center"
v-for="item in Object.keys(manDataEditTemp['财报数据'])"
:label="item"
align="center"
>
<template #default="scope">
{{
fileDataTemp["财报数据"][
Object.keys(fileDataTemp["财报数据"])[0]
][scope.row?.key]
}}
</template>
</el-table-column>
<el-table-column
:label="Object.keys(fileDataTemp['财报数据'])[1]"
align="center"
>
<template #default="scope">
{{
fileDataTemp["财报数据"][
Object.keys(fileDataTemp["财报数据"])[1]
][scope.row?.key]
}}
<EditFormItem
:column-config="scope.row"
class="max-w-[12rem]"
:model-value='manDataEditTemp["财报数据"][item][scope.row?.key]'
@update:model-value='(newVal)=>manDataEditTemp["财报数据"][ item ][scope.row?.key] = newVal'
></EditFormItem>
</template>
<!-- <template #default="scope">-->
<!-- {{-->
<!-- manDataEditTemp["财报数据"][-->
<!-- item-->
<!-- ][scope.row?.key]-->
<!-- }}-->
<!-- </template>-->
</el-table-column>
</el-table>
</div>
<div v-else-if="detailEditTab == '三方接口数据-天眼查'">
<el-table
height="65vh"
max-height="65vh"
style="overflow-x: hidden"
:data="bjDataConfig.三方接口数据.天眼查.columns"
border
height="65vh"
max-height="65vh"
style="overflow-x: hidden"
:data="bjDataConfig.三方接口数据.天眼查.columns"
border
>
<el-table-column align="center" label="字段名">
<template #default="scope">
@ -315,101 +320,101 @@
</el-table-column>
</el-table>
</div>
<!-- <div v-if="detailEditTab == '尽调核实数据-定性指标'">-->
<!-- <el-table-->
<!-- height="65vh"-->
<!-- max-height="65vh"-->
<!-- style="overflow-x: hidden"-->
<!-- :data="-->
<!-- bjDataConfig.model.columns.concat(-->
<!-- bjDataConfig.尽调核实数据.定性指标.columns-->
<!-- )-->
<!-- "-->
<!-- border-->
<!-- >-->
<!-- <el-table-column align="center" label="字段名">-->
<!-- <template #default="scope">-->
<!-- {{ scope.row?.name }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <div v-if="detailEditTab == '尽调核实数据-定性指标'">-->
<!-- <el-table-->
<!-- height="65vh"-->
<!-- max-height="65vh"-->
<!-- style="overflow-x: hidden"-->
<!-- :data="-->
<!-- bjDataConfig.model.columns.concat(-->
<!-- bjDataConfig.尽调核实数据.定性指标.columns-->
<!-- )-->
<!-- "-->
<!-- border-->
<!-- >-->
<!-- <el-table-column align="center" label="字段名">-->
<!-- <template #default="scope">-->
<!-- {{ scope.row?.name }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- &lt;!&ndash; <el-table-column label="文件值" align="center">-->
<!-- <template #default="scope">-->
<!-- {{ wjDataTemp[scope.row?.key] }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="接口值" align="center">-->
<!-- <template #default="scope">-->
<!-- {{ apiDataTemp[scope.row?.key] }}-->
<!-- </template>-->
<!-- </el-table-column> &ndash;&gt;-->
<!-- <el-table-column label="指标值" align="center">-->
<!-- <template #default="scope">-->
<!-- <EditFormItem-->
<!-- :column-config="scope.row"-->
<!-- class="max-w-[12rem]"-->
<!-- v-model="manDataEditTempComputed[scope.row?.key]"-->
<!-- @change="-->
<!-- newVal => {-->
<!-- manDataEditTemp[scope.row?.key] = newVal;-->
<!-- }-->
<!-- "-->
<!-- ></EditFormItem>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="数据状态" align="center">-->
<!-- <template #default="scope">-->
<!-- <span-->
<!-- v-if="-->
<!-- [undefined, '', null].indexOf(-->
<!-- manDataEditTemp[scope.row?.key]-->
<!-- ) === -1 ||-->
<!-- [undefined, '', null].indexOf(-->
<!-- apiDataTemp[scope.row?.key]-->
<!-- ) === -1 ||-->
<!-- [undefined, '', null].indexOf(-->
<!-- wjDataTemp[scope.row?.key]-->
<!-- ) === -1-->
<!-- "-->
<!-- style="color: green"-->
<!-- >-->
<!-- 数据正常-->
<!-- </span>-->
<!-- <span v-else style="color: red"> 数据缺失 </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; <el-table-->
<!-- height="65vh"-->
<!-- max-height="65vh"-->
<!-- style="overflow-x: hidden"-->
<!-- :data="bjDataConfig.尽调核实数据.定性指标.columns"-->
<!-- border-->
<!-- >-->
<!-- <el-table-column align="center" label="字段名">-->
<!-- <template #default="scope">-->
<!-- {{ scope.row?.name }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- &lt;!&ndash; <el-table-column label="文件值" align="center">-->
<!-- <template #default="scope">-->
<!-- {{ wjDataTemp[scope.row?.key] }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="接口值" align="center">-->
<!-- <template #default="scope">-->
<!-- {{ apiDataTemp[scope.row?.key] }}-->
<!-- </template>-->
<!-- </el-table-column> &ndash;&gt;-->
<!-- <el-table-column label="指标值" align="center">-->
<!-- <template #default="scope">-->
<!-- <EditFormItem-->
<!-- :column-config="scope.row"-->
<!-- class="max-w-[12rem]"-->
<!-- v-model="manDataEditTempComputed[scope.row?.key]"-->
<!-- @change="-->
<!-- newVal => {-->
<!-- manDataEditTemp[scope.row?.key] = newVal;-->
<!-- }-->
<!-- "-->
<!-- ></EditFormItem>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="数据状态" align="center">-->
<!-- <template #default="scope">-->
<!-- <span-->
<!-- v-if="-->
<!-- [undefined, '', null].indexOf(-->
<!-- manDataEditTemp[scope.row?.key]-->
<!-- ) === -1 ||-->
<!-- [undefined, '', null].indexOf(-->
<!-- apiDataTemp[scope.row?.key]-->
<!-- ) === -1 ||-->
<!-- [undefined, '', null].indexOf(-->
<!-- wjDataTemp[scope.row?.key]-->
<!-- ) === -1-->
<!-- "-->
<!-- style="color: green"-->
<!-- >-->
<!-- 数据正常-->
<!-- </span>-->
<!-- <span v-else style="color: red"> 数据缺失 </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; <el-table-->
<!-- height="65vh"-->
<!-- max-height="65vh"-->
<!-- style="overflow-x: hidden"-->
<!-- :data="bjDataConfig.尽调核实数据.定性指标.columns"-->
<!-- border-->
<!-- >-->
<!-- <el-table-column align="center" label="字段名">-->
<!-- <template #default="scope">-->
<!-- {{ scope.row?.name }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="字段值" align="center">-->
<!-- <template #default="scope">-->
<!-- <EditFormItem-->
<!-- :column-config="scope.row"-->
<!-- v-model="manDataEditTemp[scope.row?.key]"-->
<!-- ></EditFormItem>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table> &ndash;&gt;-->
<!-- <div class="flex">-->
<!-- <div class="ml-auto mt-1">-->
<!-- <el-button type="primary" size="small" @click="saveManDataEdit"-->
<!-- >确定-->
<!-- </el-button-->
<!-- >-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-table-column label="字段值" align="center">-->
<!-- <template #default="scope">-->
<!-- <EditFormItem-->
<!-- :column-config="scope.row"-->
<!-- v-model="manDataEditTemp[scope.row?.key]"-->
<!-- ></EditFormItem>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table> &ndash;&gt;-->
<!-- <div class="flex">-->
<!-- <div class="ml-auto mt-1">-->
<!-- <el-button type="primary" size="small" @click="saveManDataEdit"-->
<!-- >确定-->
<!-- </el-button-->
<!-- >-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</el-dialog>
@ -418,12 +423,12 @@
<script setup lang="ts">
import {api} from "@/api/api";
import {FormConfig} from "@/components/EditForm/types";
import EditFormItem from "@/components/EditTablePlus/EditFormItem/EditFormItem.vue";
import {BjDataConfig, RateData} from "@/types/bj";
import {ElMessage, ElMessageBox} from "element-plus";
import {computed, onMounted, ref} from "vue";
import {Check, Search, WarningFilled} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import EditFormItem from "@/components/EditTablePlus/EditFormItem/EditFormItem.vue"
function objectRemoveNull(obj: Object) {
if (!obj) {
@ -441,7 +446,14 @@ const data = ref<RateData[]>([]);
const count = ref(0);
const detailEditTab = ref("企业填报数据-问卷");
const rowTemp = ref<RateData>(null);
const manDataEditTemp = ref(null);
const manDataEditTemp = ref({
"问卷数据": {},
"财报数据": {
"2023": {},
"2022": {},
"2021": {},
}
});
const fileDataTemp = ref(null);
const fileDataVisible = ref(false);
@ -496,50 +508,58 @@ function exincludeNull(obj: {}) {
})
return newVal
}
const getData = () => {
api
.post("/wd-smebiz/smebiz_rate/company_rate/query", exincludeNull(query.value))
.then(res => {
data.value = res.data.items;
count.value = res.data.count;
})
.catch(e => {
console.error(e);
ElMessage.warning(e.response?.data?.detail || "获取数据错误");
});
.post("/wd-smebiz/smebiz_rate/company_rate/query", exincludeNull(query.value))
.then(res => {
data.value = res.data.items;
count.value = res.data.count;
})
.catch(e => {
console.error(e);
ElMessage.warning(e.response?.data?.detail || "获取数据错误");
});
};
function loadApiData(row: RateData) {
ElMessage.success("开始导入,请等待");
api
.post("/wd-smebiz/smebiz_rate/company_rate/load_api_data_to_db", {
id: row.id
})
.then(res => {
ElMessage.success("导入成功");
getData();
})
.catch(e => {
console.error(e);
ElMessage.warning(e.response?.data?.detail || "导入错误");
});
.post("/wd-smebiz/smebiz_rate/company_rate/load_api_data_to_db", {
id: row.id
})
.then(res => {
ElMessage.success("导入成功");
getData();
})
.catch(e => {
console.error(e);
ElMessage.warning(e.response?.data?.detail || "导入错误");
});
}
function showDetailEdit(row: RateData) {
api
.post("/wd-smebiz/smebiz_rate/company_rate/get", {id: row.id}).then(res => {
.post("/wd-smebiz/smebiz_rate/company_rate/get", {id: row.id}).then(res => {
rowTemp.value = res.data
if (!rowTemp.value?.man_data) {
manDataEditTemp.value = {};
manDataEditTemp.value = {
"问卷数据": {},
"财报数据": {
"2023": {},
"2022": {},
"2021": {},
}
};
} else {
manDataEditTemp.value = JSON.parse(rowTemp.value.man_data);
// manDataEditTemp.value = JSON.parse(rowTemp.value.man_data);
}
if (!rowTemp.value?.file_data) {
fileDataTemp.value = {};
} else {
fileDataTemp.value = JSON.parse(rowTemp.value.file_data);
}
// if (!rowTemp.value?.file_data) {
// fileDataTemp.value = {};
// } else {
// fileDataTemp.value = JSON.parse(rowTemp.value.file_data);
// }
if (!rowTemp.value?.wj_data) {
wjDataTemp.value = {};
} else {
@ -558,21 +578,19 @@ function showDetailEdit(row: RateData) {
const arraySpanMethod = ({row, column, rowIndex, columnIndex}) => {
if (row.type == "label") {
// console.log("xxxxxx");
return [1, 3];
return [1, Object.keys(manDataEditTemp.value['财报数据']).length + 1];
}
};
function showFileData(row: RateData) {
if (!row.file_data) {
fileDataTemp.value = {};
} else {
fileDataTemp.value = JSON.parse(row.file_data);
}
console.log(fileDataTemp);
fileDataVisible.value = true;
}
// function showFileData(row: RateData) {
// if (!row.file_data) {
// fileDataTemp.value = {};
// } else {
// fileDataTemp.value = JSON.parse(row.file_data);
// }
// console.log(fileDataTemp);
// fileDataVisible.value = true;
// }
function showApiData(row: RateData) {
if (!row.api_data) {
@ -600,11 +618,11 @@ function showManDataEdit(row: RateData) {
manDataEditTemp.value = JSON.parse(rowTemp.value.man_data);
}
if (!row.file_data) {
fileDataTemp.value = {};
} else {
fileDataTemp.value = JSON.parse(row.file_data);
}
// if (!row.file_data) {
// fileDataTemp.value = {};
// } else {
// fileDataTemp.value = JSON.parse(row.file_data);
// }
if (!row.api_data) {
apiDataTemp.value = {};
} else {
@ -620,19 +638,19 @@ function showManDataEdit(row: RateData) {
function saveManDataEdit() {
api
.post("/wd-smebiz/smebiz_rate/company_rate/update", {
id: rowTemp.value.id,
man_data: JSON.stringify(manDataEditTemp.value)
})
.then(res => {
ElMessage.success("保存成功");
manDataEditVisible.value = false;
getData();
})
.catch(e => {
console.error(e);
ElMessage.warning(e.response?.data?.detail || "保存错误");
});
.post("/wd-smebiz/smebiz_rate/company_rate/update", {
id: rowTemp.value.id,
man_data: JSON.stringify(manDataEditTemp.value)
})
.then(res => {
ElMessage.success("保存成功");
manDataEditVisible.value = false;
getData();
})
.catch(e => {
console.error(e);
ElMessage.warning(e.response?.data?.detail || "保存错误");
});
}
function showDeleteConfirm(row: RateData) {
@ -641,26 +659,26 @@ function showDeleteConfirm(row: RateData) {
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
api
.post("/wd-smebiz/smebiz_rate/company_rate/delete", {
id: row.id
})
.then(_res => {
ElMessage.success("删除成功");
getData();
})
.catch(e => {
ElMessage.warning(e);
throw e;
});
})
.catch(() => {
});
.then(() => {
api
.post("/wd-smebiz/smebiz_rate/company_rate/delete", {
id: row.id
})
.then(_res => {
ElMessage.success("删除成功");
getData();
})
.catch(e => {
ElMessage.warning(e);
throw e;
});
})
.catch(() => {
});
}
onMounted(() => {
api.get("/wd-smebiz/static/bj_model.json").then(res => {
api.get("/wd-smebiz/static/model.json").then(res => {
const data = res.data;
bjDataConfig.value = data;
modelConfigDict.value = {};