|
@@ -1,95 +1,295 @@
|
|
|
<script>
|
|
|
+import {downFileBase64, editVerifyTask, uploadFile} from "@/api/commitment";
|
|
|
+import {v4 as uuidv4} from "uuid";
|
|
|
+
|
|
|
export default {
|
|
|
name: "IndicatorComponents",
|
|
|
- props: {
|
|
|
- index: {
|
|
|
- type: Number,
|
|
|
- default: -1
|
|
|
- },
|
|
|
- },
|
|
|
computed: {
|
|
|
- configInfo: {
|
|
|
- get() {
|
|
|
- return this.$store.state.template.templateJson? this.$store.state.template.templateJson.components[this.index] :{}
|
|
|
- }
|
|
|
+ indicatorList() {
|
|
|
+ return this.$store.state.template.indicatorList.map(item => {
|
|
|
+ if (item.indicatorInputBody) {
|
|
|
+ item.indicatorInputBody = item.indicatorInputBody.replace('&', item.inputBody + item.inputSegment)
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
},
|
|
|
- indicate() {
|
|
|
- if (this.configInfo.config[0]) {
|
|
|
- const options = this.configInfo.config[0].options
|
|
|
- const result = options.find(item => item.value === this.configInfo.config[0].value)
|
|
|
- return result ? result : {}
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ indicatorList: {
|
|
|
+ handler(value) {
|
|
|
+ if (value && value.length > 0 && !this.formStatesInitFlag) {
|
|
|
+ value.forEach((item) => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$set(this.formStates, item.uuid, {
|
|
|
+ fileList: []
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.formStatesInitFlag = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formStatesInitFlag: false,
|
|
|
+ formStates: {},
|
|
|
+ checkResultColumns: [
|
|
|
+ {
|
|
|
+ text: '整改',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '整改扣分',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '符合',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ checkGoalColumns: [
|
|
|
+ {
|
|
|
+ text: '整改 0分',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '整改扣分 -10分',
|
|
|
+ value: -10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '符合',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ checkResultPopupVisible: false,
|
|
|
+ checkScorePopupVisible: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onCheckResultSubmit(indicateItem) {
|
|
|
+ console.log(this.formStates)
|
|
|
+ editVerifyTask([
|
|
|
+ {
|
|
|
+ uuid: indicateItem.uuid,
|
|
|
+ promiseId: indicateItem.promiseId,
|
|
|
+ indicatorId: indicateItem.indicatorId,
|
|
|
+ indicatorInput: indicateItem.indicatorInput,
|
|
|
+ indicatorInputBody: indicateItem.indicatorInputBody,
|
|
|
+ auditor: '张三', // 为了调试写死
|
|
|
+ auditResult: this.checkResultColumns.find(item => item.text === this.formStates[indicateItem.uuid].auditResult).value,
|
|
|
+ auditScore: this.checkGoalColumns.find(item => item.text === this.formStates[indicateItem.uuid].auditScore).value,
|
|
|
+ auditRemark: this.formStates[indicateItem.uuid].auditRemark,
|
|
|
+ //文件上传字段
|
|
|
+ expandStr: this.formStates[indicateItem.uuid].fileList.map(item => item.uuid).join(','),
|
|
|
+ isDelete: 0
|
|
|
+ }
|
|
|
+ ]).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$toast('核查成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
-// 是否显示指标名称
|
|
|
- isShowIndicatorName() {
|
|
|
- if (this.configInfo.config[3]) {
|
|
|
- return this.configInfo.config[3].value !== "0"
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
+ handleCheckResultConfirm(value, uuid) {
|
|
|
+ this.formStates[uuid].auditResult = value.text
|
|
|
+ this.checkResultPopupVisible = false
|
|
|
},
|
|
|
-// 指标是否选中
|
|
|
- isIndicatorChecked:{
|
|
|
- get(){
|
|
|
- return this.configInfo.value
|
|
|
- },
|
|
|
- set(value){
|
|
|
- this.$store.commit('template/setComponentValue', {index: this.index, value})
|
|
|
- }
|
|
|
+ handleCheckGoalConfirm(value, uuid) {
|
|
|
+ this.formStates[uuid].auditScore = value.text
|
|
|
+ this.checkScorePopupVisible = false
|
|
|
},
|
|
|
-// 指标中输入项的值
|
|
|
- indicatorInputValue:{
|
|
|
- get(){
|
|
|
- return this.configInfo.inputValue
|
|
|
- },
|
|
|
- set(value){
|
|
|
- this.$store.commit('template/setComponentInputValue', {index: this.index, value})
|
|
|
+ beforeUpload(file) {
|
|
|
+ const isLt50M = file.size / 1024 / 1024 < 50;
|
|
|
+ if (!isLt50M) {
|
|
|
+ this.$toast('上传的图片大小不能超过 50MB!');
|
|
|
+ return false;
|
|
|
}
|
|
|
+ return true;
|
|
|
},
|
|
|
- indicatorBodyStringList() {
|
|
|
- return this.indicate.indicatorBody ? this.indicate.indicatorBody.split('') : [];
|
|
|
+ afterRead(file, uuid) {
|
|
|
+ const formData = new FormData()
|
|
|
+
|
|
|
+ uploadFile({
|
|
|
+ uuid: uuidv4(),
|
|
|
+ file: formData
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.formStates[uuid].fileList.push({
|
|
|
+ uuid: res.data,
|
|
|
+ url: URL.createObjectURL(file.file)
|
|
|
+ })
|
|
|
+ console.log('上传成功', this.formStates)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onClickCheckbox(event) {
|
|
|
- event.preventDefault()
|
|
|
+ /* 附件下载 */
|
|
|
+ handleFileDown(item) {
|
|
|
+ downFileBase64({
|
|
|
+ uuid: item
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ const a = document.createElement('a')
|
|
|
+ a.href = res.data
|
|
|
+ a.download = '附件'
|
|
|
+ a.click()
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="indicator-style">
|
|
|
- <view v-if="isShowIndicatorName">
|
|
|
- {{ indicate.name }}
|
|
|
- </view>
|
|
|
- <view
|
|
|
- :style="{
|
|
|
- 'min-height': configInfo.height + 'px',
|
|
|
- 'line-height': configInfo.height + 'px',
|
|
|
- }"
|
|
|
- >
|
|
|
- <view class="checkbox-wrapper">
|
|
|
- <van-checkbox v-if="indicate.value" v-model="isIndicatorChecked" class="check-label">
|
|
|
- </van-checkbox >
|
|
|
- <span v-for="(item,index) in indicatorBodyStringList" :key="index">
|
|
|
- <span v-if="item !== '&'">{{ item }}</span>
|
|
|
- <span v-if="item === '&'" class="center-horizontally">
|
|
|
- <input
|
|
|
- class="input-style"
|
|
|
- v-model="indicatorInputValue"
|
|
|
- @click.native="onClickCheckbox"
|
|
|
- />
|
|
|
- <span>
|
|
|
- {{ indicate.inputSegment }}
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- <view :class="{
|
|
|
- overlay: $route.query.isShow
|
|
|
- }"></view>
|
|
|
+ <view>
|
|
|
+ <view v-for="(item,index) in indicatorList" :key="index" class="indicator-style">
|
|
|
+ <view class="indicator-body">
|
|
|
+ {{ item.indicatorInputBody }}
|
|
|
+ </view>
|
|
|
+ <view v-if="!item.approvalStatus && item.approvalStatus !== 0">
|
|
|
+ <view class="title">监管核查
|
|
|
+ <view>涉及整改、整改扣分结果,需要走审批二次确认</view>
|
|
|
+ </view>
|
|
|
+ <van-divider/>
|
|
|
+ <van-form v-if="formStates[item.uuid]" @submit="onCheckResultSubmit(item)">
|
|
|
+ <!--核查结果-->
|
|
|
+ <van-field
|
|
|
+ readonly
|
|
|
+ clickable
|
|
|
+ name="auditResult"
|
|
|
+ :value="formStates[item.uuid].auditResult"
|
|
|
+ label="核查结果"
|
|
|
+ placeholder="请选择核查结果"
|
|
|
+ @click="checkResultPopupVisible = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model="checkResultPopupVisible" position="bottom">
|
|
|
+ <van-picker
|
|
|
+ show-toolbar
|
|
|
+ value-key="text"
|
|
|
+ :columns="checkResultColumns"
|
|
|
+ @confirm="(value)=>handleCheckResultConfirm(value,item.uuid)"
|
|
|
+ @cancel="checkResultPopupVisible = false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <!--核查得分-->
|
|
|
+ <van-field
|
|
|
+ readonly
|
|
|
+ clickable
|
|
|
+ name="auditScore"
|
|
|
+ :value="formStates[item.uuid].auditScore"
|
|
|
+ label="核查得分"
|
|
|
+ placeholder="请选择核查得分"
|
|
|
+ @click="checkScorePopupVisible = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model="checkScorePopupVisible" position="bottom">
|
|
|
+ <van-picker
|
|
|
+ show-toolbar
|
|
|
+ value-key="text"
|
|
|
+ :columns="checkGoalColumns"
|
|
|
+ @confirm="(value)=>handleCheckGoalConfirm(value,item.uuid)"
|
|
|
+ @cancel="checkScorePopupVisible = false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <!--核查说明-->
|
|
|
+ <van-field
|
|
|
+ clickable
|
|
|
+ name="auditRemark"
|
|
|
+ v-model="formStates[item.uuid].auditRemark"
|
|
|
+ label="核查说明"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入核查说明"
|
|
|
+ />
|
|
|
+ <!--附件上传-->
|
|
|
+ <van-field label="文件上传">
|
|
|
+ <template #input>
|
|
|
+ <view class="upload-files">
|
|
|
+ <view
|
|
|
+ v-for="item in formStates[item.uuid].fileList"
|
|
|
+ >
|
|
|
+ <img :src="item.url" style="width: 80px; height: 80px;"/>
|
|
|
+ </view>
|
|
|
+ <van-uploader v-if="formStates[item.uuid].fileList.length < 3"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ accept="image/*,pdf"
|
|
|
+ :after-read="(file)=>afterRead(file,item.uuid)"
|
|
|
+ >
|
|
|
+ </van-uploader>
|
|
|
+ </view>
|
|
|
+ <view class="upload-description">
|
|
|
+ <view>
|
|
|
+ 支持png、jpg、pdf,最大50M
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ 最多3个附件
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+
|
|
|
+ <view style="margin: 16px;">
|
|
|
+ <van-button round block type="info" native-type="submit">核查确认</van-button>
|
|
|
+ </view>
|
|
|
+ </van-form>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <view class="other-title">
|
|
|
+ 监管核查
|
|
|
+ <view style="color: #FF6B00" v-if="item.approvalStatus === 0">
|
|
|
+ 审批状态:待审批
|
|
|
+ </view>
|
|
|
+ <view style="color: #15BE50" v-if="item.approvalStatus === 1">
|
|
|
+ 审批状态:已通过
|
|
|
+ </view>
|
|
|
+ <view style="color: #D40000" v-if="item.approvalStatus === 2">
|
|
|
+ 审批状态:已拒绝
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <van-divider/>
|
|
|
+ <van-form v-if="formStates[item.uuid]">
|
|
|
+ <!--核查结果-->
|
|
|
+ <van-field
|
|
|
+ name="auditResult"
|
|
|
+ label="核查结果"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <view v-if="item.auditResult === 0">符合</view>
|
|
|
+ <view v-if="item.auditResult === 1">整改</view>
|
|
|
+ <view v-if="item.auditResult === 2">整改扣分</view>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!--核查得分-->
|
|
|
+ <van-field
|
|
|
+ name="auditScore"
|
|
|
+ label="核查得分"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <view v-if="item.auditScore === 0">0分</view>
|
|
|
+ <view v-if="item.auditScore === -10">-10分</view>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!--核查说明-->
|
|
|
+ <van-field
|
|
|
+ name="auditRemark"
|
|
|
+ label="核查说明"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <view>{{ item.auditRemark }}</view>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ name="expandStr"
|
|
|
+ label="附件"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <view class="file-style">
|
|
|
+ <view v-for="(item,index) in item.expandStr.split(',')" @click="handleFileDown(item)">
|
|
|
+ 附件{{ index + 1 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-form>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -97,40 +297,67 @@ export default {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.indicator-style {
|
|
|
- width: 100%;
|
|
|
- //border: 1px solid #ebeef5;
|
|
|
+ min-height: 40px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
margin: 10px 0;
|
|
|
+ padding: 5px
|
|
|
}
|
|
|
-.checkbox-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
+
|
|
|
+.indicator-body {
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #666666;
|
|
|
+ text-align: justify;
|
|
|
+ padding: 5px;
|
|
|
+ min-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ view {
|
|
|
+ color: #FF6B00;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
-.check-label {
|
|
|
- margin-right: 5px;
|
|
|
+
|
|
|
+.upload-description {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
-.center-horizontally {
|
|
|
+
|
|
|
+.upload-files {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-.overlay {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: transparent; /* 确保透明,不干扰视觉效果 */
|
|
|
- cursor: not-allowed; /* 可选,提供视觉反馈 */
|
|
|
- z-index: 1; /* 确保遮罩在最上层 */
|
|
|
-}
|
|
|
-:deep(.el-checkbox__label) {
|
|
|
- white-space:normal;
|
|
|
+.other-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ view {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
-.input-style {
|
|
|
- width: 50px;
|
|
|
- padding: 0 5px;
|
|
|
- display: inline-block;
|
|
|
- border-bottom: 1px solid #000;
|
|
|
+
|
|
|
+.file-style {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1492FF;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
</style>
|