<template>
|
<el-dialog
|
:model-value="modelValue"
|
@update:model-value="handleDialogChange"
|
title="巡查单据下载"
|
class="dialog-wrapper"
|
v-loading="loading"
|
>
|
<el-scrollbar
|
ref="scrollbarRef"
|
height="50vh"
|
v-loading="loading"
|
:always="true"
|
>
|
<el-checkbox-group v-model="checkList">
|
<el-space direction="vertical" alignment="flex-start" fill>
|
<el-checkbox
|
v-for="(item, index) in sceneInfoList"
|
:key="item.scense.guid"
|
:value="index"
|
:class="(item.invalid ? 'checkbox-invalid' : '') + ' checkbox'"
|
>
|
<div>
|
<el-text size="large">{{ item.scense.name }}</el-text>
|
</div>
|
<div class="m-t-4">
|
<el-text size="small">{{
|
'地址：' + item.scense.location
|
}}</el-text>
|
</div>
|
<el-space class="m-t-4">
|
<el-tag>
|
{{
|
item.scense.cityname +
|
item.scense.districtname +
|
item.scense.townname
|
}}
|
<!-- {{ item.scense.districtname }}
|
{{ item.scense.townname }} -->
|
</el-tag>
|
<el-tag>{{ item.scense.type }}</el-tag>
|
|
<!-- {{ item.scense.contacts }}
|
{{ item.scense.contactst }} -->
|
</el-space>
|
</el-checkbox>
|
</el-space>
|
</el-checkbox-group>
|
</el-scrollbar>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="danger" @click="cancel">取消</el-button>
|
<el-button type="primary" :loading="docLoading" @click="handelDownload">
|
下载
|
</el-button>
|
<!-- <el-button type="default" :loading="docLoading" @click="handelPrint">
|
打印
|
</el-button> -->
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
<script setup>
|
/**
|
* 场景巡查单据自动下载
|
*/
|
import { ref, watch } from 'vue';
|
import { exportDocx } from '@/utils/doc';
|
import sceneApi from '@/api/fysp/sceneApi';
|
|
const props = defineProps({
|
// 对话框开关
|
modelValue: Boolean,
|
// 场景基础信息数组
|
value: Array
|
});
|
|
const emits = defineEmits(['update:modelValue']);
|
|
const loading = ref(false);
|
const scrollbarRef = ref();
|
const sceneInfoList = ref([]);
|
const checkList = ref([]);
|
const docLoading = ref(false);
|
|
watch(
|
() => [props.modelValue, props.value],
|
(nV, oV) => {
|
if (nV[0] && nV[1] && nV[1] != oV[1]) {
|
fetchSceneInfo(nV[1]);
|
}
|
}
|
);
|
|
function fetchSceneInfo(sceneIdList) {
|
loading.value = true;
|
sceneInfoList.value = [];
|
checkList.value = [];
|
sceneIdList.forEach((sid) => {
|
sceneApi
|
.getSceneDetail(sid)
|
.then((res) => {
|
sceneInfoList.value.push(res.data);
|
checkList.value.push(sceneInfoList.value.length - 1);
|
|
//场景
|
// if (res.data.scense) sceneInfoList.value = res.data.scense;
|
// if (res.data.subScene) {
|
// formSubScene.value = res.data.subScene;
|
// } else {
|
// formSubScene.value = {
|
// sGuid: formScene.value.guid
|
// };
|
// }
|
})
|
.finally(() => {
|
loading.value = false;
|
scrollbarRef.value.setScrollTop(0);
|
});
|
});
|
}
|
|
function handleDialogChange(value) {
|
emits('update:modelValue', value);
|
}
|
|
function setParam(value, length) {
|
const _value = value ? value : '';
|
const offset = length - _value.length;
|
if (offset > 0) {
|
let str = _value;
|
for (let i = 0; i < offset; i++) {
|
str += ' ';
|
}
|
return str;
|
} else {
|
return _value;
|
}
|
}
|
|
// 格式化场景信息，生成参数结构
|
function parseParam() {
|
const selected = sceneInfoList.value.filter((v, i) => {
|
return checkList.value.indexOf(i) != -1;
|
});
|
const param = selected.map((v) => {
|
switch (v.scense.typeid) {
|
// 工地
|
case 1:
|
return {
|
type: v.scense.typeid,
|
params: {
|
district: v.scense.districtname,
|
name: setParam(v.scense.name, 57),
|
employerUnit: setParam(v.scense.csEmployerUnit, 30),
|
constructionUnit: setParam(v.subScene.csConstructionUnit, 36),
|
timeRange: setParam(
|
v.subScene.csStartTime
|
? `${v.subScene.csStartTime}至${v.subScene.csEndTime}`
|
: '',
|
26
|
),
|
stage: setParam(v.subScene.siExtension1, 36),
|
contacts: setParam(v.scense.contacts, 27),
|
contactsTel: setParam(v.scense.contactst, 40),
|
location: setParam(v.scense.location, 27)
|
}
|
};
|
// 餐饮
|
case 5:
|
return {
|
type: v.scense.typeid,
|
params: {
|
district: v.scense.districtname,
|
location: setParam(v.scense.location, 63),
|
name: setParam(v.scense.name, 64),
|
contacts: setParam(v.scense.contacts, 67),
|
contactsTel: setParam(v.scense.contactst, 62)
|
}
|
};
|
// default:
|
// v.invalid = true;
|
// return undefined;
|
}
|
});
|
|
// param.forEach((p) => {
|
// for (const key in p.params) {
|
// let value = p.params[key];
|
// if (value == undefined) {
|
// // 若属性缺失，则改为20个空格符，对应word中10个中文字符的长度
|
// p.params[key] = ' ';
|
// }
|
// }
|
// });
|
|
return param;
|
}
|
|
// 根据场景类型，生成对应的word文档
|
function generateDoc(param) {
|
param.forEach((p) => {
|
let template, _param;
|
switch (p.type) {
|
// 工地
|
case 1:
|
template = '/工地巡查单据模板.docx';
|
_param = p.params;
|
break;
|
// 餐饮
|
case 5:
|
template = '/餐饮巡查单据模板.docx';
|
_param = p.params;
|
break;
|
default:
|
break;
|
}
|
|
exportDocx(template, _param, `${_param.name}巡查单据.docx`).finally(
|
() => (docLoading.value = false)
|
);
|
});
|
}
|
|
// 下载word文档
|
function download(file) {}
|
|
// 打印word文档
|
function print(file) {}
|
|
function filePrepare() {
|
const param = parseParam();
|
if (param) {
|
return generateDoc(param);
|
}
|
}
|
|
// 点击下载按钮操作
|
function handelDownload() {
|
const file = filePrepare();
|
if (file) {
|
download(file);
|
}
|
}
|
|
// 点击打印按钮操作
|
function handelPrint() {
|
const file = filePrepare();
|
if (file) {
|
print(file);
|
}
|
}
|
|
// 取消操作
|
function cancel() {
|
// 关闭对话框
|
handleDialogChange(false);
|
}
|
</script>
|
<style scoped>
|
.checkbox {
|
border: var(--el-border);
|
padding: 8px;
|
}
|
.checkbox-invalid {
|
border-color: var(--el-color-error);
|
}
|
:deep(.el-checkbox) {
|
height: auto;
|
}
|
</style>
|
