feat: 修复困难帮扶申请表单校验及页面加载闪烁，调整办公室主任拒绝、退回审批时不校验级别和帮扶金额。
新增特殊慰问模块，支持分工会主席统一为多人申请、Excel 导入及人员校验；完善主从表存储、表单校验、审批展示和导出，移除分工会主席审批节点，使用独立流程节点标识。
This commit is contained in:
+513
@@ -0,0 +1,513 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
#app {
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
#app > .van-nav-bar .van-icon,
|
||||
#app > .van-nav-bar .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
#app > .van-nav-bar .van-nav-bar__title,
|
||||
#app > .van-nav-bar .van-nav-bar__text,
|
||||
#app > .van-nav-bar .van-nav-bar__arrow {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.search-dialog {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
/* 慰问申请页复用提案撰写页的 Card 层级，仅覆盖当前表单分组和底部操作栏。 */
|
||||
.specialcondolence-apply-form.form-container {
|
||||
min-height: 100%;
|
||||
padding: 12px 15px calc(84px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background: #f3f7fc;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section {
|
||||
margin-bottom: 11px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e9eff7;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 11px rgba(51, 87, 126, 0.08);
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .specialcondolence-card__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 12px 14px 8px 21px;
|
||||
color: #354255;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .specialcondolence-card__title::before {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 11px;
|
||||
left: 12px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: #1989fa;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-cell-group {
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.specialcondolence-card__desc {
|
||||
padding: 0 14px 8px 21px;
|
||||
color: orangered;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-cell {
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-cell:not(:last-child)::after {
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
border-color: #eef2f7;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-field__label {
|
||||
width: 84px;
|
||||
color: #596779;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-field__value,
|
||||
.specialcondolence-apply-form .form-section .van-field__control {
|
||||
color: #4f5d70;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-field__control::placeholder {
|
||||
color: #b1bac6;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-form .form-section .van-cell--required::before {
|
||||
left: 6px;
|
||||
color: #f06464;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-actions {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 -4px 14px rgba(50, 78, 112, 0.06);
|
||||
}
|
||||
|
||||
.specialcondolence-apply-actions .van-button {
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
border-radius: 14px !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-actions .van-button:first-child {
|
||||
flex: 1;
|
||||
color: #1989fa;
|
||||
border-color: #1989fa;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.specialcondolence-apply-actions .van-button:last-child {
|
||||
flex: 1.08;
|
||||
border-color: #1989fa;
|
||||
background: #1989fa;
|
||||
}
|
||||
|
||||
#app .van-action-sheet__header,
|
||||
#app .van-picker__title,
|
||||
.van-dialog__header {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#app .van-action-sheet__name,
|
||||
#app .van-action-sheet__cancel,
|
||||
#app .van-empty__description,
|
||||
#app .van-search__field,
|
||||
#app .van-picker__cancel,
|
||||
#app .van-picker__confirm,
|
||||
.van-dialog__message {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#app .van-picker-column__item {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<!-- 导航栏 -->
|
||||
<van-nav-bar title="特殊慰问申请" left-text="返回" left-arrow @click-left="historyBack" fixed
|
||||
placeholder></van-nav-bar>
|
||||
|
||||
<!-- 表单容器 -->
|
||||
<van-form ref="formRef" class="form-container specialcondolence-apply-form">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<section class="form-section">
|
||||
<h2 class="specialcondolence-card__title">基本信息</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-field label="申请人姓名" :rules="[{ required: true }]" v-model="formData.applyUserName" readonly
|
||||
required name="applyUserName"></van-field>
|
||||
<van-field label="申请人工号" :rules="[{ required: true }]" v-model="formData.applyLoginName" readonly
|
||||
required name="applyLoginName"></van-field>
|
||||
<van-field label="申请人单位" :rules="[{ required: true }]" v-model="formData.applyUnitName" readonly
|
||||
required name="applyUnitName"></van-field>
|
||||
<van-field label="申请人工会" :rules="[{ required: true }]" v-model="formData.applyUnionName" readonly
|
||||
required name="applyUnionName"></van-field>
|
||||
|
||||
<van-field label="慰问类型" required><template #input><select v-model="formData.type" @change="typeChange(formData.type)"><option value="">请选择</option><option v-for="t in typeOptions" :key="t.id" :value="t.id">{{t.name}}</option></select></template></van-field>
|
||||
<van-field v-model="formData.perMoney" label="每人金额" type="number" required :rules="[{ validator: validateMoney, message: '金额须大于0且不超过10000元，最多两位小数' }]"></van-field>
|
||||
<van-field v-model="formData.occurTime" label="慰问时间" placeholder="yyyy-MM-dd" required :rules="[{required:true}]"></van-field>
|
||||
<div v-for="(person, index) in formData.recipients" :key="index">
|
||||
<van-cell :title="'慰问对象 ' + (index + 1)"><van-button native-type="button" size="mini" @click="formData.recipients.splice(index, 1)">删除</van-button></van-cell>
|
||||
<van-field v-model="person.helpUserName" label="慰问对象" required :rules="[{required:true}]"></van-field>
|
||||
<van-field v-model="person.helpLoginName" label="工号" placeholder="普通人员必填，劳务派遣可空"></van-field>
|
||||
<van-field v-model="person.idCard" label="身份证号码" maxlength="18" required :rules="[{required:true}]"></van-field>
|
||||
<van-field v-model="person.bankOfDeposit" label="开户行" maxlength="100" required :rules="[{required:true}]"></van-field>
|
||||
<van-field v-model="person.bankUserName" label="户名" maxlength="100" required :rules="[{required:true}]"></van-field>
|
||||
<van-field v-model="person.bankCardNumber" label="收款账户" maxlength="30" required :rules="[{required:true}]"></van-field>
|
||||
</div>
|
||||
<van-button native-type="button" @click="formData.recipients.push(newRecipient())">增加一行</van-button>
|
||||
<van-field
|
||||
v-model="formData.remark"
|
||||
name="remark"
|
||||
maxlength="500"
|
||||
label="申请事由"
|
||||
type="textarea"
|
||||
rows="4"
|
||||
autosize
|
||||
placeholder="请输入申请事由"
|
||||
:rules="[{ required: true }]"
|
||||
required
|
||||
></van-field>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<section class="form-section" v-if="chooseType.isUploadFile === true">
|
||||
<h2 class="specialcondolence-card__title">附件材料</h2>
|
||||
<div v-if="chooseType.isUploadFile && chooseType.uploadFileDesc" class="specialcondolence-card__desc">
|
||||
{{ '附件说明：' + chooseType.uploadFileDesc }}
|
||||
</div>
|
||||
<van-cell-group :border="false">
|
||||
<van-field class="direction-column-field" name="files" label="附件" required
|
||||
:rules="[{ validator: () => Array.isArray(formData.files) && formData.files.length > 0 && formData.files.length <= 5, message: '请上传1至5个附件' }]">
|
||||
<template #input>
|
||||
<h5-file-upload
|
||||
slot="input"
|
||||
:value.sync="formData.files"
|
||||
:upload_number="5"
|
||||
upload_text="上传附件"
|
||||
upload_result_category="array"
|
||||
complete_result
|
||||
></h5-file-upload>
|
||||
<div class="specialcondolence-card__desc">最多上传 5 个文件</div>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<section class="form-section">
|
||||
<h2 class="specialcondolence-card__title">签字确认</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-field class="direction-column-field" name="signature" label="" :value="formData.signature"
|
||||
:rules="[{ required: true, message: '请填写签字' }]">
|
||||
<template #input>
|
||||
<h5-signature v-model="formData.signature" slot="input"></h5-signature>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<div class="form-actions specialcondolence-apply-actions">
|
||||
<van-button native-type="button" @click="onSave" round type="info" plain>保存申请</van-button>
|
||||
<van-button @click="onSubmit" round type="info" v-if="!taskId">提交申请</van-button>
|
||||
<van-button @click="onFinishTask" round type="info" v-else>提交申请</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhgh/staffbenefit/specialcondolence/apply/recipients.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
mixins: [specialCondolenceRecipients],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
bizId: GetQueryString("bizId"),
|
||||
taskId: GetQueryString("taskId"),
|
||||
formData: { recipients: [] },
|
||||
|
||||
chooseType: {},
|
||||
userOptions: [],
|
||||
typeOptions: [],
|
||||
|
||||
helpUserSelectShow: false,
|
||||
payUserSelectShow: false,
|
||||
showTypePicker: false,
|
||||
typeColumns: [],
|
||||
searchKeyword: "",
|
||||
|
||||
showTimePicker: false,
|
||||
showChildPicker: false,
|
||||
showFamilyPicker: false,
|
||||
|
||||
certifierUserSelectShow: false,
|
||||
handlerUserSelectShow: false,
|
||||
|
||||
showHospitalizationTimePicker: false,
|
||||
showLeaveHospitalTimePicker: false,
|
||||
minDate: new Date(2024, 0, 1),
|
||||
maxDate: new Date(),
|
||||
|
||||
typeDefaultIndex: 0
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateMoney(value) {
|
||||
return /^(0|[1-9][0-9]*)(\.[0-9]{1,2})?$/.test(String(value)) && Number(value) > 0 && Number(value) <= 10000
|
||||
},
|
||||
// 选择出院时间
|
||||
showLeaveHospitalTimePickerClick() {
|
||||
if (this.formData.leaveHospitalTime) {
|
||||
this.formData.leaveHospitalDate = new Date(this.formData.leaveHospitalTime)
|
||||
}
|
||||
this.showLeaveHospitalTimePicker = true
|
||||
},
|
||||
// 选择住院时间
|
||||
showHospitalizationTimePickerClick() {
|
||||
if (this.formData.hospitalizationTime) {
|
||||
this.formData.hospitalizationDate = new Date(this.formData.hospitalizationTime)
|
||||
}
|
||||
this.showHospitalizationTimePicker = true
|
||||
},
|
||||
// 选择慰问时间
|
||||
showTimePickerClick() {
|
||||
if (this.formData.occurTime) {
|
||||
this.formData.occurDate = new Date(this.formData.occurTime)
|
||||
}else{
|
||||
this.formData.occurDate = new Date()
|
||||
}
|
||||
this.showTimePicker = true
|
||||
},
|
||||
// 选择慰问类型
|
||||
showTypePickerClick() {
|
||||
if (this.formData.type) {
|
||||
this.typeDefaultIndex = this.typeOptions.findIndex(item => item.id === this.formData.type)
|
||||
}
|
||||
this.showTypePicker = true
|
||||
},
|
||||
//经办人
|
||||
handlerUserChange(user) {
|
||||
const { id, userName, loginName, unitId, unitName, unionId, unionName } = user
|
||||
this.$set(this.formData, "handlerUserId", id)
|
||||
this.$set(this.formData, "handlerUserName", userName)
|
||||
this.$set(this.formData, "handlerLoginName", loginName)
|
||||
this.$set(this.formData, "handlerUnitId", unitId)
|
||||
this.$set(this.formData, "handlerUnitName", unitName)
|
||||
this.$set(this.formData, "handlerUnionId", unionId)
|
||||
this.$set(this.formData, "handlerUnionName", unionName)
|
||||
this.handlerUserSelectShow = false
|
||||
this.searchKeyword = ""
|
||||
this.userOptions = []
|
||||
},
|
||||
//证明人
|
||||
certifierUserChange(user) {
|
||||
const { id, userName, loginName, unitId, unitName, unionId, unionName } = user
|
||||
this.$set(this.formData, "certifierUserId", id)
|
||||
this.$set(this.formData, "certifierUserName", userName)
|
||||
this.$set(this.formData, "certifierLoginName", loginName)
|
||||
this.$set(this.formData, "certifierUnitId", unitId)
|
||||
this.$set(this.formData, "certifierUnitName", unitName)
|
||||
this.$set(this.formData, "certifierUnionId", unionId)
|
||||
this.$set(this.formData, "certifierUnionName", unionName)
|
||||
this.certifierUserSelectShow = false
|
||||
this.searchKeyword = ""
|
||||
this.userOptions = []
|
||||
},
|
||||
async userRemoteMethod(event, type) {
|
||||
if (event) {
|
||||
this.userOptions = await this.selectQueryUser(event)
|
||||
if (type === "help") {
|
||||
this.helpUserSelectShow = true
|
||||
} else if (type === "certifier") {
|
||||
this.certifierUserSelectShow = true
|
||||
} else if (type === "handler") {
|
||||
this.handlerUserSelectShow = true
|
||||
}
|
||||
}
|
||||
},
|
||||
async selectQueryUser(keyword) {
|
||||
const res = await this.$axios.post("/platform/special_condolence/apply/listUser", { keyword: keyword })
|
||||
return res.data
|
||||
},
|
||||
helpUserChange(user) {
|
||||
const { id, userName, loginName, unitId, unitName, unionId, unionName } = user
|
||||
this.$set(this.formData, "helpUserId", id)
|
||||
this.$set(this.formData, "helpUserName", userName)
|
||||
this.$set(this.formData, "helpLoginName", loginName)
|
||||
this.$set(this.formData, "helpUnitId", unitId)
|
||||
this.$set(this.formData, "helpUnitName", unitName)
|
||||
this.$set(this.formData, "helpUnionId", unionId)
|
||||
this.$set(this.formData, "helpUnionName", unionName)
|
||||
this.helpUserSelectShow = false
|
||||
this.searchKeyword = ""
|
||||
this.userOptions = []
|
||||
},
|
||||
payUserChange(user) {
|
||||
const { id, userName, loginName } = user
|
||||
this.$set(this.formData, "payUserId", id)
|
||||
this.$set(this.formData, "payUserName", userName)
|
||||
this.$set(this.formData, "payLoginName", loginName)
|
||||
this.payUserSelectShow = false
|
||||
this.searchKeyword = ""
|
||||
this.userOptions = []
|
||||
},
|
||||
typeChange(id) {
|
||||
this.chooseType = this.typeOptions.find(o => o.id === id)
|
||||
if (this.chooseType) {
|
||||
this.$set(this.formData, "perMoney", this.chooseType.money)
|
||||
this.$set(this.formData, "way", this.chooseType.way)
|
||||
this.$set(this.formData, "typeCode", this.chooseType.code)
|
||||
}
|
||||
},
|
||||
onTypeConfirm(o) {
|
||||
this.$set(this.formData, "typeName", o.text)
|
||||
this.$set(this.formData, "type", o.value)
|
||||
this.typeChange(o.value)
|
||||
this.showTypePicker = false
|
||||
},
|
||||
onSave() {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定保存吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/special_condolence/apply/save", { data: JSON.stringify(this.formData) }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.$pjaxReplace("/platform/special_condolence/mine/h5")
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
async onSubmit() {
|
||||
this.$refs.formRef.validate().then(() => {
|
||||
if (!this.formData.signature){
|
||||
this.$toast.fail("请填写签字")
|
||||
return
|
||||
}
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交申请吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/special_condolence/apply/submit", { data: JSON.stringify(this.formData) }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.$pjaxReplace("/platform/special_condolence/mine/h5")
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
async onFinishTask() {
|
||||
this.$refs.formRef.validate().then(() => {
|
||||
if (!this.formData.signature){
|
||||
this.$toast.fail("请填写签字")
|
||||
return
|
||||
}
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交申请吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/special_condolence/apply/submitAgain", {
|
||||
data: JSON.stringify(this.formData),
|
||||
taskId: GetQueryString("taskId")
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.$pjaxReplace("/platform/special_condolence/mine/h5")
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
init() {
|
||||
if (this.bizId) {
|
||||
this.$axios.post("/platform/special_condolence/mine/info", { id: this.bizId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.formData = res.data
|
||||
this.initRecipients()
|
||||
this.selectQueryUser(this.formData.helpLoginName, this.helpUserOptions)
|
||||
this.selectQueryUser(this.formData.payLoginName, this.payUserOptions)
|
||||
this.chooseType = this.typeOptions.find(o => o.id === this.formData.type)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const { username, loginname, id, unit, union, mobile } = this.$store.state.user
|
||||
this.formData = {
|
||||
recipients: [this.newRecipient()],
|
||||
perMoney: undefined,
|
||||
occurTime: this.$moment().format('YYYY-MM-DD'),
|
||||
applyUserName: username,
|
||||
applyLoginName: loginname,
|
||||
applyUserId: id,
|
||||
applyUnitId: unit?.id,
|
||||
applyUnitName: unit?.name,
|
||||
applyUnionId: union?.id,
|
||||
applyUnionName: union?.name
|
||||
}
|
||||
}
|
||||
},
|
||||
querySpecialCondolenceType() {
|
||||
this.$axios.post("/platform/special_condolence/type/querySpecialCondolenceType")
|
||||
.then((res) => {
|
||||
this.typeOptions = JSON.parse(JSON.stringify(res.data))
|
||||
res.data.forEach((v) => {
|
||||
this.typeColumns.push({ value: v.id, text: v.name })
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.querySpecialCondolenceType()
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+201
@@ -0,0 +1,201 @@
|
||||
.specialcondolence-full-popup {
|
||||
--color-primary: #1989fa;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #f3f7fc;
|
||||
}
|
||||
|
||||
.specialcondolence-full-popup__page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: 46px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.specialcondolence-full-popup__page > .van-nav-bar {
|
||||
z-index: 20;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.specialcondolence-full-popup__page > .van-nav-bar .van-icon,
|
||||
.specialcondolence-full-popup__page > .van-nav-bar .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.specialcondolence-full-popup__scroll {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.specialcondolence-info-main {
|
||||
padding: 12px 15px calc(18px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.specialcondolence-info-card {
|
||||
margin-bottom: 11px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e9eff7;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 11px rgba(51, 87, 126, .08);
|
||||
}
|
||||
|
||||
.specialcondolence-info-card__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 12px 14px 8px 21px;
|
||||
color: #354255;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card__title::before {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 11px;
|
||||
left: 12px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: #1989fa;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* 审核意见复用详情 Card 标题，并与提案 delegation 审核输入区保持一致。 */
|
||||
.specialcondolence-audit-card__required {
|
||||
margin-left: 4px;
|
||||
color: #ee0a24;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-field.specialcondolence-audit-field {
|
||||
width: calc(100% - 28px);
|
||||
margin: 0 14px 14px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c9d5e5;
|
||||
border-radius: 10px;
|
||||
background: #f7f9fd;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-field.specialcondolence-audit-field .van-field__control {
|
||||
min-height: 150px;
|
||||
color: #253247;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-field.specialcondolence-audit-field .van-field__control::placeholder {
|
||||
color: #9aa7b8;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-field.specialcondolence-audit-field .van-field__word-limit {
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-field.specialcondolence-audit-field::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.specialcondolence-popup-actions {
|
||||
display: flex;
|
||||
padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.specialcondolence-popup-actions .van-button {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.specialcondolence-popup-actions .specialcondolence-action-primary {
|
||||
border-color: #1989fa;
|
||||
background: #1989fa;
|
||||
}
|
||||
|
||||
.specialcondolence-popup-actions .specialcondolence-action-danger {
|
||||
border-color: #ff4d4f;
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-cell-group {
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-cell {
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-cell:not(:last-child)::after {
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
border-color: #eef2f7;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-cell__title {
|
||||
width: 102px;
|
||||
color: #596779;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
flex: 0 0 102px;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .van-cell__value {
|
||||
min-width: 0;
|
||||
color: #4f5d70;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.specialcondolence-info-long-cell {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .specialcondolence-attachments .empty-container {
|
||||
height: auto;
|
||||
justify-content: flex-start;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.specialcondolence-info-card .specialcondolence-attachments .empty-text {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.specialcondolence-info-opinion > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.specialcondolence-info-opinion > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.specialcondolence-signature-image,
|
||||
.specialcondolence-approval-signature-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.specialcondolence-signature-image .van-image__img,
|
||||
.specialcondolence-approval-signature-image {
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
}
|
||||
|
||||
.specialcondolence-info-opinion img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
const specialcondolenceInfo = {
|
||||
template: /*language=HTML*/ `
|
||||
<van-popup
|
||||
v-model="visible"
|
||||
position="right"
|
||||
class="specialcondolence-full-popup"
|
||||
:close-on-click-overlay="false"
|
||||
get-container="#app"
|
||||
>
|
||||
<div class="specialcondolence-full-popup__page">
|
||||
<van-nav-bar
|
||||
:title="popupTitle"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
@click-left="onClose()"
|
||||
></van-nav-bar>
|
||||
<div class="specialcondolence-full-popup__scroll">
|
||||
<main class="specialcondolence-info-main">
|
||||
<section class="specialcondolence-info-card">
|
||||
<h2 class="specialcondolence-info-card__title">基本信息</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-cell title="申请人姓名">{{ viewData.applyUserName || '--' }}</van-cell>
|
||||
<van-cell title="申请人工号">{{ viewData.applyLoginName || '--' }}</van-cell>
|
||||
<van-cell title="申请人单位">{{ viewData.applyUnitName || '--' }}</van-cell>
|
||||
<van-cell title="申请人工会">{{ viewData.applyUnionName || '--' }}</van-cell>
|
||||
<template v-if="viewData.recipients && viewData.recipients.length">
|
||||
<van-cell title="慰问类型" :value="viewData.typeName"></van-cell>
|
||||
<van-cell title="每人慰问金额" :value="viewData.perMoney"></van-cell>
|
||||
<van-cell title="慰问时间" :value="viewData.occurTime"></van-cell>
|
||||
</template>
|
||||
<template v-for="(person, index) in viewData.recipients">
|
||||
<van-cell :title="'慰问对象 ' + (index + 1)" :value="person.helpUserName"></van-cell>
|
||||
<van-cell title="工号" :value="person.helpLoginName || '--'"></van-cell>
|
||||
<van-cell title="身份证号码" :value="person.idCard"></van-cell>
|
||||
<van-cell title="开户行" :value="person.bankOfDeposit"></van-cell>
|
||||
<van-cell title="户名" :value="person.bankUserName"></van-cell>
|
||||
<van-cell title="收款账户" :value="person.bankCardNumber"></van-cell>
|
||||
</template>
|
||||
<template v-if="!viewData.recipients || !viewData.recipients.length">
|
||||
<van-cell title="慰问对象">{{ viewData.helpUserName || '--' }}</van-cell>
|
||||
<!-- <van-cell title="证明人">{{ viewData.certifierUserName || '--' }}</van-cell> -->
|
||||
<van-cell title="慰问类型">{{ viewData.typeName || '--' }}</van-cell>
|
||||
<van-cell title="慰问金额">{{ viewData.money || '--' }}</van-cell>
|
||||
<van-cell title="慰问时间">{{ viewData.occurTime || '--' }}</van-cell>
|
||||
<van-cell title="收款账户">{{ viewData.bankCardNumber || '--' }}</van-cell>
|
||||
<van-cell title="户名">{{ viewData.bankUserName || '--' }}</van-cell>
|
||||
<van-cell title="开户行">
|
||||
{{ viewData.bankOfDeposit || '暂无' }}
|
||||
</van-cell>
|
||||
<template v-if="['2'].includes(viewData.typeCode)">
|
||||
<van-cell title="入院时间">{{ viewData.hospitalizationTime || '--' }}</van-cell>
|
||||
<van-cell title="出院时间">{{ viewData.leaveHospitalTime || '--' }}</van-cell>
|
||||
<van-cell title="当年第几次住院（次）">{{ viewData.thisYearHospitalizationNum || '--' }}</van-cell>
|
||||
</template>
|
||||
<van-cell title="申请事由">
|
||||
{{ viewData.remark || '暂无' }}
|
||||
</van-cell>
|
||||
</template>
|
||||
<van-cell class="specialcondolence-info-long-cell" title="附件">
|
||||
<file-preview class="specialcondolence-attachments" :files="viewData.files" complete_result></file-preview>
|
||||
</van-cell>
|
||||
<van-cell class="specialcondolence-info-long-cell" title="签字">
|
||||
<van-image
|
||||
v-if="viewData.signature"
|
||||
:src="viewData.signature"
|
||||
class="specialcondolence-signature-image"
|
||||
fit="contain"
|
||||
></van-image>
|
||||
<span v-else>暂无签字</span>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-for="(task, index) in doneTasks"
|
||||
:key="task.id || index"
|
||||
class="specialcondolence-info-card"
|
||||
>
|
||||
<h2 class="specialcondolence-info-card__title">{{ task.displayName || '办理记录' }}</h2>
|
||||
<van-cell-group :border="false" v-if="task.ext && task.ext.isFirstTaskNode">
|
||||
<van-cell title="申请用户">
|
||||
{{ task.ext.initiatorName || '--' }}（{{ task.ext.initiatorAccount || '--' }}）
|
||||
</van-cell>
|
||||
<van-cell title="申请时间">{{ task.finishTime || '--' }}</van-cell>
|
||||
<van-cell title="办理结果">
|
||||
<dict-tag
|
||||
:options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="task.ext.submitType"
|
||||
></dict-tag>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<van-cell-group :border="false" v-else>
|
||||
<van-cell title="办理用户">
|
||||
{{ task.taskFormData && task.taskFormData.userName || '--' }}（{{ task.taskFormData && task.taskFormData.loginName || '--' }}）
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ task.finishTime || '--' }}</van-cell>
|
||||
<van-cell title="办理结果">
|
||||
<dict-tag
|
||||
:options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="task.ext && task.ext.submitType"
|
||||
></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell v-if="task.taskFormData && task.taskFormData.sign" title="审批签字">
|
||||
<img :src="task.taskFormData.sign" class="specialcondolence-approval-signature-image">
|
||||
</van-cell>
|
||||
<van-cell title="办理意见">
|
||||
<div class="specialcondolence-info-opinion" v-html="task.taskFormData && task.taskFormData.tf_opinion || '暂无'"></div>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
`,
|
||||
dicts: ["PROCESS_TASK_SUBMIT_TYPE"],
|
||||
props: {
|
||||
pageKey: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
popupTitle: "慰问详情",
|
||||
viewData: {},
|
||||
doneTasks: [],
|
||||
row: null,
|
||||
historyLayerUnsubscribe: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 浏览器历史变化时，只同步当前慰问详情弹框的显示状态。
|
||||
syncHistoryLayerStack(stack) {
|
||||
this.$set(this, "visible", stack.includes("specialcondolence-detail"))
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开慰问详情或审核弹框。
|
||||
* row 传列表当前行，title 传顶部导航标题；无返回值。
|
||||
*/
|
||||
onOpen(row, title = "慰问详情") {
|
||||
this.$set(this, "row", row)
|
||||
this.$set(this, "popupTitle", title)
|
||||
this.$set(this, "viewData", {})
|
||||
this.$set(this, "doneTasks", [])
|
||||
this.getInfo()
|
||||
this.getDoneTasks()
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-detail")) return
|
||||
this.$set(this, "visible", true)
|
||||
},
|
||||
|
||||
// 顶部返回按钮与业务主动关闭统一回退弹框对应的浏览器历史。
|
||||
onClose(afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close("specialcondolence-detail", afterClose)) return
|
||||
this.$set(this, "visible", false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
|
||||
getInfo() {
|
||||
this.$axios.post("/platform/special_condolence/mine/info", {id: this.row.id}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$set(this, "viewData", res.data || {})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getDoneTasks() {
|
||||
this.$axios.post("/flow/common/doneTasks", {bizId: this.row.id}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$set(this, "doneTasks", res.data || [])
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.ensureRegistered(this.pageKey)
|
||||
this.$set(this, "historyLayerUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
|
||||
this.syncHistoryLayerStack(stack)
|
||||
}))
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (typeof this.historyLayerUnsubscribe === "function") this.historyLayerUnsubscribe()
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.pageKey === this.pageKey) {
|
||||
window.h5HistoryLayerManager.unregister(this.pageKey)
|
||||
}
|
||||
}
|
||||
}
|
||||
+367
@@ -0,0 +1,367 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
#app { --color-primary: #1989fa; }
|
||||
.specialcondolence-list-page { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f3f7fd; }
|
||||
.specialcondolence-list-page .van-nav-bar, .specialcondolence-list-page .van-sticky--fixed { background: #fff; }
|
||||
.specialcondolence-list-page .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
|
||||
.specialcondolence-list-page .van-nav-bar .van-icon, .specialcondolence-list-page .van-nav-bar__text { color: #1989fa; }
|
||||
.specialcondolence-list-sticky { padding: 22px 12px 1px; box-sizing: border-box; background: #f3f7fd; }
|
||||
.specialcondolence-list-search { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .1); }
|
||||
.specialcondolence-list-search .van-search__content { height: 42px; padding-left: 12px; align-items: center; border-radius: 12px; background: #fff; }
|
||||
.specialcondolence-list-search .van-field__control { color: #263548; font-size: 14px; }
|
||||
.specialcondolence-list-search .van-field__control::placeholder { color: #a7b0bf; }
|
||||
.specialcondolence-list-filter { margin-bottom: 8px; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__bar { height: 44px; box-shadow: none; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item, .specialcondolence-list-filter .van-dropdown-menu__title { height: 44px; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item { align-items: center; justify-content: center; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title { display: inline-flex; align-items: center; line-height: 20px; color: #66758a; font-size: 14px; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title--active, .specialcondolence-list-filter .van-dropdown-item__option--active, .specialcondolence-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon { color: #1989fa; }
|
||||
.specialcondolence-list-filter .van-dropdown-item__content { width: calc(100% - 24px); margin: 0 12px; overflow: hidden; box-sizing: border-box; border-radius: 0 0 12px 12px; box-shadow: 0 10px 24px rgba(31, 65, 108, .14); }
|
||||
.specialcondolence-list-filter .van-dropdown-item__option { display: flex; min-height: 48px; padding: 0 16px; align-items: center; color: #46566c; font-size: 14px; }
|
||||
.specialcondolence-list-filter .van-dropdown-item__option .van-cell__title { display: flex; min-height: 20px; align-items: center; line-height: 20px; }
|
||||
.specialcondolence-list-content { padding: 0 12px; }
|
||||
.specialcondolence-list-skeleton { padding-top: 2px; }
|
||||
.specialcondolence-list-skeleton__card { margin-bottom: 12px; padding: 18px 14px 14px; border: 1px solid #e9eff7; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton { padding: 0; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__title { width: 42%; height: 18px; margin-bottom: 18px; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row { height: 14px; margin-top: 12px; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:nth-child(2n) { width: 72% !important; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:last-child { width: 34% !important; margin-top: 18px; margin-left: auto; }
|
||||
.specialcondolence-list-page .table-list-container { margin-top: 0; padding-bottom: 2px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item { margin-bottom: 12px; padding: 14px; border: 1px solid #e9eff7; border-radius: 12px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-card-header { display: flex; margin-bottom: 8px; align-items: flex-start; justify-content: space-between; }
|
||||
.specialcondolence-card-heading { min-width: 0; padding-right: 10px; flex: 1; }
|
||||
.specialcondolence-card-title { overflow: hidden; color: #253247; font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.specialcondolence-card-code { margin-top: 1px; color: #9ba6b6; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-card-status { display: inline-flex; flex: none; }
|
||||
.specialcondolence-card-status .van-tag { min-height: 24px; padding: 3px 9px; border: 0; border-radius: 12px; box-sizing: border-box; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .item-actions { margin-top: 10px; padding-top: 10px; border-top-color: #edf1f6; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn { min-height: 28px; padding: 4px 11px; border-radius: 14px; color: #1989fa; background: #eaf4ff; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn.delete { color: #f04444; background: #fff0f0; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn i { margin-right: 5px; font-size: 13px; }
|
||||
.specialcondolence-list-page .empty-state { padding: 0; }
|
||||
.specialcondolence-list-empty { display: flex; min-height: 280px; padding: 46px 18px 36px; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; }
|
||||
.specialcondolence-list-empty img { display: block; width: 86%; max-width: 290px; height: auto; object-fit: contain; }
|
||||
.specialcondolence-list-empty__title { margin-top: 14px; color: #50627a; font-size: 15px; font-weight: 600; line-height: 22px; }
|
||||
.specialcondolence-list-empty__hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
|
||||
</style>
|
||||
|
||||
<style id="style-specialcondolence-info-h5">
|
||||
<!--#include("../common/info.css"){}#-->
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<div class="specialcondolence-list-page">
|
||||
<van-nav-bar title="分管校领导审批" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<div class="specialcondolence-list-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="specialcondolence-list-search"
|
||||
placeholder="请输入姓名或者工号搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="specialcondolence-list-filter" :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.type" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.approvalText" :options="approvalOptions" :multiple="false"
|
||||
@change="onApprovalFilterChange"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<main class="specialcondolence-list-content">
|
||||
<div class="specialcondolence-list-skeleton" v-if="skeletonLoading">
|
||||
<div class="specialcondolence-list-skeleton__card" v-for="index in 3" :key="'fourth-approval-skeleton-' + index">
|
||||
<van-skeleton title :row="5" animated></van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<table-list api="/platform/special_condolence/fourthApproval/pageData" :page_form.sync="pageForm" ref="tableListRef"
|
||||
v-show="!skeletonLoading" :show_loading_overlay="false" @ready="onReady"
|
||||
@loading-change="handleListLoadingChange">
|
||||
<template #header="{index,row}">
|
||||
<div class="specialcondolence-card-header">
|
||||
<div class="specialcondolence-card-heading">
|
||||
<div class="specialcondolence-card-title">{{row.helpUserName || '--'}}</div>
|
||||
<div class="specialcondolence-card-code">工号：{{row.helpLoginName || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag class="specialcondolence-card-status" v-if="row.instanceState" :value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="慰问对象">{{row.helpUserName}}</table-column>
|
||||
<table-column label="慰问对象工号">{{row.helpLoginName}}</table-column>
|
||||
<table-column label="申请人">{{row.applyUserName}}</table-column>
|
||||
<table-column label="所属工会">{{row.applyUnionName}}</table-column>
|
||||
<table-column label="所属单位">{{row.applyUnitName}}</table-column>
|
||||
<table-column label="慰问类型">{{row.typeName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<van-icon name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="specialcondolence-list-empty">
|
||||
<img src="/assets/mobile/img/condolence/condolence-empty.png" alt="暂无慰问审核记录插画">
|
||||
<div class="specialcondolence-list-empty__title">暂无慰问审核记录</div>
|
||||
<div class="specialcondolence-list-empty__hint">当前筛选条件下暂时没有慰问申请</div>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</main>
|
||||
|
||||
<info ref="infoRef" page-key="specialcondolence-fourth-detail">
|
||||
<div v-if="showApprovalForm">
|
||||
<section class="specialcondolence-info-card">
|
||||
<h2 class="specialcondolence-info-card__title">
|
||||
审批意见<span class="specialcondolence-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
class="specialcondolence-audit-field"
|
||||
name="tf_opinion"
|
||||
type="textarea"
|
||||
rows="6"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
<h2 class="specialcondolence-info-card__title">
|
||||
审批签字<span class="specialcondolence-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-field name="tf_sign" :value="formData.tf_sign" :rules="[{required:true,message:'请完成审批签字'}]">
|
||||
<template #input><h5-signature v-model="formData.tf_sign" :key="formData.processTaskId"></h5-signature></template>
|
||||
</van-field>
|
||||
</van-form>
|
||||
</section>
|
||||
<div class="specialcondolence-popup-actions">
|
||||
<van-button class="specialcondolence-action-danger" type="danger" block :loading="formLoading" @click="handleTaskAction(6)">退回</van-button>
|
||||
<van-button class="specialcondolence-action-danger" type="danger" block :loading="formLoading" @click="handleTaskAction(2)">不同意</van-button>
|
||||
<van-button class="specialcondolence-action-primary" type="primary" block :loading="formLoading" @click="handleTaskAction(1)">同意</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</info>
|
||||
<van-dialog
|
||||
:value="confirmVisible"
|
||||
title="提示"
|
||||
:message="confirmActionType === 'revoke' ? '您确定要撤回吗？' : '您确定要提交吗？'"
|
||||
show-cancel-button
|
||||
confirm-button-color="#1989fa"
|
||||
@confirm="confirmPendingAction"
|
||||
@cancel="closeActionConfirm"
|
||||
></van-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('../common/info.js'){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
info: specialcondolenceInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: '',
|
||||
approvalText: "0",
|
||||
approval: false,
|
||||
year: new Date().getFullYear(),
|
||||
type: null,
|
||||
},
|
||||
typeOptions: [],
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
skeletonLoading: true,
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
formLoading: false,
|
||||
confirmVisible: false,
|
||||
confirmActionType: "task",
|
||||
pendingSubmitType: null,
|
||||
pendingRevokeRow: null,
|
||||
historyLayerUnsubscribe: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// state.initial 表示当前查询前列表为空，仅此阶段使用整组卡片骨架屏。
|
||||
handleListLoadingChange(state) {
|
||||
if (state.initial) this.$set(this, "skeletonLoading", state.loading)
|
||||
},
|
||||
// 审核状态下拉值为字符串，接口参数 approval 继续使用布尔值。
|
||||
onApprovalFilterChange(val) {
|
||||
this.$set(this.pageForm, "approval", val === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
onReady() {
|
||||
this.querySpecialCondolenceType()
|
||||
this.openTodoTask()
|
||||
},
|
||||
openTodoTask() {
|
||||
const taskId = GetQueryString("taskId")
|
||||
const bizId = GetQueryString("bizId")
|
||||
if (!taskId || !bizId) return
|
||||
this.$axios.post("/flow/common/taskInfo", {taskId}).then((res) => {
|
||||
if (res.code !== 0 || !res.data) return
|
||||
const task = res.data
|
||||
if (task.taskName !== "af363a4e-fc56-42a0-9906-8c7a2814006b") return
|
||||
const row = {id: bizId, taskId: task.id, curTaskName: task.displayName}
|
||||
if (task.taskState === 10 && task.executable && GetQueryString("tab") === "todo") {
|
||||
this.onApproval(row)
|
||||
} else {
|
||||
this.onView(row)
|
||||
}
|
||||
})
|
||||
},
|
||||
onView(row) {
|
||||
this.$set(this, "showApprovalForm", false)
|
||||
this.$refs.infoRef.onOpen(row, "慰问详情")
|
||||
},
|
||||
onApproval(row) {
|
||||
this.$set(this, "showApprovalForm", true)
|
||||
this.$set(this, "formData", {
|
||||
processTaskId: row.taskId,
|
||||
taskName: row.curTaskName,
|
||||
tf_sign: "",
|
||||
tf_opinion: ""
|
||||
})
|
||||
this.$refs.infoRef.onOpen(row, row.curTaskName || "慰问审核")
|
||||
},
|
||||
// val 为流程提交类型：1 同意、20 不同意、6 退回；校验通过后打开历史栈确认框。
|
||||
handleTaskAction(val) {
|
||||
this.$refs.formRef.validate()
|
||||
.then(() => {
|
||||
this.$set(this, "confirmActionType", "task")
|
||||
this.$set(this, "pendingSubmitType", val)
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-action-confirm")) return
|
||||
this.$set(this, "confirmVisible", true)
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 确认操作时先回退确认框历史，再根据操作类型调用办理或撤回接口。
|
||||
confirmPendingAction() {
|
||||
this.closeActionConfirm(() => {
|
||||
if (this.confirmActionType === "revoke") {
|
||||
this.revokeTask()
|
||||
return
|
||||
}
|
||||
this.submitTaskAction()
|
||||
})
|
||||
},
|
||||
// 提交 processTaskId、taskName、tf_opinion、tf_sign 和 submitType，接口返回统一响应对象。
|
||||
submitTaskAction() {
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/platform/special_condolence/approval/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: this.pendingSubmitType
|
||||
})
|
||||
})
|
||||
.then((res) => {
|
||||
if (res && res.code === 0) {
|
||||
const afterClose = () => {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.closeAll(afterClose)) return
|
||||
this.$refs.infoRef.onClose(afterClose)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
closeActionConfirm(afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close("specialcondolence-action-confirm", afterClose)) return
|
||||
this.$set(this, "confirmVisible", false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
// row 提供待撤回任务 taskId，确认后保存当前行并由统一确认框执行撤回。
|
||||
onRevoke(row){
|
||||
this.$set(this, "confirmActionType", "revoke")
|
||||
this.$set(this, "pendingRevokeRow", row)
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-action-confirm")) return
|
||||
this.$set(this, "confirmVisible", true)
|
||||
},
|
||||
// 使用 pendingRevokeRow.taskId 撤回任务，接口返回统一响应对象。
|
||||
revokeTask() {
|
||||
if (!this.pendingRevokeRow) return
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/flow/common/revokeTask", {taskId: this.pendingRevokeRow.taskId})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
querySpecialCondolenceType() {
|
||||
this.$axios.post('/platform/special_condolence/type/querySpecialCondolenceType', {}, {h5SkeletonLoading: true})
|
||||
.then((res) => {
|
||||
const typeList = res.data || []
|
||||
this.$set(this, "typeOptions", [
|
||||
{
|
||||
text: "全部慰问类型",
|
||||
value: null
|
||||
}
|
||||
].concat(typeList.map((v) => ({ text: v.name, value: v.id }))))
|
||||
if (this.typeOptions.length > 0) {
|
||||
this.$set(this.pageForm, "type", this.typeOptions[0].value)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
this.$set(this, "historyLayerUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
|
||||
this.$set(this, "confirmVisible", stack.includes("specialcondolence-action-confirm"))
|
||||
}))
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (typeof this.historyLayerUnsubscribe === "function") this.historyLayerUnsubscribe()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+475
@@ -0,0 +1,475 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
#app {
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background: #f3f7fd;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .van-nav-bar,
|
||||
.specialcondolence-list-page .van-sticky--fixed {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .van-nav-bar .van-icon,
|
||||
.specialcondolence-list-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.specialcondolence-list-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background: #f3f7fd;
|
||||
}
|
||||
|
||||
.specialcondolence-list-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.specialcondolence-list-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.specialcondolence-list-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item,
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title--active,
|
||||
.specialcondolence-list-filter .van-dropdown-item__option--active,
|
||||
.specialcondolence-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-filter .van-dropdown-item__option .van-cell__title {
|
||||
display: flex;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton__card {
|
||||
margin-bottom: 12px;
|
||||
padding: 18px 14px 14px;
|
||||
border: 1px solid #e9eff7;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton__card .van-skeleton {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__title {
|
||||
width: 42%;
|
||||
height: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row {
|
||||
height: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:nth-child(2n) {
|
||||
width: 72% !important;
|
||||
}
|
||||
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:last-child {
|
||||
width: 34% !important;
|
||||
margin-top: 18px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .table-list-container {
|
||||
margin-top: 0;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .table-list-container .table-list-item {
|
||||
margin-bottom: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid #e9eff7;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
}
|
||||
|
||||
.specialcondolence-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.specialcondolence-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.specialcondolence-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.specialcondolence-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.specialcondolence-card-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.specialcondolence-card-status .van-tag {
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .item-actions {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top-color: #edf1f6;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn {
|
||||
min-height: 28px;
|
||||
padding: 4px 11px;
|
||||
border-radius: 14px;
|
||||
color: #1989fa;
|
||||
background: #eaf4ff;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn.delete {
|
||||
color: #f04444;
|
||||
background: #fff0f0;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn i {
|
||||
margin-right: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-page .empty-state {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.specialcondolence-list-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.specialcondolence-list-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.specialcondolence-list-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.specialcondolence-list-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="style-specialcondolence-info-h5">
|
||||
<!--#include("../common/info.css"){}#-->
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<div class="specialcondolence-list-page">
|
||||
<van-nav-bar title="我的申请" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<div class="specialcondolence-list-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="specialcondolence-list-search"
|
||||
placeholder="请输入姓名或者工号搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="specialcondolence-list-filter" :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.type" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<main class="specialcondolence-list-content">
|
||||
<div class="specialcondolence-list-skeleton" v-if="skeletonLoading">
|
||||
<div class="specialcondolence-list-skeleton__card" v-for="index in 3" :key="'mine-skeleton-' + index">
|
||||
<van-skeleton title :row="5" animated></van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<table-list api="/platform/special_condolence/mine/pageData" :page_form.sync="pageForm" ref="tableListRef"
|
||||
v-show="!skeletonLoading" :show_loading_overlay="false" @ready="onReady"
|
||||
@loading-change="handleListLoadingChange">
|
||||
<template #header="{index,row}">
|
||||
<div class="specialcondolence-card-header">
|
||||
<div class="specialcondolence-card-heading">
|
||||
<div class="specialcondolence-card-title">{{row.helpUserName || '--'}}</div>
|
||||
<div class="specialcondolence-card-code">工号：{{row.helpLoginName || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag class="specialcondolence-card-status" v-if="row.instanceState" :value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="慰问对象">{{row.helpUserName}}</table-column>
|
||||
<table-column label="慰问对象工号">{{row.helpLoginName}}</table-column>
|
||||
<table-column label="申请人">{{row.applyUserName}}</table-column>
|
||||
<table-column label="所属工会">{{row.applyUnionName}}</table-column>
|
||||
<table-column label="所属单位">{{row.applyUnitName}}</table-column>
|
||||
<table-column label="慰问类型">{{row.typeName}}</table-column>
|
||||
<table-column label="当前节点">{{row.taskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<van-icon name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onEdit(row)"
|
||||
v-if="row.taskKey === 'startTask' || !row.instanceId">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="action-btn delete" @click="onRevoke(row)"
|
||||
v-if="row.canRevoke">
|
||||
<van-icon name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
<div class="action-btn delete" @click="onDelete(row)"
|
||||
v-if="row.taskKey === 'startTask' || !row.instanceId">
|
||||
<van-icon name="delete-o"></van-icon>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="specialcondolence-list-empty">
|
||||
<img src="/assets/mobile/img/condolence/condolence-empty.png" alt="暂无慰问申请记录插画">
|
||||
<div class="specialcondolence-list-empty__title">暂无慰问申请记录</div>
|
||||
<div class="specialcondolence-list-empty__hint">当前筛选条件下暂时没有慰问申请</div>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</main>
|
||||
|
||||
<info ref="infoRef" page-key="specialcondolence-mine-detail"></info>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('../common/info.js'){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
info: specialcondolenceInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear(),
|
||||
type: null
|
||||
},
|
||||
typeOptions: [],
|
||||
skeletonLoading: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// state.initial 表示当前查询前列表为空，仅此阶段使用整组卡片骨架屏。
|
||||
handleListLoadingChange(state) {
|
||||
if (state.initial) this.$set(this, "skeletonLoading", state.loading)
|
||||
},
|
||||
onReady() {
|
||||
this.querySpecialCondolenceType()
|
||||
.then((typeList) => {
|
||||
this.$set(this, "typeOptions", [
|
||||
{
|
||||
text: "全部慰问类型",
|
||||
value: null
|
||||
}
|
||||
].concat(typeList.map((v) => ({ text: v.name, value: v.id }))))
|
||||
if (this.typeOptions.length > 0) {
|
||||
this.$set(this.pageForm, "type", this.typeOptions[0].value)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
onRevoke(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要撤回吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/flow/common/revokeTask", { taskId: row.startTaskId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onView(row) {
|
||||
this.$refs.infoRef.onOpen(row, "慰问详情")
|
||||
},
|
||||
onEdit(row) {
|
||||
this.$pjaxReplace("/platform/special_condolence/apply/h5?taskId=" + (row.startTaskId || "") + "&bizId=" + row.id)
|
||||
},
|
||||
onDelete(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要删除吗？"
|
||||
})
|
||||
.then(() => {
|
||||
this.$axios.post("/platform/special_condolence/mine/delete", { id: row.id }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
} else {
|
||||
this.$toast.fail(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
querySpecialCondolenceType() {
|
||||
return this.$axios.post('/platform/special_condolence/type/querySpecialCondolenceType', {}, {h5SkeletonLoading: true})
|
||||
.then((res) => res.data || [])
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+350
@@ -0,0 +1,350 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
#app { --color-primary: #1989fa; }
|
||||
.specialcondolence-list-page { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f3f7fd; }
|
||||
.specialcondolence-list-page .van-nav-bar, .specialcondolence-list-page .van-sticky--fixed { background: #fff; }
|
||||
.specialcondolence-list-page .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
|
||||
.specialcondolence-list-page .van-nav-bar .van-icon, .specialcondolence-list-page .van-nav-bar__text { color: #1989fa; }
|
||||
.specialcondolence-list-sticky { padding: 22px 12px 1px; box-sizing: border-box; background: #f3f7fd; }
|
||||
.specialcondolence-list-search { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .1); }
|
||||
.specialcondolence-list-search .van-search__content { height: 42px; padding-left: 12px; align-items: center; border-radius: 12px; background: #fff; }
|
||||
.specialcondolence-list-search .van-field__control { color: #263548; font-size: 14px; }
|
||||
.specialcondolence-list-search .van-field__control::placeholder { color: #a7b0bf; }
|
||||
.specialcondolence-list-filter { margin-bottom: 8px; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__bar { height: 44px; box-shadow: none; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item, .specialcondolence-list-filter .van-dropdown-menu__title { height: 44px; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item { align-items: center; justify-content: center; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title { display: inline-flex; align-items: center; line-height: 20px; color: #66758a; font-size: 14px; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title--active, .specialcondolence-list-filter .van-dropdown-item__option--active, .specialcondolence-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon { color: #1989fa; }
|
||||
.specialcondolence-list-filter .van-dropdown-item__content { width: calc(100% - 24px); margin: 0 12px; overflow: hidden; box-sizing: border-box; border-radius: 0 0 12px 12px; box-shadow: 0 10px 24px rgba(31, 65, 108, .14); }
|
||||
.specialcondolence-list-filter .van-dropdown-item__option { display: flex; min-height: 48px; padding: 0 16px; align-items: center; color: #46566c; font-size: 14px; }
|
||||
.specialcondolence-list-filter .van-dropdown-item__option .van-cell__title { display: flex; min-height: 20px; align-items: center; line-height: 20px; }
|
||||
.specialcondolence-list-content { padding: 0 12px; }
|
||||
.specialcondolence-list-skeleton { padding-top: 2px; }
|
||||
.specialcondolence-list-skeleton__card { margin-bottom: 12px; padding: 18px 14px 14px; border: 1px solid #e9eff7; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton { padding: 0; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__title { width: 42%; height: 18px; margin-bottom: 18px; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row { height: 14px; margin-top: 12px; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:nth-child(2n) { width: 72% !important; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:last-child { width: 34% !important; margin-top: 18px; margin-left: auto; }
|
||||
.specialcondolence-list-page .table-list-container { margin-top: 0; padding-bottom: 2px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item { margin-bottom: 12px; padding: 14px; border: 1px solid #e9eff7; border-radius: 12px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-card-header { display: flex; margin-bottom: 8px; align-items: flex-start; justify-content: space-between; }
|
||||
.specialcondolence-card-heading { min-width: 0; padding-right: 10px; flex: 1; }
|
||||
.specialcondolence-card-title { overflow: hidden; color: #253247; font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.specialcondolence-card-code { margin-top: 1px; color: #9ba6b6; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-card-status { display: inline-flex; flex: none; }
|
||||
.specialcondolence-card-status .van-tag { min-height: 24px; padding: 3px 9px; border: 0; border-radius: 12px; box-sizing: border-box; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .item-actions { margin-top: 10px; padding-top: 10px; border-top-color: #edf1f6; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn { min-height: 28px; padding: 4px 11px; border-radius: 14px; color: #1989fa; background: #eaf4ff; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn.delete { color: #f04444; background: #fff0f0; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn i { margin-right: 5px; font-size: 13px; }
|
||||
.specialcondolence-list-page .empty-state { padding: 0; }
|
||||
.specialcondolence-list-empty { display: flex; min-height: 280px; padding: 46px 18px 36px; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; }
|
||||
.specialcondolence-list-empty img { display: block; width: 86%; max-width: 290px; height: auto; object-fit: contain; }
|
||||
.specialcondolence-list-empty__title { margin-top: 14px; color: #50627a; font-size: 15px; font-weight: 600; line-height: 22px; }
|
||||
.specialcondolence-list-empty__hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
|
||||
</style>
|
||||
|
||||
<style id="style-specialcondolence-info-h5">
|
||||
<!--#include("../common/info.css"){}#-->
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<div class="specialcondolence-list-page">
|
||||
<van-nav-bar title="校工会办公室主任审批" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<div class="specialcondolence-list-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="specialcondolence-list-search"
|
||||
placeholder="请输入姓名或者工号搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="specialcondolence-list-filter" :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.type" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.approvalText" :options="approvalOptions" :multiple="false"
|
||||
@change="onApprovalFilterChange"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<main class="specialcondolence-list-content">
|
||||
<div class="specialcondolence-list-skeleton" v-if="skeletonLoading">
|
||||
<div class="specialcondolence-list-skeleton__card" v-for="index in 3" :key="'school-principal-approval-skeleton-' + index">
|
||||
<van-skeleton title :row="5" animated></van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<table-list api="/platform/special_condolence/schoolPrincipalApproval/pageData" :page_form.sync="pageForm" ref="tableListRef"
|
||||
v-show="!skeletonLoading" :show_loading_overlay="false" @ready="onReady"
|
||||
@loading-change="handleListLoadingChange">
|
||||
<template #header="{index,row}">
|
||||
<div class="specialcondolence-card-header">
|
||||
<div class="specialcondolence-card-heading">
|
||||
<div class="specialcondolence-card-title">{{row.helpUserName || '--'}}</div>
|
||||
<div class="specialcondolence-card-code">工号：{{row.helpLoginName || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag class="specialcondolence-card-status" v-if="row.instanceState" :value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="慰问对象">{{row.helpUserName}}</table-column>
|
||||
<table-column label="慰问对象工号">{{row.helpLoginName}}</table-column>
|
||||
<table-column label="申请人">{{row.applyUserName}}</table-column>
|
||||
<table-column label="所属工会">{{row.applyUnionName}}</table-column>
|
||||
<table-column label="所属单位">{{row.applyUnitName}}</table-column>
|
||||
<table-column label="慰问类型">{{row.typeName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<van-icon name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="specialcondolence-list-empty">
|
||||
<img src="/assets/mobile/img/condolence/condolence-empty.png" alt="暂无慰问审核记录插画">
|
||||
<div class="specialcondolence-list-empty__title">暂无慰问审核记录</div>
|
||||
<div class="specialcondolence-list-empty__hint">当前筛选条件下暂时没有慰问申请</div>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</main>
|
||||
|
||||
<info ref="infoRef" page-key="specialcondolence-school-principal-detail">
|
||||
<div v-if="showApprovalForm">
|
||||
<section class="specialcondolence-info-card">
|
||||
<h2 class="specialcondolence-info-card__title">
|
||||
审批意见<span class="specialcondolence-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
class="specialcondolence-audit-field"
|
||||
name="tf_opinion"
|
||||
type="textarea"
|
||||
rows="6"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
<h2 class="specialcondolence-info-card__title">
|
||||
审批签字<span class="specialcondolence-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-field name="tf_sign" :value="formData.tf_sign" :rules="[{required:true,message:'请完成审批签字'}]">
|
||||
<template #input><h5-signature v-model="formData.tf_sign" :key="formData.processTaskId"></h5-signature></template>
|
||||
</van-field>
|
||||
</van-form>
|
||||
</section>
|
||||
<div class="specialcondolence-popup-actions">
|
||||
<van-button class="specialcondolence-action-danger" type="danger" block :loading="formLoading" @click="handleTaskAction(6)">退回</van-button>
|
||||
<van-button class="specialcondolence-action-danger" type="danger" block :loading="formLoading" @click="handleTaskAction(2)">不同意</van-button>
|
||||
<van-button class="specialcondolence-action-primary" type="primary" block :loading="formLoading" @click="handleTaskAction(1)">同意</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</info>
|
||||
<van-dialog
|
||||
:value="confirmVisible"
|
||||
title="提示"
|
||||
:message="confirmActionType === 'revoke' ? '您确定要撤回吗？' : '您确定要提交吗？'"
|
||||
show-cancel-button
|
||||
confirm-button-color="#1989fa"
|
||||
@confirm="confirmPendingAction"
|
||||
@cancel="closeActionConfirm"
|
||||
></van-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('../common/info.js'){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
info: specialcondolenceInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: '',
|
||||
approvalText: "0",
|
||||
approval: false,
|
||||
year: new Date().getFullYear(),
|
||||
type: null,
|
||||
},
|
||||
typeOptions: [],
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
skeletonLoading: true,
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
formLoading: false,
|
||||
confirmVisible: false,
|
||||
confirmActionType: "task",
|
||||
pendingSubmitType: null,
|
||||
pendingRevokeRow: null,
|
||||
historyLayerUnsubscribe: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// state.initial 表示当前查询前列表为空，仅此阶段使用整组卡片骨架屏。
|
||||
handleListLoadingChange(state) {
|
||||
if (state.initial) this.$set(this, "skeletonLoading", state.loading)
|
||||
},
|
||||
// 审核状态下拉值为字符串，接口参数 approval 继续使用布尔值。
|
||||
onApprovalFilterChange(val) {
|
||||
this.$set(this.pageForm, "approval", val === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
onReady() {
|
||||
this.querySpecialCondolenceType()
|
||||
},
|
||||
onView(row) {
|
||||
this.$set(this, "showApprovalForm", false)
|
||||
this.$refs.infoRef.onOpen(row, "慰问详情")
|
||||
},
|
||||
onApproval(row) {
|
||||
this.$set(this, "showApprovalForm", true)
|
||||
this.$set(this, "formData", {
|
||||
processTaskId: row.taskId,
|
||||
taskName: row.curTaskName,
|
||||
tf_sign: "",
|
||||
tf_opinion: ""
|
||||
})
|
||||
this.$refs.infoRef.onOpen(row, row.curTaskName || "慰问审核")
|
||||
},
|
||||
// val 为流程提交类型：1 同意、20 不同意、6 退回；校验通过后打开历史栈确认框。
|
||||
handleTaskAction(val) {
|
||||
this.$refs.formRef.validate()
|
||||
.then(() => {
|
||||
this.$set(this, "confirmActionType", "task")
|
||||
this.$set(this, "pendingSubmitType", val)
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-action-confirm")) return
|
||||
this.$set(this, "confirmVisible", true)
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 确认操作时先回退确认框历史，再根据操作类型调用办理或撤回接口。
|
||||
confirmPendingAction() {
|
||||
this.closeActionConfirm(() => {
|
||||
if (this.confirmActionType === "revoke") {
|
||||
this.revokeTask()
|
||||
return
|
||||
}
|
||||
this.submitTaskAction()
|
||||
})
|
||||
},
|
||||
// 提交 processTaskId、taskName、tf_opinion、tf_sign 和 submitType，接口返回统一响应对象。
|
||||
submitTaskAction() {
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/platform/special_condolence/approval/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: this.pendingSubmitType
|
||||
})
|
||||
})
|
||||
.then((res) => {
|
||||
if (res && res.code === 0) {
|
||||
const afterClose = () => {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.closeAll(afterClose)) return
|
||||
this.$refs.infoRef.onClose(afterClose)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
closeActionConfirm(afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close("specialcondolence-action-confirm", afterClose)) return
|
||||
this.$set(this, "confirmVisible", false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
// row 提供待撤回任务 taskId，确认后保存当前行并由统一确认框执行撤回。
|
||||
onRevoke(row){
|
||||
this.$set(this, "confirmActionType", "revoke")
|
||||
this.$set(this, "pendingRevokeRow", row)
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-action-confirm")) return
|
||||
this.$set(this, "confirmVisible", true)
|
||||
},
|
||||
// 使用 pendingRevokeRow.taskId 撤回任务，接口返回统一响应对象。
|
||||
revokeTask() {
|
||||
if (!this.pendingRevokeRow) return
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/flow/common/revokeTask", {taskId: this.pendingRevokeRow.taskId})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
querySpecialCondolenceType() {
|
||||
this.$axios.post('/platform/special_condolence/type/querySpecialCondolenceType', {}, {h5SkeletonLoading: true})
|
||||
.then((res) => {
|
||||
const typeList = res.data || []
|
||||
this.$set(this, "typeOptions", [
|
||||
{
|
||||
text: "全部慰问类型",
|
||||
value: null
|
||||
}
|
||||
].concat(typeList.map((v) => ({ text: v.name, value: v.id }))))
|
||||
if (this.typeOptions.length > 0) {
|
||||
this.$set(this.pageForm, "type", this.typeOptions[0].value)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
this.$set(this, "historyLayerUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
|
||||
this.$set(this, "confirmVisible", stack.includes("specialcondolence-action-confirm"))
|
||||
}))
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (typeof this.historyLayerUnsubscribe === "function") this.historyLayerUnsubscribe()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+350
@@ -0,0 +1,350 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
#app { --color-primary: #1989fa; }
|
||||
.specialcondolence-list-page { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f3f7fd; }
|
||||
.specialcondolence-list-page .van-nav-bar, .specialcondolence-list-page .van-sticky--fixed { background: #fff; }
|
||||
.specialcondolence-list-page .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
|
||||
.specialcondolence-list-page .van-nav-bar .van-icon, .specialcondolence-list-page .van-nav-bar__text { color: #1989fa; }
|
||||
.specialcondolence-list-sticky { padding: 22px 12px 1px; box-sizing: border-box; background: #f3f7fd; }
|
||||
.specialcondolence-list-search { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .1); }
|
||||
.specialcondolence-list-search .van-search__content { height: 42px; padding-left: 12px; align-items: center; border-radius: 12px; background: #fff; }
|
||||
.specialcondolence-list-search .van-field__control { color: #263548; font-size: 14px; }
|
||||
.specialcondolence-list-search .van-field__control::placeholder { color: #a7b0bf; }
|
||||
.specialcondolence-list-filter { margin-bottom: 8px; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__bar { height: 44px; box-shadow: none; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item, .specialcondolence-list-filter .van-dropdown-menu__title { height: 44px; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__item { align-items: center; justify-content: center; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title { display: inline-flex; align-items: center; line-height: 20px; color: #66758a; font-size: 14px; }
|
||||
.specialcondolence-list-filter .van-dropdown-menu__title--active, .specialcondolence-list-filter .van-dropdown-item__option--active, .specialcondolence-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon { color: #1989fa; }
|
||||
.specialcondolence-list-filter .van-dropdown-item__content { width: calc(100% - 24px); margin: 0 12px; overflow: hidden; box-sizing: border-box; border-radius: 0 0 12px 12px; box-shadow: 0 10px 24px rgba(31, 65, 108, .14); }
|
||||
.specialcondolence-list-filter .van-dropdown-item__option { display: flex; min-height: 48px; padding: 0 16px; align-items: center; color: #46566c; font-size: 14px; }
|
||||
.specialcondolence-list-filter .van-dropdown-item__option .van-cell__title { display: flex; min-height: 20px; align-items: center; line-height: 20px; }
|
||||
.specialcondolence-list-content { padding: 0 12px; }
|
||||
.specialcondolence-list-skeleton { padding-top: 2px; }
|
||||
.specialcondolence-list-skeleton__card { margin-bottom: 12px; padding: 18px 14px 14px; border: 1px solid #e9eff7; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton { padding: 0; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__title { width: 42%; height: 18px; margin-bottom: 18px; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row { height: 14px; margin-top: 12px; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:nth-child(2n) { width: 72% !important; }
|
||||
.specialcondolence-list-skeleton__card .van-skeleton__row:last-child { width: 34% !important; margin-top: 18px; margin-left: auto; }
|
||||
.specialcondolence-list-page .table-list-container { margin-top: 0; padding-bottom: 2px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item { margin-bottom: 12px; padding: 14px; border: 1px solid #e9eff7; border-radius: 12px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
|
||||
.specialcondolence-card-header { display: flex; margin-bottom: 8px; align-items: flex-start; justify-content: space-between; }
|
||||
.specialcondolence-card-heading { min-width: 0; padding-right: 10px; flex: 1; }
|
||||
.specialcondolence-card-title { overflow: hidden; color: #253247; font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.specialcondolence-card-code { margin-top: 1px; color: #9ba6b6; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-card-status { display: inline-flex; flex: none; }
|
||||
.specialcondolence-card-status .van-tag { min-height: 24px; padding: 3px 9px; border: 0; border-radius: 12px; box-sizing: border-box; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .item-actions { margin-top: 10px; padding-top: 10px; border-top-color: #edf1f6; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn { min-height: 28px; padding: 4px 11px; border-radius: 14px; color: #1989fa; background: #eaf4ff; font-size: 12px; line-height: 18px; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn.delete { color: #f04444; background: #fff0f0; }
|
||||
.specialcondolence-list-page .table-list-container .table-list-item .action-btn i { margin-right: 5px; font-size: 13px; }
|
||||
.specialcondolence-list-page .empty-state { padding: 0; }
|
||||
.specialcondolence-list-empty { display: flex; min-height: 280px; padding: 46px 18px 36px; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; }
|
||||
.specialcondolence-list-empty img { display: block; width: 86%; max-width: 290px; height: auto; object-fit: contain; }
|
||||
.specialcondolence-list-empty__title { margin-top: 14px; color: #50627a; font-size: 15px; font-weight: 600; line-height: 22px; }
|
||||
.specialcondolence-list-empty__hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
|
||||
</style>
|
||||
|
||||
<style id="style-specialcondolence-info-h5">
|
||||
<!--#include("../common/info.css"){}#-->
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<div class="specialcondolence-list-page">
|
||||
<van-nav-bar title="校工会主席审批" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<div class="specialcondolence-list-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="specialcondolence-list-search"
|
||||
placeholder="请输入姓名或者工号搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="specialcondolence-list-filter" :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.type" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.approvalText" :options="approvalOptions" :multiple="false"
|
||||
@change="onApprovalFilterChange"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<main class="specialcondolence-list-content">
|
||||
<div class="specialcondolence-list-skeleton" v-if="skeletonLoading">
|
||||
<div class="specialcondolence-list-skeleton__card" v-for="index in 3" :key="'school-union-approval-skeleton-' + index">
|
||||
<van-skeleton title :row="5" animated></van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<table-list api="/platform/special_condolence/schoolUnionApproval/pageData" :page_form.sync="pageForm" ref="tableListRef"
|
||||
v-show="!skeletonLoading" :show_loading_overlay="false" @ready="onReady"
|
||||
@loading-change="handleListLoadingChange">
|
||||
<template #header="{index,row}">
|
||||
<div class="specialcondolence-card-header">
|
||||
<div class="specialcondolence-card-heading">
|
||||
<div class="specialcondolence-card-title">{{row.helpUserName || '--'}}</div>
|
||||
<div class="specialcondolence-card-code">工号：{{row.helpLoginName || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag class="specialcondolence-card-status" v-if="row.instanceState" :value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="慰问对象">{{row.helpUserName}}</table-column>
|
||||
<table-column label="慰问对象工号">{{row.helpLoginName}}</table-column>
|
||||
<table-column label="申请人">{{row.applyUserName}}</table-column>
|
||||
<table-column label="所属工会">{{row.applyUnionName}}</table-column>
|
||||
<table-column label="所属单位">{{row.applyUnitName}}</table-column>
|
||||
<table-column label="慰问类型">{{row.typeName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<van-icon name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="specialcondolence-list-empty">
|
||||
<img src="/assets/mobile/img/condolence/condolence-empty.png" alt="暂无慰问审核记录插画">
|
||||
<div class="specialcondolence-list-empty__title">暂无慰问审核记录</div>
|
||||
<div class="specialcondolence-list-empty__hint">当前筛选条件下暂时没有慰问申请</div>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</main>
|
||||
|
||||
<info ref="infoRef" page-key="specialcondolence-school-union-detail">
|
||||
<div v-if="showApprovalForm">
|
||||
<section class="specialcondolence-info-card">
|
||||
<h2 class="specialcondolence-info-card__title">
|
||||
审批意见<span class="specialcondolence-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
class="specialcondolence-audit-field"
|
||||
name="tf_opinion"
|
||||
type="textarea"
|
||||
rows="6"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
<h2 class="specialcondolence-info-card__title">
|
||||
审批签字<span class="specialcondolence-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-field name="tf_sign" :value="formData.tf_sign" :rules="[{required:true,message:'请完成审批签字'}]">
|
||||
<template #input><h5-signature v-model="formData.tf_sign" :key="formData.processTaskId"></h5-signature></template>
|
||||
</van-field>
|
||||
</van-form>
|
||||
</section>
|
||||
<div class="specialcondolence-popup-actions">
|
||||
<van-button class="specialcondolence-action-danger" type="danger" block :loading="formLoading" @click="handleTaskAction(6)">退回</van-button>
|
||||
<van-button class="specialcondolence-action-danger" type="danger" block :loading="formLoading" @click="handleTaskAction(2)">不同意</van-button>
|
||||
<van-button class="specialcondolence-action-primary" type="primary" block :loading="formLoading" @click="handleTaskAction(1)">同意</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</info>
|
||||
<van-dialog
|
||||
:value="confirmVisible"
|
||||
title="提示"
|
||||
:message="confirmActionType === 'revoke' ? '您确定要撤回吗？' : '您确定要提交吗？'"
|
||||
show-cancel-button
|
||||
confirm-button-color="#1989fa"
|
||||
@confirm="confirmPendingAction"
|
||||
@cancel="closeActionConfirm"
|
||||
></van-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('../common/info.js'){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
info: specialcondolenceInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: '',
|
||||
approvalText: "0",
|
||||
approval: false,
|
||||
year: new Date().getFullYear(),
|
||||
type: null,
|
||||
},
|
||||
typeOptions: [],
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
skeletonLoading: true,
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
formLoading: false,
|
||||
confirmVisible: false,
|
||||
confirmActionType: "task",
|
||||
pendingSubmitType: null,
|
||||
pendingRevokeRow: null,
|
||||
historyLayerUnsubscribe: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// state.initial 表示当前查询前列表为空，仅此阶段使用整组卡片骨架屏。
|
||||
handleListLoadingChange(state) {
|
||||
if (state.initial) this.$set(this, "skeletonLoading", state.loading)
|
||||
},
|
||||
// 审核状态下拉值为字符串，接口参数 approval 继续使用布尔值。
|
||||
onApprovalFilterChange(val) {
|
||||
this.$set(this.pageForm, "approval", val === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
onReady() {
|
||||
this.querySpecialCondolenceType()
|
||||
},
|
||||
onView(row) {
|
||||
this.$set(this, "showApprovalForm", false)
|
||||
this.$refs.infoRef.onOpen(row, "慰问详情")
|
||||
},
|
||||
onApproval(row) {
|
||||
this.$set(this, "showApprovalForm", true)
|
||||
this.$set(this, "formData", {
|
||||
processTaskId: row.taskId,
|
||||
taskName: row.curTaskName,
|
||||
tf_sign: "",
|
||||
tf_opinion: ""
|
||||
})
|
||||
this.$refs.infoRef.onOpen(row, row.curTaskName || "慰问审核")
|
||||
},
|
||||
// val 为流程提交类型：1 同意、20 不同意、6 退回；校验通过后打开历史栈确认框。
|
||||
handleTaskAction(val) {
|
||||
this.$refs.formRef.validate()
|
||||
.then(() => {
|
||||
this.$set(this, "confirmActionType", "task")
|
||||
this.$set(this, "pendingSubmitType", val)
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-action-confirm")) return
|
||||
this.$set(this, "confirmVisible", true)
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 确认操作时先回退确认框历史，再根据操作类型调用办理或撤回接口。
|
||||
confirmPendingAction() {
|
||||
this.closeActionConfirm(() => {
|
||||
if (this.confirmActionType === "revoke") {
|
||||
this.revokeTask()
|
||||
return
|
||||
}
|
||||
this.submitTaskAction()
|
||||
})
|
||||
},
|
||||
// 提交 processTaskId、taskName、tf_opinion、tf_sign 和 submitType，接口返回统一响应对象。
|
||||
submitTaskAction() {
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/platform/special_condolence/approval/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: this.pendingSubmitType
|
||||
})
|
||||
})
|
||||
.then((res) => {
|
||||
if (res && res.code === 0) {
|
||||
const afterClose = () => {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.closeAll(afterClose)) return
|
||||
this.$refs.infoRef.onClose(afterClose)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
closeActionConfirm(afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close("specialcondolence-action-confirm", afterClose)) return
|
||||
this.$set(this, "confirmVisible", false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
// row 提供待撤回任务 taskId，确认后保存当前行并由统一确认框执行撤回。
|
||||
onRevoke(row){
|
||||
this.$set(this, "confirmActionType", "revoke")
|
||||
this.$set(this, "pendingRevokeRow", row)
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open("specialcondolence-action-confirm")) return
|
||||
this.$set(this, "confirmVisible", true)
|
||||
},
|
||||
// 使用 pendingRevokeRow.taskId 撤回任务，接口返回统一响应对象。
|
||||
revokeTask() {
|
||||
if (!this.pendingRevokeRow) return
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/flow/common/revokeTask", {taskId: this.pendingRevokeRow.taskId})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
querySpecialCondolenceType() {
|
||||
this.$axios.post('/platform/special_condolence/type/querySpecialCondolenceType', {}, {h5SkeletonLoading: true})
|
||||
.then((res) => {
|
||||
const typeList = res.data || []
|
||||
this.$set(this, "typeOptions", [
|
||||
{
|
||||
text: "全部慰问类型",
|
||||
value: null
|
||||
}
|
||||
].concat(typeList.map((v) => ({ text: v.name, value: v.id }))))
|
||||
if (this.typeOptions.length > 0) {
|
||||
this.$set(this.pageForm, "type", this.typeOptions[0].value)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
this.$set(this, "historyLayerUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
|
||||
this.$set(this, "confirmVisible", stack.includes("specialcondolence-action-confirm"))
|
||||
}))
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (typeof this.historyLayerUnsubscribe === "function") this.historyLayerUnsubscribe()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user