361 lines
9.4 KiB
Vue
361 lines
9.4 KiB
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 required label="筛选" @click="handleShowSheet({title: '筛选', name: 'Nav_JoinDepartment'})" borderBottom>
|
|
<u--input disabledColor="#fff" v-model="type" disabled placeholder="请选择筛选条件" suffixIcon="arrow-down" suffixIconStyle="font-size:12px" fontSize="14px" border="none"
|
|
customStyle="margin:0px;display:flex;padding:3px 0px" inputAlign="right">
|
|
</u--input>
|
|
</u-form-item>
|
|
<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>
|
|
<view class="table-container" v-if="ROWS && ROWS.length > 0">
|
|
<table>
|
|
<tr>
|
|
<th colspan="100%" style="text-align: center; background-color: #f5f7fa; font-weight: bold; padding: 12px;">
|
|
答案正确率(百分比)
|
|
</th>
|
|
</tr>
|
|
<!-- 动态渲染表格行 -->
|
|
<tr v-for="(row, rowIndex) in ROWS" :key="rowIndex">
|
|
|
|
<!-- 如果是第一行，使用 u-th 作为表头 -->
|
|
<template v-if="rowIndex === 0">
|
|
<th v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</th>
|
|
</template>
|
|
<!-- 其他行使用 u-td -->
|
|
<template v-else>
|
|
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}<span v-if="cellIndex!==0">%</span></td>
|
|
</template>
|
|
</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
|
|
} 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: [],
|
|
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.isLoadOK = true;
|
|
})
|
|
},
|
|
//下拉数据加载
|
|
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> |