jy-safe-app/pages/apply/subPages/SE/12trainSurveyShow.vue

<template>
	<view class="todo-page">
		<view class="card">
			<view class="background"></view>
			<view>
				<u--form labelPosition="left" labelWidth="auto" labelAlign="center" :model="model" class="demo-ruleForm">

					<u-form-item label="调查名称：" prop="NAME" borderBottom>
						<u--input v-model="model.NAME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="发起时间：" prop="LAUNCH_TIME" borderBottom>
						<u--input v-model="model.LAUNCH_TIME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="截止时间：" prop="END_TIME" borderBottom>
						<u--input v-model="model.END_TIME" border="none" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="发起部门：" prop="Nav_LaunchDepartment.NAME" borderBottom>
						<u--input v-if="model.Nav_LaunchDepartment" v-model="model.Nav_LaunchDepartment.NAME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="发起人员：" prop="Nav_LaunchUser.NAME" borderBottom>
						<u--input v-if="model.Nav_LaunchUser" v-model="model.Nav_LaunchUser.NAME" border="none" slot="right" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>

					<!-- <u-form-item label="参与人员">
					</u-form-item>
					<view class="tag-view" v-if="model.Nav_JoinDepartment">
						<uni-tag class="tag" v-for="(i, k) in model.Nav_JoinDepartment.filter(i => !i.IS_DELETED)" :key="k" :inverted="true" :text="i.Nav_Department.NAME" type="primary" />
					</view> -->
					<u-form-item label="调查目的">
						<!-- <u-icon name="arrow-down" size="12" slot="right"></u-icon> -->
					</u-form-item>
					<view class="tag-view" v-if="model.Nav_Points">
						<uni-tag class="tag" v-for="(i, k) in model.Nav_Points.filter(i => !i.IS_DELETED)" :key="k" :inverted="true" :text="i.Nav_Point.NAME" type="primary" />
					</view>
					<u-form-item label="调查份数：" prop="END_TIME" borderBottom>
						<u--input v-model="total" border="none" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="反馈份数：" prop="END_TIME" borderBottom>
						<u--input v-model="reportCount" border="none" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<u-form-item label="反馈比例：" prop="END_TIME" borderBottom>
						<u--input v-model="rate" border="none" inputAlign="right" disabled disabledColor="#ffffff" fontSize="14px"></u--input>
					</u-form-item>
					<view class="table-container" v-if="ROWS && ROWS.length > 0">
						<table>
							<tr>
								<th>序号</th>
								<th>培训需求</th>
								<th>需求部门</th>
								<th>需求人数</th>
							</tr>
							<!-- 动态渲染表格行 -->
							<tr v-for="(row, rowIndex) in ROWS" :key="rowIndex">
								<td>{{rowIndex + 1}}</td>
								<td>{{row.NAME}}</td>
								<td>{{row.department.join('、')}}</td>
								<td>{{row.report}}</td>
							</tr>
						</table>
					</view>
					<view class="table-container" v-if="ROWS1 && ROWS1.length > 0">
						<table>
							<tr>
								<th>序号</th>
								<th>培训其他需求</th>
								<th>需求人员</th>
								<th>需求人数</th>
							</tr>
							<!-- 动态渲染表格行 -->
							<tr v-for="(row, rowIndex) in ROWS1" :key="rowIndex">
								<td>{{rowIndex + 1}}</td>
								<td>{{row.NAME}}</td>
								<td>{{row.department.join('、')}}</td>
								<td>{{row.report}}</td>
							</tr>
						</table>
					</view>
				</u--form>
			</view>

		</view>
		<u-picker :show="comPickerInfo.showSheet" :columns="comPickerInfo.columns" @confirm="onConfirmPicker" @close="closePicker" @cancel="closePicker" keyName="NAME"></u-picker>
	</view>
</template>

