Data Flow ->> Import Column & Export Column

本文介绍如何使用SSIS在文件系统与数据库间导出及导入特定类型数据的方法,包括配置ImportColumn组件以确保正确映射输入输出字段,并讨论ExportColumn组件的不同属性设置。

这两个transformation的作用是把DT_TEXT, DT_NTEXT, DT_IMAGE类型的数据在文件系统和数据库间导出或者导入。比如把某个数据库表的image类型的字段导出到文件系统成为img文件。做法是在导入导出的时候必须提供完全文件名和路径。需要注意的地方是需要在Import Column组件的Input and Output Properties页面加一个output字段来导入比如img文件,然后columnn的id必须在input column和output column间做好映射。不然会保这样的错误:

Validation error. Data Flow Task: Import Column [1]: The “input column
“ImageFilePath” (164)” references output column ID 0, and that column is not
found on the output.

具体如下:

 

 

对于export column组件在设置属性时有三个选择:

Allow Append:只能和Force Truncate二选一。追加TEXT内容到文件尾部。文件不存在会自动创建。无需提前创建。

Force Truncate:只能和Allow Append二选一。每次都清空文件内容再写入TEXT内容。文件不存在会自动创建。无需提前创建。

 Write Byte-Order Mark:暂时没有发现加了这个跟不加有什么区别。对文本内容没有什么影响。

 

转载于:https://www.cnblogs.com/jenrrychen/p/4472765.html

