wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

init

pull/1/head
z 2024-01-10 13:52:16 +08:00
parent 6124a37116
commit f74c51cbb7
20 changed files with 616 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -27,6 +27,7 @@
"throttle-debounce": "^5.0.0",
"v-viewer": "^3.0.11",
"vue": "^3.4.3",
"vue-draggable-plus": "^0.3.4",
"vue-router": "^4.2.5",
"vue3-pdfjs": "^0.1.6",
"vue3-print-nb": "^0.1.4",
@ -1304,6 +1305,12 @@
"undici-types": "~5.26.4"
}
},
"node_modules/@types/sortablejs": {
"version": "1.15.7",
"resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.7.tgz",
"integrity": "sha512-PvgWCx1Lbgm88FdQ6S7OGvLIjWS66mudKPlfdrWil0TjsO5zmoZmzoKiiwRShs1dwPgrlkr0N4ewuy0/+QUXYQ==",
"peer": true
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@ -5561,6 +5568,19 @@
}
}
},
"node_modules/vue-draggable-plus": {
"version": "0.3.4",
"resolved": "https://registry.npmmirror.com/vue-draggable-plus/-/vue-draggable-plus-0.3.4.tgz",
"integrity": "sha512-3HyaQiJZLrhr6fdD66cS2O4HOsxyo8rfrdcvFctmsduRnBTMYwPsLmONN1WU7RGWHQoBBodt5l2PeRCvblgP3A==",
"peerDependencies": {
"@types/sortablejs": "^1.15.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-eslint-parser": {
"version": "9.3.2",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",

1
package.json
View File

@ -29,6 +29,7 @@
"throttle-debounce": "^5.0.0",
"v-viewer": "^3.0.11",
"vue": "^3.4.3",
"vue-draggable-plus": "^0.3.4",
"vue-router": "^4.2.5",
"vue3-pdfjs": "^0.1.6",
"vue3-print-nb": "^0.1.4",

6
src/assets/css/common.scss
View File

@ -126,7 +126,7 @@ h1, h2, h3, h4, h5, h6 {
font-size: revert;
}
#app {
.layout-container {
background-color: #030f2f;
min-height: 100vh;
background-image: url("/src/assets/images/public/bg.jpg");
@ -288,7 +288,7 @@ div::-webkit-scrollbar-track {
margin: 3mm;
}
.page_break{
.page_break {
page-break-after: always;
}
@ -296,6 +296,7 @@ div::-webkit-scrollbar-track {
.el-descriptions__label.el-descriptions__cell.is-bordered-label {
color: #000 !important;
}
.el-descriptions {
--el-text-color-primary: #000 !important;
}
@ -308,6 +309,7 @@ div::-webkit-scrollbar-track {
border-collapse: collapse;
width: 100%;
display: table;
font-size: 12px;
td, th {
border: 1px solid var(--el-border-color);

7
src/assets/css/element.scss
View File

@ -275,11 +275,6 @@
--el-border-color-light: var(--el-border-color);
}
.el-divider__text {
font-size: 16px !important;
font-weight: 700 !important;
}
.el-dialog {
background: transparent !important;
--el-dialog-margin-top: 50px !important;
@ -336,6 +331,8 @@
}
.el-divider__text {
font-size: 16px !important;
font-weight: 700 !important;
background-color: var(--el-fill-color-blank) !important;
color: var(--el-text-color-regular) !important;
}

41
src/assets/js/asyncRouter.js
View File

@ -202,6 +202,47 @@ export default [
path: "",
component: "hazard_investigation/inventory_management/index",
},
{
path: "/hazard_investigation/inventory_management/print",
meta: {
title: "打印",
activeMenu: "/hazard_investigation/inventory_management",
},
component: "hazard_investigation/inventory_management/print",
},
{
path: "/hazard_investigation/inventory_management/part_qr_code",
meta: {
title: "部位二维码",
activeMenu: "/hazard_investigation/inventory_management",
},
component: "children",
children: [
{
path: "",
component:
"hazard_investigation/inventory_management/part_qr_code",
},
{
path: "/hazard_investigation/inventory_management/part_qr_code/batch_printing",
meta: {
title: "批量打印",
activeMenu: "/hazard_investigation/inventory_management",
},
component:
"hazard_investigation/inventory_management/batch_printing",
},
],
},
{
path: "/hazard_investigation/inventory_management/insurance_coverage",
meta: {
title: "设置包保责任类型",
activeMenu: "/hazard_investigation/inventory_management",
},
component:
"hazard_investigation/inventory_management/insurance_coverage",
},
],
},
],

2
src/assets/js/constant.js
View File

@ -17,7 +17,7 @@ export const MENU = [
{ title: "综合管理", model: MODEL["5"] },
];
export const styleText =
export const PRINT_STYLE =
'<style type="text/css" media="print">\n' +
" @page { size: landscape; }\n" +
"</style>";

7
src/assets/js/useListData.js
View File

@ -9,7 +9,7 @@ import { getDataType } from "@/assets/js/utils.js";
* @param options.immediate {Boolean?} 是否立即执行接口函数（默认是）
* @param options.usePagination {Boolean?} 是否使用分页（默认是）
* @param options.key {String?} 返回的存放数组的key（默认varList）
* @return {Object} 返回对象包含以下属性：list 表格数据，pagination 分页数据，searchForm 搜索表单数据，tableRef 表格实例，responseData 后台所有返回值，fnGetData 获取数据函数，fnResetPagination 重置分页函数
* @return {Object} 返回对象包含以下属性：list 表格数据，pagination 分页数据，searchForm 搜索表单数据，tableRef 表格实例，fnGetData 获取数据函数，fnResetPagination 重置分页函数
*/
export default function useListData(api, options = {}) {
@ -35,7 +35,6 @@ export default function useListData(api, options = {}) {
throw new Error("options.otherParams必须是一个对象");
if (options.callbackFn && getDataType(options.callbackFn) !== "Function")
throw new Error("options.callbackFn必须是一个函数");
const responseData = ref({});
const list = ref([]);
const pagination = ref({
currentPage: 1,
@ -57,8 +56,7 @@ export default function useListData(api, options = {}) {
...(getDataType(otherParams) === "Object" ? otherParams : {}),
});
list.value = resData[key];
pagination.value.total = resData.page.totalResult;
responseData.value = resData;
if (usePagination) pagination.value.total = resData.page.totalResult;
options.callbackFn && options.callbackFn(list.value, resData);
};
immediate && fnGetData().then();
@ -78,7 +76,6 @@ export default function useListData(api, options = {}) {
pagination,
searchForm,
tableRef,
responseData,
fnGetData: async (otherParams) => await fnGetData(otherParams),
fnResetPagination: async (otherParams) =>
await fnResetPagination(otherParams),

2
src/components/layout/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-container>
<el-container class="layout-container">
<el-header>
<layout-header />
</el-header>

6
src/request/hazard_investigation.js
View File

@ -2,6 +2,8 @@ import { post } from "@/request/axios.js";
export const getInventoryManagementList = (params) =>
post("/listmanager/list", params); // 清单管理列表
export const getInventoryManagementView = (params) =>
post("/listmanager/goEdit", params); // 清单管理查看
export const setInventoryManagementDisable = (params) =>
post("/listmanager/delete", params); // 清单管理禁用
export const setInventoryManagementEnable = (params) =>
@ -14,3 +16,7 @@ export const getInventoryManagementRouteView = (params) =>
post("/listmanager/getRoute", params); // 清单管理查看巡检路线
export const setInventoryManagementRoute = (params) =>
post("/listmanager/setRout", params); // 清单管理巡检路线提交
export const setInventoryManagementInsuranceCoverageList = (params) =>
post("/labelFactory/termList", params); // 清单管理设置包保责任类型选择列表
export const setInventoryManagementInsuranceCoverageSave = (params) =>
post("/listmanager/saveBaoBaoType", params); // 清单管理设置包保责任类型提交

2
src/request/risk_control.js
View File

@ -13,6 +13,8 @@ export const getRiskPointInspectList = (params) =>
post("/riskunit/getRisByUnitId", params); // 风险点单元检查内容
export const getIdentifyingPartsList = (params) =>
post("/identificationparts/list", params); // 辨识部位列表
export const getIdentifyingPartsListById = (params) =>
post("/identificationparts/listAllByIdens", params); // 辨识部位列表所有根据ID
export const getIdentifyingPartsView = (params) =>
post("/identificationparts/goEdit", params); // 辨识部位查看
export const setIdentifyingPartsDelete = (params) =>

34
src/views/hazard_investigation/inventory_management/batch_printing.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<layout-card>
<div id="printContainer">
<div
v-for="item in list"
:key="item.IDENTIFICATIONPARTS_ID"
class="page_break"
>
<part-qr-code :info="item" />
</div>
</div>
<div class="tc mt-10">
<el-button v-print="'#printContainer'" type="primary">打 印</el-button>
</div>
</layout-card>
</template>
<script setup>
import { useRoute } from "vue-router";
import { getIdentifyingPartsListById } from "@/request/risk_control.js";
import PartQrCode from "./components/part_qr_code.vue";
import useListData from "@/assets/js/useListData.js";
const route = useRoute();
const { IDS } = route.query;
const { list } = useListData(getIdentifyingPartsListById, {
otherParams: {
IDS,
},
usePagination: false,
});
</script>
<style scoped lang="scss"></style>

45
src/views/hazard_investigation/inventory_management/components/inspection_route.vue
View File

@ -25,21 +25,18 @@
{{ info.TYPENAME }}
</el-descriptions-item>
<el-descriptions-item label="设置巡检路线" :span="2">
<div style="display: flex; flex-wrap: wrap">
<vue-draggable v-model="list" style="display: flex">
<div
style="display: flex; align-items: center"
style="display: flex; align-items: center; cursor: move"
v-for="(item, index) in list"
:key="item.IDENTIFICATIONPARTS_ID"
:draggable="true"
@dragenter="fnDragEnter(item.IDENTIFICATIONPARTS_ID)"
@dragstart="fnDragStart(item.IDENTIFICATIONPARTS_ID)"
>
<el-tag>{{ index + 1 }}.{{ item.PARTSNAME }}</el-tag>
<el-icon v-if="index < list.length - 1">
<Right />
</el-icon>
</div>
</div>
</vue-draggable>
</el-descriptions-item>
</el-descriptions>
</div>
@ -54,10 +51,10 @@
<script setup>
import { Right } from "@element-plus/icons-vue";
import { useVModels } from "@vueuse/core";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { debounce } from "throttle-debounce";
import { setInventoryManagementRoute } from "@/request/hazard_investigation.js";
import { VueDraggable } from "vue-draggable-plus";
const props = defineProps({
visible: {
@ -78,40 +75,6 @@ const props = defineProps({
});
const emits = defineEmits(["update:visible", "update:list"]);
const { visible, list } = useVModels(props, emits);
const currentStart = ref("");
const currentEnd = ref("");
const fnDragStart = (id) => {
currentStart.value = id;
};
const fnDragEnter = (id) => {
currentEnd.value = id;
const startIndex = list.value.findIndex((item) => {
return item.IDENTIFICATIONPARTS_ID === currentStart.value;
});
const endIndex = list.value.findIndex((item) => {
return item.IDENTIFICATIONPARTS_ID === currentEnd.value;
});
list.value = fnMoveList(list.value, startIndex, "swap", endIndex);
};
const fnMoveList = (enteArr, index, upDown, swapIndex = index + 1) => {
const arr = JSON.parse(JSON.stringify(enteArr));
if (upDown === "up") {
arr.splice(index - 1, 0, arr[index]);
arr.splice(index + 1, 1);
} else if (upDown === "down") {
arr.splice(index + 2, 0, arr[index]);
arr.splice(index, 1);
} else if (upDown === "start") {
arr.splice(0, 0, arr[index]);
arr.splice(index + 1, 1);
} else if (upDown === "end") {
arr.splice(arr.length, 0, arr[index]);
arr.splice(index, 1);
} else if (upDown === "swap") {
arr[swapIndex] = arr.splice(index, 1, arr[swapIndex])[0];
}
return arr;
};
const fnClose = () => {
visible.value = false;
};

79
src/views/hazard_investigation/inventory_management/components/insurance_coverage_select.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<el-dialog v-model="visible" title="设置包保责任类型">
<el-descriptions :column="2" border>
<el-descriptions-item label="风险点">
{{ info.RISKUNITNAME }}
</el-descriptions-item>
<el-descriptions-item label="辨识部位">
{{ info.PARTSNAME }}
</el-descriptions-item>
<el-descriptions-item label="存在风险">
{{ info.RISK_DESCR }}
</el-descriptions-item>
<el-descriptions-item label="风险分级">
{{ info.DNAME5 }}
</el-descriptions-item>
<el-descriptions-item label="检查内容">
{{ info.CHECK_CONTENT }}
</el-descriptions-item>
</el-descriptions>
<layout-table :data="list" :show-pagination="false">
<el-table-column type="index" label="序号" width="55" />
<el-table-column prop="DESCRIBE" label="描述" />
<el-table-column label="操作" width="100px">
<template v-slot="{ row }">
<el-button type="primary" text link @click="fnCheck(row)">
选择
</el-button>
</template>
</el-table-column>
</layout-table>
<template #footer>
<el-button @click="fnClose">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { useVModel } from "@vueuse/core";
import useListData from "@/assets/js/useListData.js";
import { setInventoryManagementInsuranceCoverageList } from "@/request/hazard_investigation.js";
import { watchEffect } from "vue";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
info: {
type: Object,
required: true,
default: () => ({}),
},
});
const emits = defineEmits(["update:visible", "check"]);
const visible = useVModel(props, "visible", emits);
const { list, fnGetData } = useListData(
setInventoryManagementInsuranceCoverageList,
{
usePagination: false,
immediate: false,
}
);
watchEffect(() => {
if (props.visible)
fnGetData({
WORK_TYPE: props.info.TASK_TYPE_NUM,
});
});
const fnClose = () => {
visible.value = false;
};
const fnCheck = (row) => {
emits("check", row);
fnClose();
};
</script>
<style scoped lang="scss"></style>

0
src/views/hazard_investigation/inventory_management/components/qr_code.vue → src/views/hazard_investigation/inventory_management/components/list_qr_code.vue
View File

28
src/views/hazard_investigation/inventory_management/components/part_qr_code.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div>
<el-divider content-position="left"> 辨识部位检查二维码 </el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="风险点（单元）">
{{ info.RISKUNITNAME }}
</el-descriptions-item>
<el-descriptions-item label="辨识部位">
{{ info.PARTSNAME }}
</el-descriptions-item>
</el-descriptions>
<layout-qr-code :src="info.IDENTIFICATIONPARTS_ID" />
</div>
</template>
<script setup>
import LayoutQrCode from "@/components/qr_code/index.vue";
defineProps({
info: {
type: Object,
required: true,
default: () => ({}),
},
});
</script>
<style scoped lang="scss"></style>

34
src/views/hazard_investigation/inventory_management/components/part_qr_code_dialog.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<el-dialog v-model="visible" title="清单二维码">
<div id="printContainer">
<part-qr-code :info="info" />
<el-divider content-position="left">APP-待排查-清单扫描</el-divider>
</div>
<template #footer>
<el-button @click="visible = false">关闭</el-button>
<el-button v-print="'#printContainer'" type="primary">打 印</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { useVModel } from "@vueuse/core";
import PartQrCode from "./part_qr_code.vue";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
info: {
type: Object,
required: true,
default: () => ({}),
},
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
</script>
<style scoped lang="scss"></style>

49
src/views/hazard_investigation/inventory_management/index.vue
View File

@ -141,7 +141,18 @@
</el-table-column>
<el-table-column label="操作" width="470">
<template v-slot="{ row }">
<el-button v-if="buttonJurisdiction.edit" type="primary" text link>
<el-button
v-if="buttonJurisdiction.edit"
type="primary"
text
link
@click="
router.push({
path: '/hazard_investigation/inventory_management/print',
query: { LISTMANAGER_ID: row.LISTMANAGER_ID },
})
"
>
打印
</el-button>
<el-button
@ -190,7 +201,19 @@
>
启用
</el-button>
<el-button type="primary" text link> 部位二维码 </el-button>
<el-button
type="primary"
text
link
@click="
router.push({
path: '/hazard_investigation/inventory_management/part_qr_code',
query: { LISTMANAGER_ID: row.LISTMANAGER_ID },
})
"
>
部位二维码
</el-button>
<el-button type="primary" text link @click="fnInspectionRoute(row)">
巡检路线
</el-button>
@ -199,6 +222,12 @@
type="primary"
text
link
@click="
router.push({
path: '/hazard_investigation/inventory_management/insurance_coverage',
query: { LISTMANAGER_ID: row.LISTMANAGER_ID },
})
"
>
设置包保责任类型
</el-button>
@ -219,9 +248,9 @@
</template>
</layout-table>
</layout-card>
<qr-code
:info="data.qrCodeDialog.info"
v-model:visible="data.qrCodeDialog.visible"
<list-qr-code
:info="data.listQrCodeDialog.info"
v-model:visible="data.listQrCodeDialog.visible"
/>
<inspection-route
v-model:visible="data.inspectionRouteDialog.visible"
@ -254,9 +283,11 @@ import {
setInventoryManagementDisable,
setInventoryManagementEnable,
} from "@/request/hazard_investigation.js";
import QrCode from "./components/qr_code.vue";
import ListQrCode from "./components/list_qr_code.vue";
import InspectionRoute from "./components/inspection_route.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
useListData(getInventoryManagementList);
const userStore = useUserStore();
@ -267,7 +298,7 @@ const inventoryTypeList = await layoutFnGetInventoryType();
const troubleshootingTypeList = await layoutFnGetTroubleshootingType();
const inventoryLevelList = await layoutFnGetInventoryLevel();
const data = reactive({
qrCodeDialog: {
listQrCodeDialog: {
visible: false,
info: {},
},
@ -288,8 +319,8 @@ const fnResetPaginationTransfer = () => {
});
};
const fnListQRCode = (row) => {
data.qrCodeDialog.visible = true;
data.qrCodeDialog.info = row;
data.listQrCodeDialog.visible = true;
data.listQrCodeDialog.info = row;
};
const fnInspectionRoute = async (row) => {
const resData = await getInventoryManagementRouteView({

113
src/views/hazard_investigation/inventory_management/insurance_coverage.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<layout-card>
<el-divider content-position="left">清单信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="清单名称">
{{ info.NAME }}
</el-descriptions-item>
<el-descriptions-item label="排查清单类型">
{{ info.SCREENTYPENAME }}
</el-descriptions-item>
<el-descriptions-item label="包保责任人部门">
{{ info.DEPARTMENT_NAME }}
</el-descriptions-item>
<el-descriptions-item label="包保责任人岗位">
{{ info.POST_NAME }}
</el-descriptions-item>
<el-descriptions-item label="排查周期">
{{ info.PERIODNAME }}
</el-descriptions-item>
<el-descriptions-item label="清单类型">
{{ info.TYPENAME }}
</el-descriptions-item>
<el-descriptions-item label="包保责任人">
{{ info.USER_NAME }}
</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">检查内容</el-divider>
<layout-table :data="list" :show-pagination="false">
<el-table-column type="index" label="序号" width="55" />
<el-table-column
prop="RISKUNITNAME"
label="风险点（单元）"
width="150px"
/>
<el-table-column prop="PARTSNAME" width="200px" label="辨识部位" />
<el-table-column prop="RISK_DESCR" width="300px" label="存在风险" />
<el-table-column prop="DNAME5" label="风险分级" width="150" />
<el-table-column prop="CHECK_CONTENT" width="300px" label="检查内容" />
<el-table-column prop="BAO_BAO_NUM_NAME" label="包保任务对应项" />
<el-table-column label="操作" width="80">
<template v-slot="{ row, $index }">
<el-button type="primary" text link @click="fnSelect(row, $index)">
选择
</el-button>
</template>
</el-table-column>
</layout-table>
<div class="tc mt-10">
<el-button type="primary" @click="fnSubmit">保存</el-button>
</div>
<insurance-coverage-select
v-model:visible="data.selectDialog.visible"
:info="data.selectDialog.info"
@check="fnCheck"
/>
</layout-card>
</template>
<script setup>
import {
getInventoryManagementView,
setInventoryManagementInsuranceCoverageSave,
} from "@/request/hazard_investigation.js";
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";
import InsuranceCoverageSelect from "./components/insurance_coverage_select.vue";
import useListData from "@/assets/js/useListData.js";
const route = useRoute();
const router = useRouter();
const { LISTMANAGER_ID } = route.query;
const info = ref({});
const data = reactive({
selectDialog: {
visible: false,
info: {},
index: 111,
},
});
const { list } = useListData(getInventoryManagementView, {
otherParams: {
LISTMANAGER_ID,
},
usePagination: false,
callbackFn: (list, responseData) => {
info.value = responseData.pd;
},
});
const fnSelect = (row, index) => {
data.selectDialog.visible = true;
data.selectDialog.info = row;
data.selectDialog.index = index;
};
const fnCheck = (row) => {
list.value[data.selectDialog.index].BAO_BAO_NUM_NAME = row.DESCRIBE;
list.value[data.selectDialog.index].BAO_BAO_NUM = row.TASK_NUM;
};
const fnSubmit = debounce(
1000,
async () => {
await setInventoryManagementInsuranceCoverageSave({
list: JSON.stringify(list.value),
});
ElMessage.success("保存成功");
router.back();
},
{ atBegin: true }
);
</script>
<style scoped lang="scss"></style>

88
src/views/hazard_investigation/inventory_management/part_qr_code.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<layout-card>
<el-divider content-position="left">清单信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="清单名称" :span="2">
{{ info.NAME }}
</el-descriptions-item>
<el-descriptions-item label="所属部门">
{{ info.DEPARTMENT_NAME }}
</el-descriptions-item>
<el-descriptions-item label="所属岗位">
{{ info.POST_NAME }}
</el-descriptions-item>
<el-descriptions-item label="排查周期">
{{ info.PERIODNAME }}
</el-descriptions-item>
<el-descriptions-item label="清单类型">
{{ info.TYPENAME }}
</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">检查内容</el-divider>
<layout-table :data="list" :show-pagination="false">
<el-table-column type="index" label="序号" width="55" />
<el-table-column label="风险点（单元）" prop="RISKUNITNAME" />
<el-table-column label="辨识部位" prop="PARTSNAME" />
<el-table-column label="二维码">
<template v-slot="{ row }">
<el-button type="primary" text link @click="fnPartQrCode(row)">
部位二维码
</el-button>
</template>
</el-table-column>
</layout-table>
<div class="tc mt-10" v-if="list.length > 0">
<el-button
type="primary"
@click="
router.push({
path: '/hazard_investigation/inventory_management/part_qr_code/batch_printing',
query: {
IDS: list.map((item) => item.IDENTIFICATIONPARTS_ID).join(','),
},
})
"
>
批量打印
</el-button>
</div>
<part-qr-code-dialog
v-model:visible="data.partQrCodeDialog.visible"
:info="data.partQrCodeDialog.info"
/>
</layout-card>
</template>
<script setup>
import { getInventoryManagementView } from "@/request/hazard_investigation.js";
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
import PartQrCodeDialog from "./components/part_qr_code_dialog.vue";
import useListData from "@/assets/js/useListData.js";
const route = useRoute();
const router = useRouter();
const { LISTMANAGER_ID } = route.query;
const info = ref({});
const data = reactive({
partQrCodeDialog: {
visible: false,
info: {},
},
});
const { list } = useListData(getInventoryManagementView, {
otherParams: {
LISTMANAGER_ID,
},
usePagination: false,
callbackFn: (list, responseData) => {
info.value = responseData.pd;
},
});
const fnPartQrCode = (row) => {
data.partQrCodeDialog.visible = true;
data.partQrCodeDialog.info = row;
};
</script>
<style scoped lang="scss"></style>

116
src/views/hazard_investigation/inventory_management/print.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<layout-card>
<div id="printContainer">
<el-divider content-position="left">清单信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label="清单名称">
{{ info.NAME }}
</el-descriptions-item>
<el-descriptions-item label="排查清单类型">
{{ info.SCREENTYPENAME }}
</el-descriptions-item>
<el-descriptions-item
:label="info.BAO_BAO_TYPE !== '1' ? '所属部门' : '包保责任人部门'"
>
{{ info.DEPARTMENT_NAME }}
</el-descriptions-item>
<el-descriptions-item
:label="info.BAO_BAO_TYPE !== '1' ? '所属岗位' : '包保责任人岗位'"
>
{{ info.POST_NAME }}
</el-descriptions-item>
<el-descriptions-item label="排查周期">
{{ info.PERIODNAME }}
</el-descriptions-item>
<el-descriptions-item label="清单类型">
{{ info.TYPENAME }}
</el-descriptions-item>
<el-descriptions-item
label="排查日期"
:span="2"
v-if="info.TYPE === 'listType0006'"
>
{{ info.START_DATE }} - {{ info.END_DATE }}
</el-descriptions-item>
<template v-if="info.BAO_BAO_TYPE === '1'">
<el-descriptions-item label="是否包保责任人任务">
是
</el-descriptions-item>
<el-descriptions-item label="包保责任人">
{{ info.USER_NAME }}
</el-descriptions-item>
</template>
</el-descriptions>
<el-divider content-position="left">检查内容</el-divider>
<div class="print_no_use">
<layout-table :data="list" :show-pagination="false">
<el-table-column type="index" label="序号" width="55" />
<el-table-column label="排查类型" prop="RISKUNITNAME" />
<el-table-column label="排查项目" prop="PARTSNAME" />
<el-table-column
label="风险管控措施(排查标准)"
prop="CHECK_CONTENT"
/>
<el-table-column label="失职部门/人员">
<template #default="{ row }">
{{ row.DEPARTMENT_NAME }}/{{ row.USERNAME }}
</template>
</el-table-column>
<el-table-column label="风险失控表现" />
<el-table-column label="备注" />
</layout-table>
</div>
<table class="print_use">
<thead>
<tr>
<th width="55">序号</th>
<th width="85">排查类型</th>
<th width="85">排查项目</th>
<th>风险管控措施(排查标准)</th>
<th width="120">失职部门/人员</th>
<th width="115">风险失控表现</th>
<th width="55">备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.RISKUNITNAME }}</td>
<td>{{ item.PARTSNAME }}</td>
<td>{{ item.CHECK_CONTENT }}</td>
<td>{{ item.DEPARTMENT_NAME }}/{{ item.USERNAME }}</td>
<td />
<td />
</tr>
</tbody>
</table>
</div>
<div class="tc mt-10">
<el-button v-print="'#printContainer'" type="primary">打 印</el-button>
</div>
<div v-html="PRINT_STYLE" />
</layout-card>
</template>
<script setup>
import { getInventoryManagementView } from "@/request/hazard_investigation.js";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { PRINT_STYLE } from "@/assets/js/constant.js";
import useListData from "@/assets/js/useListData.js";
const route = useRoute();
const { LISTMANAGER_ID } = route.query;
const info = ref({});
const { list } = useListData(getInventoryManagementView, {
otherParams: {
LISTMANAGER_ID,
},
usePagination: false,
callbackFn: (list, responseData) => {
info.value = responseData.pd;
},
});
</script>
<style scoped lang="scss"></style>