<script>
	import {
		initFilter,
		extendRule,
		extendInclude,
		extendSelectField
	} from '../../../../utils/common'
	import {
		getRequest,
	} from '../../../../services/apply/FOServices/FOServices'
	import '../../../../utils/showMsg.js'
	import color from '../../../../uni_modules/uview-ui/libs/config/color'
	import config from '../../../../config/common'
	import {
		getEnum
	} from '../../../../services/common';
	export default {
		data() {
			return {
				model: {},
				TaskID: "",
				tableKey: '0',
				isLoadOK: false,
				paddingBottom: '170',
				LEAVE_REASON: '',
				users: '',
				orgId: uni.getStorageSync('orgId'),
				listPropUpload: ['NOTIFY_ID'],
				listPropValUpload: [],
				Lists: [],
				type: '部门',
				ROWS: [],
				ROWS1: [],
				total:0,
				reportCount:0,
				rate:0,
				comPickerInfo: {
					showSheet: false,
					columns: [],
					title: '',
					dataIndex: undefined,
					formIndex: undefined,
					name: ''
				},
			}
		},
		onLoad(option) {
			this.model.ID = option.ID;
			this.model.ORG_ID_HV = option.ORG_ID_HV
			this.TaskID = option.taskID;
			this.tableKey = option.tableKey ? option.tableKey : '0'

			this.loadData()
		},
		methods: {
			loadData() {
				const json = initFilter(this.orgId)
				json.Parameter22 = this.model.ORG_ID_HV;

				extendRule(json, 'ID', 1, this.model.ID);
				extendSelectField(json, 'NAME');
				extendSelectField(json, 'LAUNCH_TIME');
				extendSelectField(json, 'END_TIME');
				extendSelectField(json, 'STATUS');
				extendSelectField(json, 'Nav_LaunchDepartment.NAME');
				extendSelectField(json, 'Nav_LaunchUser.NAME');
				extendSelectField(json, 'Nav_Points.Nav_Point.NAME');
				extendSelectField(json, 'Nav_Demands.Nav_User.Nav_Department.NAME');
				extendSelectField(json, 'Nav_Demands.Nav_Department.NAME');
				extendSelectField(json, 'Nav_Demands.Nav_Items.Nav_DEMAND.NAME');
				extendSelectField(json, 'Nav_Demands.OK');
				extendSelectField(json, 'Nav_Demands.OTHER');
				extendSelectField(json, 'Nav_Demands.Nav_User.NAME');

				getRequest(json, "/SE/TrainSurvey/Get").then(res => {
					this.model = res
					this.reportCount = this.model && this.model.Nav_Demands ? this.model.Nav_Demands.filter(i => i.OK).length : 0;
					this.total = this.model && this.model.Nav_Demands ? this.model.Nav_Demands.length : 0;
					this.rate = this.total === 0 ? 0 : Math.round(this.reportCount * 100 / this.total)+'%';
					this.updataData()
					this.isLoadOK = true;
				})
			},
			updataData() {
				let r = {};
				this.model.Nav_Demands.forEach(it => {
					it.Nav_Items.forEach(d => {
						let idx = r[d.DEMAND_ID];
						if (idx === undefined) {
							idx = this.ROWS.length
							r[d.DEMAND_ID] = idx;
							this.ROWS.push({
								ID: d.DEMAND_ID,
								NAME: d.Nav_DEMAND?.NAME,
								department: [],
								total: 0,
								report: 0,
							})
						}

						let name = it.Nav_User?.Nav_Department.NAME;
						if (name == '宁化行洛坑钨矿有限公司') {
							name = '公司领导';
						}
						if (this.ROWS[idx].department.indexOf(name) == -1) {
							this.ROWS[idx].department.push(name);
						}
						this.ROWS[idx].total++;
						if (it.OK) {
							this.ROWS[idx].report++;
						}
					})
				});
				this.model.Nav_Demands.forEach(it => {
					if (it.OTHER != undefined && it.OTHER != "") {
						this.ROWS1.push({
							NAME: it.OTHER,
							department: [it.Nav_User?.NAME],
							total: 1,
							report: 1,
						})
					}
				});
			},
			//下拉数据加载
			async handleShowSheet(p) {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "", 0)
				let dataSelect = ['部门', '人员', '岗位']
				if (dataSelect.length) {
					this.comPickerInfo = {
						showSheet: true,
						title: p.title,
						name: p.name,
						dataIndex: p.dataIndex,
						columns: [dataSelect]
					}
				} else {
					// 暂无数据
				}
			},
			// 整改实施单位 departmentName Nav_DepartmentDeal  整改责任人 Nav_UserDeal  userDetailer  验收人Nav_UserCheck userChecker

			onConfirmPicker(e) {
				const {
					name,
					dataIndex
				} = this.comPickerInfo
				this.type = e.value[0]
				this.comPickerInfo.showSheet = false
				this.loadData()
			},

			closePicker() {
				this.comPickerInfo = {
					showSheet: false,
					columns: [],
					title: '',
					name: '',
					formIndex: undefined
				}
			},
		},
		computed: {

		}
	}
</script>

<style>
	/* @import url("@/style/css/editTemplate.css"); */
	.background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #edf1fd;
		z-index: -1;
	}

	.todo-page {
		/* padding-bottom: 10px; */
		overflow: hidden;
	}

	.card {
		margin: 20px 16px 180px 16px;
		padding: 20px 30px 80px 30px;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.upload-title {
		font-size: 14px;
		color: #8e8b9c;
		line-height: 22px;
		padding: 8px 0px;
	}

	.btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 16px;
		z-index: 1000;
		background: #fff;
		box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
	}

	.btn-wrap>>>.u-textarea__field {
		font-size: 14px;
	}

	.btn-wrap>>>.u-cell__title-text {
		font-size: 14px;
	}

	.buttons {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.buttons .first-btn {
		margin-right: 20px;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-textarea {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	/* 表格样式 */
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 16px 0;
		font-size: 14px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	/* 表头样式 */
	th {
		background-color: #f5f7fa;
		color: #606266;
		font-weight: 600;
		text-align: center;
		padding: 12px 8px;
		border-bottom: 1px solid #e0e0e0;
		white-space: nowrap;
	}

	/* 表体单元格样式 */
	td {
		padding: 12px 8px;
		text-align: center;
		border-bottom: 1px solid #f0f0f0;
		color: #333;
		background-color: #fff;
	}

	/* 隔行变色效果 */
	tr:nth-child(even) td {
		background-color: #fafafa;
	}

	/* 最后一行底部边框去除 */
	tr:last-child td {
		border-bottom: none;
	}

	/* 首列和尾列适当加宽 */
	th:first-child,
	td:first-child {
		padding-left: 16px;
		text-align: left;
	}

	th:last-child,
	td:last-child {
		padding-right: 16px;
		text-align: right;
	}

	/* 表头与数据行之间的分割线 */
	tr:first-child th {
		border-bottom: 1px solid #d0d7e5;
	}

	/* 悬停效果（可选） */
	tr:hover td {
		background-color: #f0f8ff;
	}

	/* 移动端优化：允许横向滚动 */
	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 16px -8px;
		padding: 0 8px;
	}

	/* 如果希望表格固定在卡片内，可以这样调整 */
	.card table {
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
	}

	/* 小屏幕优化 */
	@media (max-width: 375px) {
		table {
			font-size: 13px;
		}

		th,
		td {
			padding: 10px 6px;
		}
	}
</style>