<template> <Layout :have-tab-bar="false" icon=""> <span slot="title" class="topBarTitle">我的项目</span> <view class="container"> <view class="containerBody"> <view class="search"> <view class="text">数据</view> </view> <view class="history_item"> <view style="padding:10px"> <view style="color: #82D4FF;margin-bottom: 38rpx;display: flex;justify-content: space-between"> 项目基本信息 <view style="width: 25px;height: 25px;"> <uni-icons @click="editData" type="compose" size="20" color="#fff"></uni-icons> </view> </view> <view style="display: flex"> <view> <view class="info"> <view class="label">项目名称</view> <view>{{name}}</view> </view> <view class="info"> <view class="label">项目地址</view> <view>{{projAddr}}</view> </view> </view> </view> <view style="color: #82D4FF;margin-bottom: 38rpx">项目基本情况</view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view style="width: 118px"> 盾构机直径m </view> <view class="project-item-input"> <input disabled :value="diameter" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item"> <view class="project-item-num" style="white-space: nowrap"> 掘进速度cm/min </view> <view class="project-item-input"> <input disabled :value="speed" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item"> <view class="project-item-num"> 送泥比重g/cm³ </view> <view class="project-item-input"> <input disabled :value="propor" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view class="project-item-num"> 每小时送泥流量 <view class="unit">g/cm³</view> </view> <view class="project-item-input"> <input disabled :value="timesend" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item" style="margin-top: 42rpx"> <view class="project-item-num"> 管片宽度m </view> <view class="project-item-input"> <input disabled :value="width" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item" style="margin-top: 42rpx"> <view class="project-item-num"> 日掘进环数 </view> <view class="project-item-input"> <input disabled :value="dayTunnelleCylindernumber" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view class="project-item-num"> 每小时排泥流量 <view>cm/min</view> </view> <view class="project-item-input"> <input disabled :value="hourSpoildisposal" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view class="situation" style="height: 400px;"> <view class="every"> <view>各地层基本情况</view> <!-- <view @click="addStratum">--> <!-- <uni-icons type="plusempty" size="16" color="#fff"></uni-icons>--> <!-- </view>--> </view> <view class="item" v-for="(item, index) in stratumList" :key="index"> <view style="color: #fff;margin-left: 10px;display: flex;">地层编号: <input disabled :value="item.num" style="background-color: #303E63;margin-left: 10px;border-radius: 5px" /> <!-- <view style="width: 25px;height:25px;margin-left:10px;background-color: #303E63;color: #B6BAFF;border-radius: 6px;text-align: center">{{ index + 1}}</view>--> </view> <view style="color: #fff;margin-left: 10px;margin-top:10px;display: flex;">地层名称: <input disabled :value="item.name" style="background-color: #303E63;margin-left: 10px;border-radius: 5px" /> <!-- <view style="width: 25px;height:25px;margin-left:10px;background-color: #303E63;color: #B6BAFF;border-radius: 6px;text-align: center">{{ index + 1}}</view>--> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view>地层特性</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :value="item.features1" :localdata="characterOne" :disabled="disabled" style="width: 100%;"></uni-data-select> </uni-section> </view> <view v-if="value === 0" style="margin-left: 10px"> <uni-section> <uni-data-select :value="item.features2" :localdata="characterTwo" :disabled="disabled" style="width: 100%;"></uni-data-select> </uni-section> </view> </view> </view> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view> 地层比重g/cm³ </view> <view class="stratum-input"> <input disabled :value="item.proportion" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view>地层含水%</view> <view class="stratum-input"> <input disabled :value="item.water" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="situation_item"> <view style="padding: 7px"> <view>颗分区间</view> <view class="interval"> <view style="display: flex"> <view class="interval-item"> <view class="interval-item-num"> >10 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size1" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 10-2 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size2" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 2-0.5 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size3" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 0.5-0.25 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size4" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="interval"> <view style="display: flex"> <view class="interval-item"> <view class="interval-item-num"> 0.25-0.075 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size5" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num" style="white-space: nowrap"> 0.075-0.005 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size6" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 小于0.005 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size7" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> </view> </view> </view> <view class="clay"> <view style="color: #82D4FF;margin-left: 18rpx;padding-top: 18rpx">泥水设备百分比设定</view> <view style="color:#fff;margin-left: 28rpx;margin-top: 18rpx">黏土</view> <view class="clay_item"> <view class="stratum"> <view class="title">滚动筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="rollRange" :disabled="disabled" :value="gdsObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <!-- <view class="number" style="width: 80px">--> <!-- <uni-easyinput--> <!-- type="number"--> <!-- placeholder="0"--> <!-- :styles="{--> <!-- backgroundColor: 'rgba(187, 200, 242, 0.1)',--> <!-- borderRadius: '4px'--> <!-- }"--> <!-- >--> <!-- <template #right>--> <!-- <view style="display:flex;flex-direction: column">--> <!-- <uni-icons type="top" size="14" color="#ff0000" style="height: 15px"></uni-icons>--> <!-- <uni-icons type="down" size="14" color="#ff0000" style="height: 15px"></uni-icons>--> <!-- </view>--> <!-- </template>--> <!-- </uni-easyinput>--> <!-- </view>--> <view style="margin-left: 10px"> <uni-number-box disabled :step="0.001" :value="gdsObject.value" @change="changeValue" /> </view> <view class="checkbox" style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum"> <view class="title">振动筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="vibrationRange" :disabled="disabled" :value="zdsObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="zdsObject.value" @change="changeValue" /> </view> <view class="checkbox" style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum" style="white-space: nowrap"> <view class="title">一级旋流器</view> <view class="stratum-select-one"> <view> <uni-section> <uni-data-select :localdata="oneRange" :disabled="disabled" :value="xlq1Object.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="xlq1Object.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum" style="white-space: nowrap"> <view class="title">二级旋流器</view> <view class="stratum-select-two"> <view> <uni-section> <uni-data-select :localdata="twoRange" :disabled="disabled" :value="xlq2Object.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="xlq2Object.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum"> <view class="title">脱水筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="dehydrationRange" :disabled="disabled" :value="tssObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="tssObject.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item" style="height: 198rpx;"> <view class="sieve"> <view class="title">滚动筛</view> <view class="sieve-select"> <view>滚动筛喷淋水容量:</view> <view> <uni-number-box disabled :step="0.001" :value="gdsDzsplsrl" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 198rpx;"> <view class="sieve"> <view class="title">脱水筛</view> <view class="sieve-select"> <view>筛上物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="ttsSswmd" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 258rpx;"> <view class="sieve"> <view class="title">预筛</view> <view class="sieve-select" style="margin-bottom: 18rpx"> <view>筛上物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="ysSswmd" @change="changeValue" /> </view> </view> <view class="sieve-select"> <view>振动筛喷淋水容量:</view> <view> <uni-number-box disabled :step="0.001" :value="ysZdsplsrl" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 258rpx;"> <view class="sieve"> <view class="title">旋流器</view> <view class="sieve-select" style="margin-bottom: 18rpx"> <view>一级底流物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="xlq1Dlwmd" @change="changeValue" /> </view> </view> <view class="sieve-select"> <view>二级底流物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="xlq2Dlwm" @change="changeValue" /> </view> </view> </view> </view> </view> </view> </view> <view style="color: #fff;margin:38rpx 0 38rpx 18rpx;">输出</view> <view class="history_item"> <view style="padding:18rpx"> <view class="mudRes"> <view style="color: #82D4FF;margin-left: 18rpx;padding-top: 18rpx">计算处理百分比</view> <view class="mudRes_item" v-for="(item,index) in 5" :key="index"> <view class="title">黏土</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 滚动筛% </view> <view class="content-item-input"> <input disabled :value="rollingScreen" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 振动筛% </view> <view class="content-item-input"> <input disabled :value="vibratingScreen" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 一级旋流器% </view> <view class="content-item-input"> <input disabled :value="xlq1" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 二级旋流器% </view> <view class="content-item-input"> <input disabled :value="xlq2" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="mudRes_item" v-for="(item,index) in 2" :key="index"> <view class="title">滚动筛筛下物</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 流量m³/R </view> <view class="content-item-input"> <input disabled :value="flow" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 比重g/m³ </view> <view class="content-item-input"> <input disabled :value="weight" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 固相T/R </view> <view class="content-item-input"> <input disabled :value="solid" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 液相m³/R </view> <view class="content-item-input"> <input disabled :value="liquid" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="title" style="color: #82D4FF">泥浆池数据</view> <view class="mudRes_item"> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 调整池m³ </view> <view class="content-item-input"> <input disabled :value="adjustmentPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 废浆池m³ </view> <view class="content-item-input"> <input disabled :value="wasteMudPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 清水池m³ </view> <view class="content-item-input"> <input disabled :value="cleanWaterPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view style="display: flex"> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 新浆池m³ </view> <view class="content-item-input"> <input disabled :value="newMudPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 工业水池m³ </view> <view class="content-item-input"> <input disabled :value="industrialWaterPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 集土坑m³ </view> <view class="content-item-input"> <input disabled :value="soilCollectionPit" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view class="title" style="color: #82D4FF">干化配置数据</view> <view class="mudRes_item"> <view v-for="(item,index) in 5" :key="index"> <view class="title">黏土</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 弃土量m³/R </view> <view class="content-item-input"> <input disabled :value="qituliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 弃浆量m³/R </view> <view class="content-item-input"> <input disabled :value="qijiangliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 需水量m³/R </view> <view class="content-item-input"> <input disabled :value="xushuiliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view style="display: flex"> <view class="content_item"> <view class="content-item-title" style="width: 210rpx"> 干化配置推荐 </view> <view class="content-item-input"> <input disabled :value="ganhuaConfiguration" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 210rpx"> 弃浆配置推荐 </view> <view class="content-item-input"> <input disabled :value="qijiangConfiguration" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> </view> </view> </view> </view> </view> </view> </Layout> </template> <script setup> import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import Layout from '@/layout/index.vue' import { error } from 'uview-plus'; import { myDetailLogin } from '../../apis/myDetail'; const detail = async () => { error.value = ''; loading.value = true; } const rollRange = [{ value: 0, text: "10mm" }, { value: 1, text: "7mm" }, { value: 2, text: "5mm" }, ] const vibrationRange = [{ value: 0, text: "6mm" }, { value: 1, text: "3mm" }, { value: 2, text: "1.5mm" }, ] const oneRange = [{ value: 0, text: "500" }, { value: 1, text: "375" }, { value: 2, text: "350" }, { value: 3, text: "250" }, ] const twoRange = [{ value: 0, text: "150" }, { value: 1, text: "125" }, { value: 2, text: "100" }, ] const dehydrationRange = [{ value: 0, text: "0.6mm" }, { value: 1, text: "0.35mm" }, ] const characterOne = [{ value: 0, text: "黏土" }, { value: 1, text: "粉土" }, { value: 2, text: "砂" }, { value: 3, text: "圆砾" }, { value: 4, text: "卵石" }, { value: 5, text: "岩层" }, { value: 6, text: "淤泥" }, ] const characterTwo = [{ value: 0, text: "流塑" }, { value: 1, text: "软塑" }, { value: 2, text: "可塑" }, { value: 3, text: "硬塑" }, ] const hobby = [{ text: '已选中项', value: 0 }] const stratumList = ref([{ particleSize: { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '70', size7: '30' } }]); const switchTab = (tab) => { activeTab.value = tab } const open = () => { uni.navigateTo({ url: '/pages/index/index' }) } //添加地层 const addStratum = () => { //添加一个新的地层对象到数组 stratumList.value.push({}); // 滚动到底部 nextTick(() => { const container = uni.createSelectorQuery().select('.situation'); container.boundingClientRect(data => { uni.pageScrollTo({ scrollTop: data.height, duration: 300 }); }).exec(); }); } //编辑数据 const editData = () => { //跳转到计算页 uni.navigateTo({ url: '/pages/calculate/index' }); } watch(value, (newVal) => { if (newVal === 0) { // 黏土 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '70', // 0.075-0.005 size7: '30' // <0.005 }; } } if (newVal === 1) { // 粉土 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '45', size6: '45', size7: '10' }; } } if (newVal === 2) { // 砂 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '5', size4: '25', size5: '25', size6: '40', size7: '5' }; } } if (newVal === 3) { // 圆砾 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '40', size2: '15', size3: '10', size4: '10', size5: '5', size6: '15', size7: '5' }; } } if (newVal === 4 || newVal === 5) { //卵石 岩层 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '0', size7: '0' }; } } }); onMounted(() => { }) // 组件卸载时执行 onUnmounted(() => { }) </script> 这一段代码的目的是,在用户点击某个项目的时候,通过变量id,进入到此界面,此界面为数据详情,会通过匹配id,把其他所有的数据,渲染到其对应的位置上,id是一个变量 import { request } from '@/utils' export function myDetailLogin(id){ return request({ url: `/api/projbase/getById/${id}` , method:'GET' }) }这里是接口代码
06-23
父组件<template> <div> <el-row :gutter="10" type="flex" justify="space-around"> <el-col :xs="24" :sm="12" :md="8" :lg="8"> <el-badge :value="attachmentCount" class="item"> <el-button type="primary" plain icon="el-icon-s-order" size="mini" @click="openSysAttachmentDialog"> 附件 </el-button> </el-badge> <!-- 传readonly优先使用readonly,如果没传,有流程实例id的时候不可编辑 --> <CcedButton :billType="billType" :businessId="businessId" :readonly="util.isEmpty(readonly) ? (!util.isEmpty(flowInsId)) : (readonly=='1')"> </CcedButton> </el-col> <el-col :xs="24" :sm="12" :md="8" :lg="8" class="formTitle">{{ title }}</el-col> <el-col :xs="24" :sm="12" :md="8" :lg="8" style="text-align: right;padding-right: 20px;"> <el-button type="primary" v-if="isshow && !util.isEmpty(taskId)" plain icon="el-icon-check" size="mini" @click="showSiginDialog()">在线签字 </el-button> <el-button type="primary" v-if="util.isEmpty(readonly) ? (util.isEmpty(taskId) && util.isEmpty(flowInsId)) : !(readonly=='1') " plain icon="el-icon-check" size="mini" @click="submitForm('0')">保存 </el-button> <el-button type="primary" v-if="!util.isEmpty(taskId)" plain icon="el-icon-check" size="mini" @click="commitTask()">同意 </el-button> <el-button type="warning" v-if="!util.isEmpty(taskId)" plain icon="el-icon-close" size="mini" @click="reject()">驳回 </el-button> <el-button type="primary" v-if="!util.isEmpty(flowInsId)" plain icon="el-icon-check" size="mini" @click="showFlowInfoDialog()">流程信息 </el-button> <el-button v-if="formStatus=='0' ||formStatus=='3'&&readonlyFlag" plain icon="el-icon-edit" type="primary" size="mini" @click="handleUpdate"> 编辑 </el-button> <el-button v-if="(formStatus=='0' ||formStatus=='3')&&readonlyFlag" plain icon="el-icon-check" size="mini" type="primary" @click="doSubmitFlow"> 提交审批 </el-button> </el-col> </el-row> <!-- 流程信息 --> <FlowInfo :businessId="businessId+''" :billType="billType" v-if="showFlowInfo" :showStatus="showFlowInfo" @closeFlowInfoDialog="closeFlowInfoDialog"></FlowInfo> <!-- 办理任务弹窗 --> <ConfirmCommitTask :taskId="taskId" :infoadd="infoadd" :insId="flowInsId" @closeCommitDialog="closeCommitDialog" :commitType="commitType" :showStatus="showCommitDialog"></ConfirmCommitTask> <!-- 单据附件弹窗 --> <FormAttachment :businessId="businessId" :billType="billType" v-if="showSysAttachmentDialog" :showStatus="showSysAttachmentDialog" :readonly="util.isEmpty(readonly) ? (!(util.isEmpty(taskId) && util.isEmpty(flowInsId))) : (readonly=='1')" @closeSysAttachmentDialog="closeSysAttachmentDialog"></FormAttachment> <!-- 在线签名弹窗 --> <SignaturePad ref="SignaturePad" :showSign="showSignInfo" :billType="billType" :insId="flowInsId" :taskId="taskId" @closeSignDialog="closeSignDialog" @addInfoSubmit="addInfoSubmit"></SignaturePad> </div> </template> <script> import FlowInfo from "@/views/workflow/flow/flowInfo"; import SignaturePad from "@/views/workflow/flow/signaturePad"; import FormAttachment from "@/views/common/sysAttachment/formAttachment" import ConfirmCommitTask from "@/views/workflow/ConfirmCommitTask"; import CcedButton from "@/views/workflow/common/ccedButton"; import {countSysAttachement} from "@/api/common/sysAttachment" import {listByUser, getUserProfile} from '@/api/system/user' export default { name: "formTopBar", components: {FlowInfo, FormAttachment, ConfirmCommitTask, CcedButton, SignaturePad}, props: { title: "", taskId: "", flowInsId: "", formStatus: '', billType: "", businessId: "", readonly: "", readonlyFlag:false }, data() { return { commitType: "", showCommitDialog: false, showSysAttachmentDialog: false, showFlowInfo: false, openBusAttachmentDialog: false, attachmentCount: 0, isshow: true, showSignInfo: false, userInfo: {}, infoadd: {}, } }, created() { console.log("顶部按钮条参数:", "标题:" + this.title + "。", "taskId:" + this.taskId + "。", "flowInsId:" + this.flowInsId + "。", "billType:" + this.billType + "。", "businessId:" + this.businessId + "。", "readonly:" + this.readonly + "。"); console.log("判读readonly:", this.util.isEmpty(this.readonly) ? (!this.util.isEmpty(this.flowInsId)) : (this.readonly == '1')) console.log("判断readonly:", !this.util.isEmpty(this.flowInsId)); console.log("判断编辑是否展示", this.util.isEmpty(this.formStatus)) console.log("头部信息",this.util.isEmpty(this.readonly)) this.getUserProfile() // if(this.billType=="leave_apply" || this.billType=="leave_apply_zczz"|| this.billType=="leave_apply_zsscdw"|| this.billType=="leave_apply_fszs" // || this.billType=="leave_apply_bmzfz"|| this.billType=="reception"|| this.billType=="reception_settlement" || this.billType=="dispatch_car"){ // this.isshow=true; // }else { // this.isshow=false; // } }, updated() { this.getSysAttachementCount(); }, watch: { billType: function (newVal, oldVal) { if (newVal != oldVal) { console.log("顶部按钮条:" + this.billType + "," + this.taskId + "," + this.flowInsId + "," + this.businessId); this.getSysAttachementCount(); // this.$forceUpdate(); } } }, methods: { addInfoSubmit(info) { this.infoadd = info }, // 用户个人信息 getUserProfile() { getUserProfile().then(res => { this.userInfo = res.data }) }, closeSignDialog() { this.showSignInfo = false; }, showSiginDialog() { this.showSignInfo = true; listByUser(this.userInfo.userId).then(res => { this.$refs.SignaturePad.setData(res.data) }) }, // 计算附件数量 getSysAttachementCount() { let queryParams = { billType: this.billType, businessId: this.businessId } console.log("查询附件数量=" + JSON.stringify(queryParams)); countSysAttachement(queryParams).then(res => { if (200 == res.code) { this.attachmentCount = res.data; } }) }, //根据实例获取流程图片--打开流程信息 showFlowInfoDialog() { this.showFlowInfo = true; }, //关闭流程信息窗口 closeFlowInfoDialog() { this.showFlowInfo = false; }, //提交审批 commitTask() { this.commitType = "agree"; this.showCommitDialog = true; }, doSubmitFlow() { this.$emit("doSubmitFlow"); }, handleUpdate() { this.$emit("handleUpdate"); }, //驳回申请 reject() { this.commitType = "reject"; this.showCommitDialog = true; }, //关闭完成任务弹窗 closeCommitDialog() { this.showCommitDialog = false; }, //打开附件窗口 openSysAttachmentDialog() { if (!this.businessId) { this.$modal.msgError("请先【保存】单据!再进行附件上传!"); return; } this.showSysAttachmentDialog = true; }, //关闭附件窗口 closeSysAttachmentDialog() { this.showSysAttachmentDialog = false; }, //保存 submitForm() { this.$emit("submitForm"); } } } </script> 子组件<template> <el-dialog :visible.sync="showStatus" title="附件" width="1000px" append-to-body :before-close="beforeClose" class="commitTask" @update-attachment-count="$emit('update-attachment-count', $event)"> <el-row :gutter="10" class="mb8" v-if="!readonly"> <el-col :span="1.5"> <el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" class="upload-file-uploader" ref="upload" :data="form" > <!-- 上传按钮 --> <el-button size="mini" type="primary">上传文件</el-button> </el-upload> <div> 请上传[bmp, gif, jpg, jpeg, png, doc, docx, xls, xlsx, ppt, pptx, html, htm, txt, rar, zip, gz, bz2, mp4, avi, rmvb, pdf]格式的文件 </div> </el-col> </el-row> <el-table :border="Global.tableShowBorder" v-loading="loading" :data="sysAttachmentList"> <el-table-column label="文件" align="center" prop="url" width="100"> <template slot-scope="scope"> <el-image style="width: 50px; height: 50px" :src="getFileImage(scope.row.url)" fit="fill"></el-image> </template> </el-table-column> <el-table-column label="文件名" align="center" prop="url" :show-overflow-tooltip="true"> <template slot-scope="scope"> {{getFileName(scope.row.url)}} </template> </el-table-column> <el-table-column label="文件大小" align="center" prop="size" width="100"> <template slot-scope="scope"> {{(scope.row.size / 1024 / 1024).toFixed(2)}}MB </template> </el-table-column> <el-table-column label="扩展名" align="center" prop="ext" width="80"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-download" @click="downloadFile(scope.row)">下载</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-if="!readonly">删除</el-button> </template> </el-table-column> </el-table> </el-dialog> </template> <script> import { listSysAttachment, getSysAttachment, delSysAttachment,formAttachmentlist } from "@/api/common/sysAttachment"; import {getToken} from "@/utils/auth"; export default { name: "SysAttachment", props: { businessId:"", billType:"", showStatus:false, readonly:false }, data() { return { // 遮罩层 loading: true, // 附件中心表格数据 sysAttachmentList: [], number: 0, uploadList: [], baseUrl: process.env.VUE_APP_BASE_API, uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/sysAttachment/upload", // 通用上传文件 headers: { Authorization: "Bearer " + getToken(), }, fileSize: 100, queryParams:{ orderByColumn:"createTime", isAsc:"descending", businessId: this.businessId, billType: this.billType }, form:{ businessId: this.businessId, billType: this.billType } }; }, created() { this.getList(); console.log("附件列表:"+this.billType); }, methods: { /** 查询附件中心列表 */ getList() { this.loading = true; formAttachmentlist(this.queryParams).then(response => { this.sysAttachmentList = response.data; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除附件?').then(function() { return delSysAttachment(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => {}); }, beforeClose(){ this.$emit('closeSysAttachmentDialog'); }, downloadFile(row){ window.open(this.baseUrl + row.url); }, // 获取文件缩略图 getFileImage(name){ let ext = this.getFileExt(name); console.log("文件扩展名为:"+ext); if(ext){ let lowExt = ext.toLowerCase(); if(lowExt=="doc"||lowExt=="docx"){ return require('@/assets/images/am/filext/DOC.png'); }else if(lowExt=="pdf"){ return require('@/assets/images/am/filext/PDF.png'); }else if(lowExt=="ppt"){ return require('@/assets/images/am/filext/PPT.png'); }else if(lowExt=="psd"){ return require('@/assets/images/am/filext/PSD.png'); }else if(lowExt=="txt"){ return require('@/assets/images/am/filext/TXT.png'); }else if(lowExt=="vsd"){ return require('@/assets/images/am/filext/VSD.png'); }else if(lowExt=="xmap"){ return require('@/assets/images/am/filext/XMAP.png'); }else if(lowExt=="ys"){ return require('@/assets/images/am/filext/YS.png'); }else if(lowExt=="ai"){ return require('@/assets/images/am/filext/AI.png'); }else if(lowExt=="mp3"||lowExt=="mp4"||lowExt=="wmv"||lowExt=="rmvb"||lowExt=="mkv"||lowExt=="avi"){ return require('@/assets/images/am/filext/VIDEO.png'); }else if(lowExt=="xls"||lowExt=="xlsx"){ return require('@/assets/images/am/filext/ELX.png'); }else if(lowExt=="rar"||lowExt=="zip"){ return require('@/assets/images/am/filext/RAR.png'); }else{ return require('@/assets/images/am/filext/FILE.png'); } } }, // 上传前校检格式和大小 handleBeforeUpload(file) { // 校检文件大小 if (this.fileSize) { const isLt = file.size / 1024 / 1024 < this.fileSize; if (!isLt) { this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`); return false; } } this.$modal.loading("正在上传文件,请稍候..."); this.number++; return true; }, // 上传失败 handleUploadError(err) { this.$modal.msgError("上传图片失败,请重试"); this.$modal.closeLoading() }, // 上传成功回调 handleUploadSuccess(res) { if (res.code == 200) { this.$message.success("上传成功"); } else if (res.code == 500) { this.$message.error(res.msg); } this.getList(); this.$modal.closeLoading(); }, // 获取文件名称 getFileName(name) { if (name.lastIndexOf("/") > -1) { return name.slice(name.lastIndexOf("/") + 1); } else { return ""; } }, // 获取扩展名 getFileExt(name){ let n = this.getFileName(name); let ar = n.split("."); return ar[ar.length-1]; }, // 对象转成指定字符串分隔 listToString(list, separator) { let strs = ""; separator = separator || ","; for (let i in list) { strs += list[i].url + separator; } return strs != '' ? strs.substr(0, strs.length - 1) : ''; } } }; </script> 上传附件后红色角标数量不变具体怎么修改
07-11
<template> <!-- 编辑流量计 --> <div class="edit-flow-meter"> <myModal :params="{ title: '编辑流量计' }" :visible="visible" @submit="submit" @cancel="handleCancel"> <template v-slot:header> <span></span> </template> <template v-slot:body> <div class="edit-flow-meter-box"> <a-form-model ref="baseInfoForm" :model="formData" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <h4 style="margin: 16px 0; text-align: left">{{ $t('基础信息') }}</h4> <a-row> <a-col :span="12"> <a-form-model-item :label="$t('探测器名称')" prop="detectorName"> <a-input v-model="formData.detectorName" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('探测器编号')" prop="uniqueCode"> <a-input v-model="formData.uniqueCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('流量计编号')" prop="meterCode"> <a-input v-model="formData.meterCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('接入时间')" prop="rate"> <a-input v-model.trim="formData.rate" :placeholder="$t('请输入')" :allowClear="false" /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('归属')" prop="rate"> <a-input v-model="formData.uniqueCode" disabled /> </a-form-model-item> </a-col> </a-row> <div class="table-title-box"> <h4 style="margin: 0">{{ $t('子流量计列表') }}</h4> <div style="display: flex"> <a-button class="mgr10" type="primary" @click="onAdd">{{ $t('新增') }}</a-button> <a-popconfirm :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" :visible="popconfirmVisible" @visibleChange="popconfirmVisibleChange" @confirm="onDeleteAll" > <a-button>{{ $t('删除') }}</a-button> </a-popconfirm> </div> <a-table :dataSource="tableData" :rowSelection="rowSelection" rowKey="id" :columns="columns" :pagination="false" size="small" > <template slot="meterCode" slot-scope="text, record, index"> <template v-if="text">{{ text }}</template> <template v-else> <a-select v-model="tableData[index].meterCode" :filterOption="filterOption" @change="changeMemterCode" :placeholder="$t('请选择')" showSearch :allowClear="false" > <a-select-option v-for="item in meterOptions" :key="item.id" :value="item.meterCode" :title="item.meterCode" :disabled="item.disabled" > {{ item.meterCode }} </a-select-option> </a-select> </template> </template> <template slot="action" slot-scope="text, record"> <a-popconfirm placement="topRight" :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="onDelete(record)" > <i class="ico-delete myIcon" :title="$t('删除')"></i> </a-popconfirm> </template> </a-table> </div> </a-form-model> </div> </template> </myModal> </div> </template> <script> import factory from '../factory'; import myModal from '@/components/scfComponents/modalComponents/modal.vue'; export default { components: { myModal }, data() { return { visible: false, formData: {}, rules: { taskName: [ { required: true, message: '请输入任务名称', trigger: 'blur' }, // { pattern: reg.name, message: this.$t('仅允许输入汉字、字母、数字与_-.@字符') }, ], }, columns: [ { title: this.$t('序号'), key: 'index', dataIndex: 'index', customRender: (text, record, index) => `${index + 1}`, }, { title: this.$t('子电表编号'), dataIndex: 'meterCode', key: 'meterCode', scopedSlots: { customRender: 'meterCode' }, }, { title: this.$t('操作'), key: 'action', width: 150, dataIndex: 'action', scopedSlots: { customRender: 'action' }, }, ], popconfirmVisible: false, meterOptions: [], selectedRowKeys: [], selectedRows: [], tableData: [], }; }, computed: { rowSelection() { return { onChange: this.rowSelectionChange, }; }, }, methods: { // 获取子电表列表 getChildMeterList(detectorCode) { let params = { detectorCodes: [detectorCode], page: 1, pageSize: 99999, }; factory.getChildMeterList(params).then(res => { if (res.success) { this.meterOptions = res.data.pageData.map(item => ({ ...item, disabled: false })) || []; } }); }, showModal() { this.getChildMeterList(record.detectorCode); this.visible = true; }, filterOption(input, option) { return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0; }, changeMemterCode(value) { let checkOption = this.meterOptions.find(el => el.meterCode === value); this.tableData.forEach(item => { if (item.meterCode === checkOption.meterCode) { item.detectorCode = checkOption.detectorCode; } }); let selectedItems = this.tableData.map(item => item.meterCode).filter(el => el !== null && el !== ''); this.meterOptions.forEach(el => { if (selectedItems.includes(el.meterCode)) { el.disabled = true; } }); }, // 全选/单选 rowSelectionChange(selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys; this.selectedRows = selectedRows; }, // 批量删除提示框 popconfirmVisibleChange(visible) { if (visible && !this.selectedRowKeys.length) { this.popconfirmVisible = false; this.$message.destroy(); this.$message.warning(this.$t('请选择要删除的信息')); } else { this.popconfirmVisible = visible; } }, // 新增 onAdd() { let isNull = this.tableData.filter(e => e.meterCode === null || e.meterCode === ''); if (isNull.length) return this.$message.warning(this.$t('请选择子电表编号')); this.tableData.push({ id: Math.random().toString().split('.')[1], meterCode: null }); }, onDeleteAll() { if (this.selectedRows.length === 0) { return this.$message.warning(this.$t('请选择子电表')); } let codes = this.selectedRows.map(item => item.id); this.tableData = this.tableData.filter(el => !codes.includes(el.id)); let selectedItems = this.selectedRows.map(item => item.meterCode).filter(el => el !== null && el !== ''); this.meterOptions.forEach(el => { if (selectedItems.includes(el.meterCode)) { el.disabled = false; } }); }, // 单个删除 onDelete(record) { this.tableData = this.tableData.filter(item => item.id !== record.id); if (record.meterCode) { this.meterOptions.forEach(el => { if (record.meterCode.indexOf(el.meterCode) !== -1) { el.disabled = false; } }); } }, submit() { this.visible = false; }, handleCancel() { this.visible = false; }, }, }; </script> <style lang="less" scoped> .edit-flow-meter-box { width: 100%; height: 100%; .table-title-box { width: 100%; display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; } }代码评审 </style>
07-08
list页面: <template> <div class="tabel-search marb-20"> <div class="left" style="display: flex; align-items: center; justify-content: space-between;"> <div class="search-group" style="display: flex; gap: 10px; flex-wrap: wrap;"> <el-select v-model="datas.reportType" placeholder="请选择..." @change="initData" style="min-width: 120px;"> <el-option label="所有类型" :value="-1"></el-option> <el-option label="精选-A" :value="1"></el-option> <el-option label="精选-C" :value="7"></el-option> <el-option label="精选-D" :value="10"></el-option> <el-option label="优选-A" :value="2"></el-option> <el-option label="优选-B" :value="3"></el-option> <el-option label="优选-C" :value="5"></el-option> <el-option label="优选-D" :value="4"></el-option> <el-option label="优选-E" :value="6"></el-option> <el-option label="优选-F" :value="8"></el-option> <el-option label="优选-G" :value="9"></el-option> <el-option label="优选-H" :value="11"></el-option> <el-option label="优选-I" :value="12"></el-option> </el-select> </div> <div style="margin-left:1rem"> <el-select v-model="datas.reportStatus" placeholder="请选择..." @change="initData" style="min-width: 120px;"> <el-option label="所有状态" :value="-1"></el-option> <el-option label="待确认" :value="100"></el-option> <el-option label="待付款" :value="110"></el-option> <el-option label="生成中" :value="120"></el-option> <el-option label="已生效" :value="130"></el-option> <el-option label="已退单" :value="190"></el-option> <el-option label="查询失败" :value="199"></el-option> </el-select> </div> </div> <div class="right" style="display: flex; justify-content: space-between;"> <div style="display: flex; gap: 10px; flex-wrap: wrap;"> <el-input v-model="datas.keyword" placeholder="请输入关健字" @clear="initData" @keyup.enter.native="initData" clearable> <template #append> <el-button :icon="ElIconSearch" @click="initData" /> </template> </el-input> </div> <div style="margin-left:1rem"> <!-- <el-button type="primary" :icon="Download" @click="exportExcel">导出Excel</el-button> --> </div> </div> </div> <div class="order-list"> <el-skeleton :loading="datas.loading" animated> <template #template> </template> <div v-if="datas.listData.length===0" class="nodata"> <span class="text">暂无记录</span> </div> <el-table ref="tableRef" v-loading="datas.loading" :data="datas.listData" stripe class="table-list"> <el-table-column prop="reportNo" label="订单号" min-width="120"></el-table-column> <el-table-column prop="id" label="Id" min-width="120"></el-table-column> <el-table-column label="报告类型" width="120"> <template #default="scope"> <el-tag v-if="scope.row.reportType===1">精选-A</el-tag> <el-tag v-else-if="scope.row.reportType===7">精选-C</el-tag> <el-tag v-else-if="scope.row.reportType===10">精选-D</el-tag> <el-tag v-else-if="scope.row.reportType===2">优选-A</el-tag> <el-tag v-else-if="scope.row.reportType===3">优选-B</el-tag> <el-tag v-else-if="scope.row.reportType===5">优选-C</el-tag> <el-tag v-else-if="scope.row.reportType===4">优选-D</el-tag> <el-tag v-else-if="scope.row.reportType===6">优选-E</el-tag> <el-tag v-else-if="scope.row.reportType===8">优选-F</el-tag> <el-tag v-else-if="scope.row.reportType===9">优选-G</el-tag> <el-tag v-else-if="scope.row.reportType===11">优选-H</el-tag> <el-tag v-else-if="scope.row.reportType===12">优选-I</el-tag> <el-tag v-else type="warning">未知</el-tag> </template> </el-table-column> <el-table-column prop="vin" label="车架号" width="200"></el-table-column> <el-table-column prop="addTime" label="下单时间" width="200"></el-table-column> <el-table-column label="状态" width="120"> <template #default="scope"> <el-tag v-if="scope.row.reportStatus===130" type="success">已生效</el-tag> <el-tag v-else-if="scope.row.reportStatus===100" type="info">待确认</el-tag> <el-tag v-else-if="scope.row.reportStatus===190" type="info">已退单</el-tag> <el-tag v-else-if="scope.row.reportStatus===199" type="info">查询失败</el-tag> <el-tag v-else-if="scope.row.reportStatus===110" type="warning">待付款</el-tag> <el-tag v-else-if="scope.row.reportStatus===120" type="warning">生成中</el-tag> <el-tag v-else type="warning">未知</el-tag> </template> </el-table-column> <el-table-column type="primary" label="查看详情"> <template #default="scope"> <div class="btns"> <el-button type="primary" @click="viewDetail(scope.row.id)"> 查看详情 </el-button> </div> </template> </el-table-column> </el-table> </el-skeleton> </div> <div class="pager-box"> <el-pagination background :page-size="datas.pageSize" :current-page="datas.pageIndex" :total="datas.totalCount" layout="prev,pager,next" @current-change="handleCurrentChange" /> </div> </template> <script setup> //获取当前站点信息 const siteConfig = await useSite('site') //页面SEO设置 useSeoMeta({ title: `订单管理 - ${siteConfig.seoKeyword}`, ogTitle: siteConfig.seoKeyword, description: siteConfig.seoDescription, ogDescription: siteConfig.seoDescription, }) //获取路由信息 const route = useRoute() //定义属性 const datas = reactive({ loading: false, keyword: '', totalCount: 0, pageSize: 10, pageIndex: 1, listData: [], reportType: -1, reportStatus: -1, dateRange: [], }) //初始化数据 const initData = async () => { let sendUrl = `/account/vinReport?pageSize=${datas.pageSize}&pageIndex=${datas.pageIndex}` if (datas.reportType >= 0) { sendUrl += `&reportType=${datas.reportType}` } if (datas.reportStatus >= 0) { sendUrl += `&reportStatus=${datas.reportStatus}` } if (datas.keyword.length > 0) { sendUrl += `&keyword=${encodeURI(datas.keyword)}` } if (datas.dateRange.length > 0) { sendUrl += `&startTime=${datas.dateRange[0]}` sendUrl += `&endTime=${datas.dateRange[1]}` } //获取分页列表 useHttp({ url: sendUrl, beforeSend() { datas.loading = true }, success(res) { datas.listData = res.data datas.totalCount = res.pagination.totalCount datas.pageIndex = res.pagination.pageIndex datas.pageSize = res.pagination.pageSize }, error(err) { datas.listData = [] }, complete() { datas.loading = false } }) } //跳转到第几页 const handleCurrentChange = (val) => { if (datas.pageIndex != val) { datas.pageIndex = val initData() } } // //数据导出功能 ------------ // const exportExcel = async () => { // let sendUrl = `/vehicleReport/reports/ExportExcel?reportType=${datas.reportType}` + // `&reportStatus=${datas.reportStatus}` // if (datas.dateRange.length > 0) { // sendUrl += `&startTime=${datas.dateRange[0]}` // sendUrl += `&endTime=${datas.dateRange[1]}` // } // if (datas.keyword.length > 0) { // sendUrl += `&keyword=${encodeURI(datas.keyword)}` // } // //获取分页列表 // await proxy.$api.request({ // url: sendUrl, // responseType: 'blob', // beforeSend() { // datas.loading = true // }, // success(res) { // let exportData = res.data; // // console.log('导出数据', res); // // 获取当前日期时间 // const now = new Date(); // // 获得年月日时分秒 // const datetimeStr = // now.getFullYear() + // (now.getMonth() + 1).toString().padStart(2, '0') + // now.getDate().toString().padStart(2, '0') + // now.getHours().toString().padStart(2, '0') + // now.getMinutes().toString().padStart(2, '0') + // now.getSeconds().toString().padStart(2, '0'); // // 从响应头获取文件名 // let filename = "车辆报告_" + datetimeStr +".xlsx"; // // 创建下载链接 // const url = window.URL.createObjectURL(new Blob([exportData])); // const link = document.createElement('a'); // link.href = url; // link.setAttribute('download', filename); // document.body.appendChild(link); // link.click(); // // 清理 // document.body.removeChild(link); // window.URL.revokeObjectURL(url); // }, // error(err) { // proxy.$message.error('导出失败,请重试!') // }, // complete() { // datas.loading = false // } // }) // } // //数据导出功能 ------------ //页面完成后执行 onMounted(() => { if (route.params.type) { datas.reportType = parseInt(route.params.type) } initData() }) </script> show页面: <template> <el-skeleton :loading="datas.loading" style="height:100%;" animated> <template #template> <div class="radius-box marb-30 pad-20"> <el-skeleton-item variant="h3" style="margin-top:1rem;width:60%;" /> <el-skeleton-item variant="h3" style="margin:1rem 0;width:100%;" /> <el-skeleton-item variant="p" style="margin-bottom:1rem;width:80%;" /> </div> <div class="radius-box marb-30 pad-20"> <el-skeleton-item variant="h3" style="margin-top:1rem;width:60%;" /> <el-skeleton-item variant="p" style="margin-bottom:1rem;width:80%;" /> </div> <div class="radius-box marb-30 pad-20"> <el-skeleton-item variant="h3" style="margin-top:1rem;width:60%;" /> <el-skeleton-item variant="p" style="margin-bottom:1rem;width:80%;" /> </div> </template> <div class="radius-box pad-30"> <div class="ntitle small">报告进度</div> <div class="row-box small"> <div class="item-box"> <div class="title">处理状态</div> <div class="content"> <span v-if="datas.model.handleStatus===1">待买家寄回</span> <span v-else-if="datas.model.handleStatus===2">待商家发货</span> <span v-else-if="datas.model.handleStatus===3">已完成</span> <span v-else-if="datas.model.handleStatus===4">拒绝</span> <span v-else>处理中</span> </div> </div> <div class="item-box" v-if="datas.model.handleStatus===1"> <div class="title">买家发货</div> <div class="content"> <el-button type="warning" @click="datas.deliveryDialog = true">已寄出,填写物流信息</el-button> </div> </div> <div class="item-box" v-if="datas.model.ReportNo"> <div class="title">报告编号</div> <div class="content">{{datas.model.ReportNo}}</div> </div> <div class="item-box" v-if="datas.model.handleRemark"> <div class="title">处理说明</div> <div class="content">{{datas.model.handleRemark}}</div> </div> <div class="item-box" v-if="datas.model.refundType===1&&datas.model.handleStatus===3"> <div class="title">退款金额</div> <div class="content">{{datas.model.refundAmount}} 元</div> </div> </div> </div> <div class="order-list radius-box mart-20"> <div class="list-box"> <div class="item-box" v-for="(item,index) in datas.model.refundGoods" :key="index"> <div class="img-box marr-20"> <div class="image"> <img :src="common.loadFile(item.orderGoods.imgUrl)" /> </div> </div> <div class="txt-box"> <div class="title"> {{item.orderGoods.goodsTitle}} </div> <div class="text"> <el-tag v-for="text in item.orderGoods.skuText.split(',')">{{text}}</el-tag> <span class="num">×{{item.orderGoods.quantity}}</span> </div> <div class="price">¥<b>{{item.orderGoods.realPrice}}</b></div> </div> </div> </div> </div> <div class="radius-box pad-30 mart-20"> <div class="ntitle small">售后信息</div> <div class="row-box small"> <div class="item-box"> <div class="title">订单编号</div> <div class="content">{{datas.model.orderNo}}</div> </div> <div class="item-box"> <div class="title">售后类型</div> <div class="content"> <span v-if="datas.model.refundType===1">申请退款</span> <span v-else>申请换货</span> </div> </div> <div class="item-box"> <div class="title">申请时间</div> <div class="content">{{datas.model.applyTime}}</div> </div> <div class="item-box"> <div class="title">申请理由</div> <div class="content">{{datas.model.applyReason}}</div> </div> <div class="item-box" v-if="datas.model.refundAlbums.length>0"> <div class="title">申请凭证</div> <div class="content"> <div class="refund-albums"> <div v-for="(item,index) in datas.model.refundAlbums" :key="index" class="img-box"> <el-image fit="cover" :src="common.loadFile(item.thumbPath)" :preview-src-list="[common.loadFile(item.originalPath)]"></el-image> </div> </div> </div> </div> </div> </div> <div v-for="(item,index) in datas.model.refundDeliverys" :key="index" class="radius-box pad-30 mart-20"> <div class="ntitle small" v-if="item.expressType===1">商家发货</div> <div class="ntitle small" v-if="item.expressType===2">买家发货</div> <div class="row-box small"> <div class="item-box"> <div class="title">快递公司</div> <div class="content">{{searchExpress(item.expressId)}}</div> </div> <div class="item-box"> <div class="title">快递单号</div> <div class="content">{{item.expressCode}}</div> </div> <div class="item-box"> <div class="title">发货时间</div> <div class="content">{{item.addTime}}</div> </div> </div> </div> </el-skeleton> </template> <script setup> //获取当前站点信息 const siteConfig = await useSite('site') //页面SEO设置 useSeoMeta({ title: `报告详情 - ${siteConfig.seoKeyword}`, ogTitle: siteConfig.seoKeyword, description: siteConfig.seoDescription, ogDescription: siteConfig.seoDescription, }) //获取路由信息 const route = useRoute() const deliveryFormRef = ref(null) //声明变量 const datas = reactive({ loading: true, btnLoading: false, deliveryDialog: false, //报告信息 vinReportModel: { }, }) //初始化数据 const initData = async () => { const vinReportId = route.params.id console.log(获取id,route.params.id) if (!vinReportId) { ElMessage.warning('报告参数有误,请检查重试') common.back(-1) return false } //加载快递列表 await useHttp({ url: `/account/vinReport/${vinReportId}`, success(res) { datas.vinReportModel = res.data }, error(err) { console.log(err) } }) } //页面完成后执行 onMounted(() => { initData() }) </script> <style lang="scss"> .refund-albums { display: flex; justify-content: flex-start; flex-flow: row wrap; margin: -1.25rem 0 0 -1.25rem; .img-box { margin: 1.25rem 0 0 1.25rem; width: 7rem; height: 7rem; border-radius: 3px; box-shadow: 0px 6px 35px rgba(0, 0, 0, 0.02); >img, .el-image { width: 100%; height: 100%; border-radius: 3px; } } } </style> 从list页面,点击查看详情,show页面可以获取到传递的id,并通过id查询详情,现状:id传递为空,无法获取
最新发布
08-11
<template> <div> <header class="ant-layout-header header_sd-header_common"> <div class="left_sd-header_common"> <div class="logo_sd-webflow_webflow"> <h3>激励考核指下发</h3> </div> </div> <div class="right_sd-header_common"> <a-button v-if="!readonly" type="link" icon="save" class="button_sd-webflow-button_webflow" @click="save" > 保存 </a-button> <a-button v-if="!readonly" type="link" icon="save" class="button_sd-webflow-button_webflow" @click="xfClick" > 下发 </a-button> <a-button type="link" icon="close-circle" class="button_sd-webflow-button_webflow" @click="btnClose" > 退出 </a-button> </div> </header> <div class="budget-record"> <div class="budget-record-table"> <h2 class="budget-record-table-title">激励考核指下发</h2> <a-form-model ref="ruleForm" :rules="rules" :model="project" class="sitd-apply" layout="horizontal" > <table> <colgroup> <col width="170px" /> <col /> <col width="170px" /> <col /> </colgroup> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="指标编号">指标编号</label> </td> <td class="ant-form-item-control-wrapper" :colspan="3"> <a-form-model-item prop="zbbh"> <template>{{ project['zbbh'] }}</template> </a-form-model-item> </td> </tr> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="指标年度" class="ant-form-item-required">指标年度</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="zbnd"> <!-- 修改为下拉选择框 --> <a-select v-if="!readonly" v-model="project['zbnd']" placeholder="请选择年份" style="width: 100%" > <!-- 生成年份选项 --> <a-select-option v-for="year in yearOptions" :key="year" :value="year"> {{ year }} </a-select-option> </a-select> <template v-else> {{ project['zbnd'] }} </template> </a-form-model-item> </td> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="考核周期">考核周期</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="khzq"> <a-input v-if="!readonly" v-model="project['khzq']" placeholder="考核周期" /> <template v-else>{{ project['khzq'] }}</template> </a-form-model-item> </td> </tr> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="考核对象">考核对象</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="khdx"> <a-select v-if="!readonly" v-model="selectedKhdxIds" mode="multiple" style="width: 100%" placeholder="请选择被考核对象" @change="handleKhdxChange" > <template v-for="(item, _i) in khdxList"> <a-select-option :key="item.code" :value="item.code">{{ item.value }}</a-select-option> </template> </a-select> <template v-else>{{ project['khdx'] }}</template> </a-form-model-item> </td> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="创建日期" class="ant-form-item-required">创建日期</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="cjrq"> <template>{{ project['cjrq'] ? refreshTime(project['cjrq']) : '' }}</template> </a-form-model-item> </td> </tr> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common upload-td"> <label title="说明">说明</label> </td> <td class="ant-form-item-control-wrapper" colspan="3"> <a-form-model-item prop="sm"> <div v-if="!readonly" class="textarea-wrapper"> <a-textarea v-model="project['sm']" placeholder="请输入内容" :max-length="300" class="m-textarea" :auto-size="{ minRows: 3, maxRows: 5 }" /> <span class="m-count">{{ `${project['sm']?.length || 0}/300` }}</span> </div> <template v-else>{{ project['sm'] }}</template> </a-form-model-item> </td> </tr> </table> </a-form-model> <!-- 这里暂时去掉,根据客户描述,一年只进行一次年度考核和激励考核,因此根据年度和单位关联即可 --> <!-- <h3 class="budget-record-table-title">关联年度考核</h3> <a-button v-if="!readonly" type="primary" :style="{ marginLeft: '88px' }" class="button_sd-webflow-button_webflow" @click="openDialogGl" > 关联年度考核 </a-button> <a-button v-if="!readonly" :style="{ marginLeft: '8px' }" class="button_sd-webflow-button_webflow" :disabled="!ndkhSelectedRowKeys.length" @click="ndkhBeforDelete" > 删除 </a-button> <a-modal title="选择年度考核" :visible="dialogVisibleGl" width="80%" @ok="handleDialogConfirm" @cancel="dialogVisibleGl = false" > <div class="apply-search"> <a-form-model :form="searchForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-row :gutter="24"> <a-col :span="8" class="chd"> <a-form-model-item label="考核年度"> <a-input v-model="searchForm['khnd']" allow-clear placeholder="请输入指标年度" /> </a-form-model-item> </a-col> <a-col :span="8" class="chd"> <a-form-model-item label="考核周期"> <a-input v-model="searchForm['khzq']" allow-clear placeholder="请输入考核周期" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="24" class="chd" :style="{ textAlign: 'right', lineHeight: '45px' }"> <a-button :style="{ marginRight: '8px' }" @click="reset"> 重置 </a-button> <a-button type="primary" html-type="submit" @click="btnSearchBusinessList"> 查询 </a-button> </a-col> </a-row> </a-form-model> </div> <a-divider style="margin: 12px 0" /> <SdTable ref="ndkh" row-key="id" :columns="ndkhColumns" :data-source.sync="dialogResult" :pagination="paginationOpt" :loading="dialogLoading" :scroll="{ x: 1500 }" :row-selection="{ selectedRowKeys: selectedRowKeysAdd, onChange: btnSelectProjectAdd, }" > </SdTable> </a-modal> <SdTable ref="ndkhTable" row-key="id" :columns="ndkhColumns" :data-source.sync="ndkhResult" :loading="ndkhLoading" :pagination="false" class="ant-table" :row-selection="{ selectedRowKeys: ndkhSelectedRowKeys, onChange: btnSelectProjectNdkh, }" > </SdTable> --> <h3 class="budget-record-table-title" style="margin-top: 18px">激励考核指标</h3> <a-button v-if="!readonly" type="primary" :style="{ marginLeft: '88px' }" class="button_sd-webflow-button_webflow" @click="openDialog" > 新增 </a-button> <a-button v-if="!readonly" :style="{ marginLeft: '8px' }" class="button_sd-webflow-button_webflow" :disabled="!selectedRowKeys.length" @click="btnBeforDelete" > 删除 </a-button> <SdTable ref="jlkhzbxf" row-key="id" :columns="jlkhzbxfColumns" :data-source.sync="jlkhzbxfResult" :loading="loading" :pagination="false" class="ant-table" bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: btnSelectProject, }" > <!-- 指标内容列自定义渲染 --> <template slot="指标内容" slot-scope="text, record, index"> <div style="white-space: pre-line; text-align: left; padding: 8px 0"> {{ text }} </div> </template> <template slot="分值" slot-scope="text, record, index"> <div style="white-space: pre-line; text-align: left; padding: 8px 0"> {{ text }} </div> </template> <!-- 操作列 --> <template v-if="!readonly" slot="操作" slot-scope="text, record"> <a-button class="action-button" type="link" size="small" @click="btnOpenProjectDetails(record)" > 编辑 </a-button> </template> </SdTable> <a-modal title="激励考核指标" :visible="dialogVisible" width="35%" @ok="handleConfirm" @cancel="handleCancel" > <div class="apply-search"> <a-form-model ref="subFormRef" :rules="jlkhzbxfSubRules" :form="jlkhzbxfSubForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <a-row> <a-col :span="18"> <a-form-model-item label="指标类别"> <a-input v-model="jlkhzbxfSubForm['zblb']" allow-clear placeholder="请输入指标类别" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="18"> <a-form-model-item label="指标内容"> <a-textarea v-model="jlkhzbxfSubForm['zbnr']" placeholder="请输入指标内容(按Enter换行)" :max-length="300" class="m-textarea" :auto-size="{ minRows: 3, maxRows: 6 }" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="18"> <a-form-model-item label="分值"> <a-textarea v-model="jlkhzbxfSubForm['fz']" placeholder="请输入分值(按Enter换行)" :max-length="300" class="m-textarea" :auto-size="{ minRows: 2, maxRows: 4 }" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="18"> <a-form-model-item label="分值上限"> <a-input v-model="jlkhzbxfSubForm['fzsx']" allow-clear placeholder='例如:"+1分"、"-1.5分"或"不设上限"' /> </a-form-model-item> </a-col> </a-row> </a-form-model> </div> </a-modal> </div> </div> </div> </template> <script> import { Message, Modal } from 'ant-design-vue' import moment from 'moment' import components from './_import-components/zk-jlkh-zbxf-import' import KhypjService from './khypj-service' import crossWindowWatcher from '@/common/services/cross-window-watcher' import SdTable from '@/common/components/sd-table.vue' export default { name: 'ZkJlkhZbxf', metaInfo: { title: '激励考核指标下发', }, components: { ...components, SdTable, }, props: { id: { type: String, default: undefined, }, }, data() { // 添加校验规则 const validateFzsx = (rule, value, callback) => { if (!value) { callback() return } // 允许"不设上限" if (value === '不设上限') { callback() return } // 验证格式: ±数字(可含小数) + 单位(非数字字符) const regex = /^[+-]\d+(\.\d+)?[^\d]+$/ if (!regex.test(value)) { callback(new Error('格式错误,请填写"不设上限"或类似"+1分"、"-1.5分"的格式')) } else { callback() } } return { loading: false, ndkhLoading: false, dialogLoading: false, readonly: true, yearOptions: this.generateYearOptions(), rules: { zbnd: [{ required: true, message: '请选择指标年度', trigger: 'blur' }], }, jlkhzbxfSubRules: { fzsx: [{ validator: validateFzsx, trigger: 'blur' }], }, // 新增搜索表单数据 searchForm: { khnd: undefined, // 考核年度 khzq: undefined, // 考核周期 }, project: { id: undefined, // 主键id zbbh: undefined, // 指标编号 cjrq: undefined, // 创建日期 zbnd: undefined, // 指标年度 khzq: undefined, // 考核周期 khdx: undefined, // 考核对象 khdxId: undefined, // 考核对象id sm: undefined, // 说明 status: undefined, // 指标状态:0暂存,1下发(不可修改) ndkhId: undefined, // 关联的年度考核id }, jlkhzbxfResult: [], jlkhzbxfSubForm: { id: undefined, // id mainId: undefined, // 主表id zblb: undefined, // 指标类别 zbnr: undefined, // 指标内容 fz: undefined, // 分值 fzsx: undefined, // 分值上限 }, ndkhResult: [], khdxList: [], selectedKhdxIds: [], // 用于多选绑定的临时ID数组 dialogVisible: false, dialogVisibleGl: false, selectedKeys: [], selectedRows: [], selectedRowKeys: [], ndkhSelectedRowKeys: [], // 年度考核表格的选中项 ndkhSelectedRows: [], // 年度考核表格选中的行数据 selectedKeysAdd: [], selectedRowKeysAdd: [], // 年度考核表格的选中项 selectedRowsAdd: [], // 年度考核表格选中的行数据 isUpdateJlkhzbxfSub: false, isXf: false, ndkhColumns: [ { title: '考核编号', dataIndex: 'khbh', scopedSlots: { customRender: '考核编号', }, width: '200px', align: 'center', }, { title: '考核年度', dataIndex: 'khnd', scopedSlots: { customRender: '指标年度', }, width: '70px', align: 'center', }, { title: '考核对象', dataIndex: 'khdx', scopedSlots: { customRender: '责任主体', }, width: '200px', align: 'center', }, { title: '考核周期', dataIndex: 'khzq', scopedSlots: { customRender: '考核周期', }, width: '100px', align: 'center', }, ], dialogResult: [], dialogColumns: [], paginationOpt: { current: 1, // 当前页码 pageSize: 10, // 当前每页大小 total: 0, // 总数 showSizeChanger: true, showQuickJumper: false, pageSizeOptions: ['10', '20', '40', '60', '80', '100'], showTotal: (total) => `共 ${total} 条`, onShowSizeChange: (current, pageSize) => { this.paginationOpt.current = 1 this.paginationOpt.pageSize = pageSize this.btnSearchBusinessList() }, onChange: (current, size) => { this.paginationOpt.current = current this.paginationOpt.pageSize = size this.btnSearchBusinessList() }, }, } }, computed: { // 动态计算列配置 jlkhzbxfColumns() { const baseColumns = [ { title: '序号', customRender: (text, record, index) => { return index + 1 }, align: 'center', width: '10%', }, { title: '指标类别', dataIndex: 'zblb', customRender: (text, record) => { // 只有显示行才渲染内容 if (record.rowSpan > 0) { return { children: text, attrs: { rowSpan: record.rowSpan }, } } return { attrs: { rowSpan: 0 } } }, align: 'center', width: '10%', }, { title: '指标内容', dataIndex: 'zbnr', scopedSlots: { customRender: '指标内容', }, align: 'center', width: '40%', }, { title: '分值', dataIndex: 'fz', scopedSlots: { customRender: '分值', }, align: 'center', width: '20%', }, { title: '分值上限', dataIndex: 'fzsx', scopedSlots: { customRender: '分值上限', }, align: 'center', width: '10%', }, ] // 非只读模式下添加操作列 if (!this.readonly) { baseColumns.push({ title: '操作', dataIndex: 'action', scopedSlots: { customRender: '操作' }, width: '10%', align: 'center', }) } return baseColumns }, }, watch: { jlkhzbxfResult: { handler(newVal) { this.calculateRowSpans(newVal) }, immediate: true, // 初始化时立即执行 deep: true, // 深度监听 }, }, created() { this.getKhdxList() this.jlkhzbxfResult = this.calculateRowSpans(this.jlkhzbxfResult) this.initJlkhzbxfInfo() }, mounted() { if (!this.$route.query.id) { this.project.zbbh = this.getZBbh() this.project.cjrq = moment(new Date()).format('YYYY-MM-DD') this.readonly = false } }, methods: { // 年度考核表格选中处理 btnSelectProjectNdkh(selectedRowKeys, selectedRows) { this.ndkhSelectedRowKeys = selectedRowKeys this.ndkhSelectedRows = [...selectedRows] }, btnSelectProjectAdd(selectedRowKeys, selectedRows) { this.selectedRowKeysAdd = selectedRowKeys this.selectedRowsAdd = [...selectedRows] }, // 重置搜索表单 reset() { this.searchForm = { khnd: undefined, // 考核年度 khzq: undefined, // 考核周期 } this.paginationOpt.current = 1 this.paginationOpt.pageSize = 10 this.btnSearchBusinessList() }, getKhzbxfInfo() { console.log('1111111----------', this.project) console.log('22222222----------', this.project.ndkhId) if (this.project.ndkhId) { KhypjService.getKhzbxfById(this.project.ndkhId).then((res) => { if (res.data.code === 200) { if (res.data.data) { this.ndkhResult.push(res.data.data) } else { this.ndkhResult = [] } } else { Message.error('获取考核指标下发信息失败!') } }) } }, ndkhBeforDelete() { const _this = this if (_this.ndkhSelectedRowKeys.length === 0) { Message.warning('请选择要删除的数据!') return } Modal.confirm({ content: '是否确认删除?', onOk() { _this.project.ndkhId = '-1' _this.saveJlkhzbxf() _this.ndkhResult = [] _this.ndkhSelectedRowKeys = [] // 清空选中状态 }, onCancel() {}, }) }, openDialogGl() { console.log('3333----------', this.ndkhResult) if (this.ndkhResult.length > 0) { Message.warning('只能关联一条年度考核!') return } this.dialogVisibleGl = true this.selectedKeysAdd = [] this.selectedRowsAdd = [] this.btnSearchBusinessList() }, handleDialogConfirm() { if (this.selectedRowsAdd.length === 0) { Message.warning('请选择一条年度考核!') return } if (this.selectedRowsAdd.length > 1) { Message.warning('只能关联一条年度考核!') return } this.project.ndkhId = this.selectedRowsAdd[0].id this.saveJlkhzbxf() this.getKhzbxfInfo() this.dialogVisibleGl = false }, btnSearchBusinessList() { this.dialogLoading = true const khzbxfSearchVo = { khnd: this.searchForm.khnd, khzq: this.searchForm.khzq, } const params = { current: this.paginationOpt.current, // 直接使用当前页码 pageSize: this.paginationOpt.pageSize, // 直接使用当前每页大小 searchVo: khzbxfSearchVo, } KhypjService.getNdkhList(params) .then((res) => { if (res.data.code === 200) { this.paginationOpt.total = res.data.data.total this.dialogResult = res.data.data.records } else { Message.error('查询失败!') } }) .catch((err) => { Message.error(err.message || err.data) this.paginationOpt.total = 0 this.dialogResult = [] }) .finally(() => { this.dialogLoading = false }) }, getKhdxList() { KhypjService.getCodeList('khdx').then((res) => { if (res.data.code === 200) { this.khdxList = res.data.data } else { Message.error('查询失败!') } }) }, // 处理考核对象选择变化 handleKhdxChange(selectedIds) { // 1. 拼接ID字符串 this.project.khdxId = selectedIds.join(';') // 2. 拼接名称字符串 const selectedNames = [] selectedIds.forEach((code) => { const item = this.khdxList.find((d) => d.code === code) if (item) { selectedNames.push(item.value) } }) this.project.khdx = selectedNames.join(';') }, btnBeforDelete() { const _this = this if (this.selectedRowKeys.length === 0) { Message.warning('请选择要删除的数据!') return } Modal.confirm({ content: '是否确认删除?', onOk() { _this.deleteJlkhzbxfSub() _this.selectedRowKeys = [] }, onCancel() {}, }) }, deleteJlkhzbxfSub() { KhypjService.removeJlkhzbxfSubByIds(this.selectedRowKeys).then((res) => { if (res.data.code === 200) { Message.success('删除成功!') this.getJlkhzbxfSubList() } else { Message.error('查询失败!') } }) }, btnSelectProject(selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = [...selectedRows] }, openDialog() { this.dialogVisible = true this.selectedKeys = [] this.selectedRows = [] this.jlkhzbxfSubForm = { id: undefined, // id mainId: this.$route.query.id, // 主表id zblb: undefined, // 指标类别 zbnr: undefined, // 指标内容 fz: undefined, // 分值 fzsx: undefined, // 分值上限 } // 新增子数据自动保存主数据 if (!this.$route.query.id) { this.saveJlkhzbxf() } }, btnOpenProjectDetails(record) { this.dialogVisible = true this.jlkhzbxfSubForm = { id: record.id, // id mainId: record.mainId, // 主表id zblb: record.zblb, // 指标类别 zbnr: record.zbnr, // 指标内容 fz: record.fz, // 分值 fzsx: record.fzsx, // 分值上限 } this.isUpdateJlkhzbxfSub = true console.log('121212------', record) console.log('33333222------', this.jlkhzbSubxfForm) }, handleCancel() { this.dialogVisible = false }, // 弹窗确认 handleConfirm() { // 添加表单校验 this.$refs.subFormRef.validate((valid) => { if (!valid) { return false } // 原有的保存逻辑... if (!this.isUpdateJlkhzbxfSub) { this.jlkhzbxfSubForm.mainId = this.$route.query.id // 保存子表数据 KhypjService.saveJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { if (res.data.code === 200) { Message.success(`添加成功!`) this.getJlkhzbxfSubList() } else { Message.error('添加失败!') } }) } else { // 保存子表数据 KhypjService.updateJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { if (res.data.code === 200) { Message.success(`修改成功!`) this.getJlkhzbxfSubList() } else { Message.error('修改失败!') } }) this.isUpdateJlkhzbxfSub = false } this.dialogVisible = false }) }, // handleConfirm() { // if (!this.isUpdateJlkhzbxfSub) { // this.jlkhzbxfSubForm.mainId = this.$route.query.id // // 保存子表数据 // KhypjService.saveJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { // if (res.data.code === 200) { // Message.success(`添加成功!`) // this.getJlkhzbxfSubList() // } else { // Message.error('添加失败!') // } // }) // } else { // // 保存子表数据 // KhypjService.updateJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { // if (res.data.code === 200) { // Message.success(`修改成功!`) // this.getJlkhzbxfSubList() // } else { // Message.error('修改失败!') // } // }) // this.isUpdateJlkhzbxfSub = false // } // this.dialogVisible = false // }, // 计算行合并 calculateRowSpans(data) { if (!data || data.length === 0) return data const categoryMap = {} // 第一步:统计每个类别的行数 data.forEach((item) => { categoryMap[item.zblb] = (categoryMap[item.zblb] || 0) + 1 }) // 第二步:设置行合并属性 let lastCategory = null return data.map((item) => { // 重置rowSpan属性 item.rowSpan = undefined if (item.zblb !== lastCategory) { lastCategory = item.zblb // 只有每个类别的第一行设置rowSpan item.rowSpan = categoryMap[item.zblb] return item } // 同类别的后续行设置rowSpan为0 item.rowSpan = 0 return item }) }, // 生成年份选项 generateYearOptions() { const currentYear = new Date().getFullYear() const years = [] // 添加年份:当前年后1年、本年、前1年、前2年 years.push(currentYear + 1) // 后1年 years.push(currentYear) // 本年 years.push(currentYear - 1) // 前1年 years.push(currentYear - 2) // 前2年 return years }, btnClose() { window.close() }, initJlkhzbxfInfo() { if (this.$route.query.id) { KhypjService.getJlkhzbxfById(this.$route.query.id).then((res) => { if (res.data.code === 200) { this.project = res.data.data this.project.cjrq = this.project.cjrq ? moment(new Date(this.project.cjrq)).format('YYYY-MM-DD') : null this.readonly = this.project.status === 1 // 初始化选中项 if (this.project.khdxId) { this.selectedKhdxIds = this.project.khdxId.split(';').filter(Boolean) } this.getJlkhzbxfSubList() this.getKhzbxfInfo() } else { Message.error('获取考核指标库信息失败!') } }) } }, save() { const _this = this this.$refs.ruleForm.validate((valid, obj) => { if (!valid) { Message.warning('请输入必填项!') return false } else { _this.saveJlkhzbxf() } }) }, xfClick() { this.readonly = true this.isXf = true this.save() KhypjService.jlkhzbzpXfStart(this.$route.query.id).then((res) => { if (res.data.code === 200) { Message.success('下发成功!') } else { Message.error('下发失败!') } }) }, // 修改 saveJlkhzbxf 方法返回 Promise saveJlkhzbxf() { const _this = this if (this.isXf) { this.project.status = 1 } else { this.project.status = 0 } // 创建数据副本,避免污染原始数据 const postData = { ...this.project } // 仅在值是字符串时才进行转换 if (postData.cjrq && typeof postData.cjrq === 'string') { postData.cjrq = this.strToTimestamp(postData.cjrq) } // 返回一个 Promise return new Promise((resolve, reject) => { // 判断是新增还是更新 const apiCall = !this.$route.query.id ? KhypjService.saveJlkhzbxf(postData) : KhypjService.updateJlkhzbxf(postData) apiCall .then((res) => { if (res.data.code === 200) { // 处理新增保存成功 if (!_this.$route.query.id) { Message.success('保存成功!') if (res.data.data) { const currentUrl = window.location.href const newUrl = currentUrl.replace('zbxf', `zbxf?id=${res.data.data}`) // 直接跳转页面,不需要等待初始化 window.location.href = newUrl } resolve() // 解析 Promise } // 处理更新保存成功 else { if (_this.project.status === 1) { Message.success('提交成功!') } else { Message.success('保存成功!') } resolve() // 解析 Promise } } else { // 处理失败情况 const errorMessage = !_this.project.id ? '保存失败!' : _this.project.status === 1 ? '提交失败!' : '保存失败!' Message.error(errorMessage) reject(new Error(res.data.message || errorMessage)) } }) .catch((error) => { // 处理 API 错误 const errorMessage = !_this.project.id ? '保存失败!' : _this.project.status === 1 ? '提交失败!' : '保存失败!' console.error('API 错误:', error) Message.error(errorMessage) reject(error) }) }) }, getJlkhzbxfSubList() { KhypjService.getJlkhzbxfSubList(this.$route.query.id).then((res) => { if (res.data.code === 200) { this.jlkhzbxfResult = res.data.data } else { Message.error('获取子表信息失败!') } }) }, // 获取唯一指标编号 getZBbh() { // 获取当前时间 const now = new Date() // 获取当前时间的年、月、日、时、分、秒、毫秒 const year = now.getFullYear() const month = String(now.getMonth() + 1).padStart(2, '0') const day = String(now.getDate()).padStart(2, '0') const hour = String(now.getHours()).padStart(2, '0') const minute = String(now.getMinutes()).padStart(2, '0') const second = String(now.getSeconds()).padStart(2, '0') const millisecond = String(now.getMilliseconds()).padStart(3, '0') // 生成唯一标识 const uniqueId = `${year}${month}${day}${hour}${minute}${second}${millisecond}` return 'JLKHZBXF-' + uniqueId }, strToTimestamp(dateStr) { const date = moment(dateStr, 'YYYY-MM-DD') return date.valueOf() }, refreshTime(item) { return moment(item).format('YYYY-MM-DD') }, }, } </script> <style lang="scss" scoped> /* 设置表格宽度 */ .ant-table { width: 90%; margin: auto; /* 居中显示 */ } .sitd-collapse-block { width: 90%; margin: auto; &::v-deep(.ant-collapse-content-box) { padding: unset !important; } } table { width: 90%; margin: auto; border-top: 1px solid #e8e8e8; margin-bottom: 16px; table-layout: fixed; tr td { border-left: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; min-height: 100px; &:first-child { border-left: unset; } &:nth-child(2n + 1) { background: #fafafa; width: 170px; } &.upload-td { background: #fafafa; width: 170px !important; } &.upload-time-td { background: #fafafa; width: 200px !important; } &.ant-form-item-check { width: 194px !important; } .ant-form-item { margin-bottom: unset !important; padding: 5px; .ant-form-item-label { width: 170px; padding-bottom: 1px; text-align: center; background-color: #fafafa; } } &::v-deep(label) { display: block; margin: 0 auto; text-align: right; white-space: normal; line-height: 20px; padding: 0 5px; } .ant-form-item-prompt { display: block; margin: 0 auto; text-align: right; white-space: normal; line-height: 20px; padding: 0 14px 0 5px; font-size: 16px; color: rgba(0, 0, 0, 0.85); } .prompt-red { color: #f5222d !important; } .ant-form-item-radio { &::v-deep(label) { display: inline !important; } } &::v-deep(.ant-checkbox + span) { padding-right: 0 !important; } } ::v-deep(.ant-form-item-control-wrapper) { min-height: 40px; } } .ant-form-long-label { tr td { &:nth-child(2n + 1) { // width: 200px !important; } } } .ant-collapse { border-top: 1px solid #d9d9d9; border-bottom: unset; border-left: unset; border-right: unset; width: 90%; margin: auto; & > .ant-collapse-item { border-bottom: unset; /*& > .ant-collapse-content{*/ /* border-top: 1px solid #d9d9d9;*/ /* border-bottom: 1px solid #d9d9d9;*/ /* border-radius: 4px;*/ /*}*/ &::v-deep(.ant-collapse-content) { border-top: unset; } } } .textarea-wrapper { position: relative; display: block; .m-textarea { padding: 8px 12px; height: 100%; } .m-count { color: #808080; background: #fff; position: absolute; font-size: 12px; bottom: 12px; right: 12px; line-height: 16px; } } .ant-spin-loading { width: 100vw; height: 100vh; display: block; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 99; } .apply-block { display: flex; align-items: center; .dynamic-delete-button { cursor: pointer; position: relative; font-size: 24px; color: #999; transition: all 0.3s; } .dynamic-delete-button:hover { color: #777; } .dynamic-delete-button[disabled] { cursor: not-allowed; opacity: 0.5; } div { flex: 1; } } .btn-group { display: flex; align-items: center; justify-content: right; width: 90%; margin: 0 auto 20px; button { margin-left: 10px; } } .ant-form-budget-border { border-bottom: 1px solid #d9d9d9; margin-left: -1px; } .budget-box { height: 100%; overflow: hidden; display: flex; flex: 1; flex-direction: column; } .budget-record { width: 100%; height: 100%; overflow: auto; display: flex; justify-content: center; background: #fff; } .budget-record-table { width: 90%; //调整页面表格宽度 // min-width: 840px; padding: 16px; } .budget-record-table-title { margin-bottom: 20px; text-align: center; white-space: pre-wrap; } .header_sd-header_common.ant-layout-header { padding: 0 20px 0 20px; color: #fff; background-image: linear-gradient(90deg, #1890ff 0%, #0162eb 100%); height: 64px; line-height: 64px; } .header_sd-header_common { z-index: 1; } .ant-layout-header { background: #001529; } .ant-layout-header, .ant-layout-footer { flex: 0 0 auto; } header { display: block; } .ant-layout, .ant-layout * { box-sizing: border-box; } .left_sd-header_common { float: left; height: 100%; } .right_sd-header_common { float: right; height: 100%; } .logo_sd-webflow_webflow h3 { color: #fff; } .header_sd-header_common .ant-btn-link { color: #fff; } .button_sd-webflow-button_webflow { max-width: 100%; } </style> 检查代码,针对分值上限设置的校验规则并未生效,请检查代码并修改
07-31
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值