This commit is contained in:
@jyuhsin
2025-09-05 15:10:51 +08:00
parent 43fd3c07fd
commit 6ad78e51ae
8 changed files with 310 additions and 216 deletions
@@ -132,14 +132,13 @@ body {
}
.list-card {
margin: 20px 10px;
margin: 10px;
background: #FFFFFF;
border-radius: 10px;
display: flex;
padding: 15px;
column-gap: 10px;
padding: 10px;
border-bottom: 1px solid #ededed;
box-sizing: border-box;
box-shadow: 0 8px 12px #ebedf0;
}
.list-card:not(:last-child){
@@ -162,6 +161,9 @@ body {
.list-card-body{
flex: 1;
}
.list-card-body .van-cell{
padding: 8px 16px;
}
.list-card-footer{
display: flex;
@@ -170,3 +172,88 @@ body {
margin-top: 10px;
flex-wrap: wrap;
}
.list-card-footer .van-button {
border-radius: 8px;
height: 28px;
padding: 0 12px;
}
.form-container {
padding: 0 16px;
font-family: "PingFang SC", sans-serif;
}
/* 分段标题样式 */
.form-section {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 12px #ebedf0;
}
/* 弹出选择器样式 */
.picker-style {
background-color: #f5f5f5;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* 输入文本区域样式 */
.van-field__control {
font-size: 14px;
color: #333;
}
.van-field__control input,
.van-field__control textarea {
font-size: 14px;
color: #333;
border-radius: 6px;
padding: 8px 12px;
background-color: #f9f9f9;
}
/* 提交按钮样式 */
.submit-btn {
margin: 20px 16px 30px;
border-radius: 24px;
overflow: hidden;
}
.submit-many-btn {
margin: 20px 16px 30px;
border-radius: 24px;
overflow: hidden;
display: flex;
justify-content: space-evenly;
}
.submit-btn .van-button {
height: 48px;
font-size: 16px;
font-weight: bold;
}
.submit-many-btn .van-button {
height: 48px;
font-size: 16px;
font-weight: bold;
}
.van-cell-group__title {
font-weight: bold;
color: #1867B0;
display: inline-block; /* 确保伪元素正常排列 */
}
.van-cell-group__title::before {
content: '';
display: inline-block;
width: 4px;
height: 1em; /* 高度随字体大小变化,更自适应 */
background-color: #1867B0;
border-radius: 2px;
margin-right: 8px;
vertical-align: middle; /* 垂直居中对齐 */
position: relative;
top: -1px;
}
.more-text .van-field__label{
width: 100%;
}
.more-text {
display: inline-block;
}
@@ -1,12 +1,19 @@
<template>
<div>
<template v-for="item in options">
<el-tag :key="item[value_key]" v-if="item[value_key] === value" v-bind="$attrs"
:type="item.type"
>{{ item[label_key] }}
</el-tag>
</template>
</div>
<div>
<template v-if="mode === 'pc'" v-for="item in options">
<el-tag :key="item[value_key]" v-if="item[value_key] === value" v-bind="$attrs"
:type="item.type"
>{{ item[label_key] }}
</el-tag>
</template>
<template v-if="mode === 'h5'" v-for="item in options">
<van-tag :key="item[value_key]" v-if="item[value_key] === value" v-bind="$attrs"
:type="item.type">
{{ item[label_key] }}
</van-tag>
</template>
</div>
</template>
<script>
@@ -15,73 +22,80 @@ const enumCache = {}
const requestPromises = {}
module.exports = {
name: "DictTag",
props: {
value: {type: String | Number},
name: {type: String},
value_key: {
type: String,
default: "code"
name: "DictTag",
props: {
value: { type: String | Number },
name: { type: String },
value_key: {
type: String,
default: "code"
},
label_key: {
type: String,
default: "name"
},
mode: {
type: String,
default: "pc"
}
},
label_key: {
type: String,
default: "name"
}
},
data() {
return {
options: []
}
},
watch: {
code: {
handler(val) {
this.getEnumOptions()
},
immediate: true
}
},
methods: {
getEnumOptions() {
// // 检查数据缓存
// if (enumCache[this.name]) {
// this.options = enumCache[this.name]
// return
// }
//
// // 检查是否已有相同请求在进行中
// if (requestPromises[this.name]) {
// requestPromises[this.name].then(data => {
// this.options = data
// })
// return
// }
data() {
return {
options: []
}
},
watch: {
code: {
handler(val) {
this.getEnumOptions()
},
immediate: true
}
},
methods: {
getEnumOptions() {
// // 检查数据缓存
// if (enumCache[this.name]) {
// this.options = enumCache[this.name]
// return
// }
//
// // 检查是否已有相同请求在进行中
// if (requestPromises[this.name]) {
// requestPromises[this.name].then(data => {
// this.options = data
// })
// return
// }
// 创建请求Promise并缓存
requestPromises[this.name] = $.get("/open/common/dictEnumOptions", {name: this.name})
.then(res => {
if (res.code === 0) {
// 存入数据缓存
enumCache[this.name] = res.data
// 清除请求Promise缓存
delete requestPromises[this.name]
return res.data
}
})
// 创建请求Promise并缓存
requestPromises[this.name] = $.get("/open/common/dictEnumOptions", { name: this.name })
.then(res => {
if (res.code === 0) {
// 存入数据缓存
enumCache[this.name] = res.data
// 清除请求Promise缓存
delete requestPromises[this.name]
return res.data
}
})
requestPromises[this.name].then(data => {
this.options = data
})
}
},
created() {
requestPromises[this.name].then(data => {
this.options = data
})
}
},
created() {
}
}
</script>
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
margin-left: 10px;
}
.van-tag {
padding: 4px 8px;
}
</style>
@@ -105,6 +105,7 @@ module.exports = {
}
})
} else {
val = JSON.parse(val)
this.fileList = val.map((v) => {
return {
...v,
@@ -364,6 +364,7 @@
Vue.component("svg-icon", httpVueLoader("/components/plugins/sysSvgIcon/index.vue?v=" + new Date().getTime()))
Vue.component("year-van-dropdown-item", httpVueLoader("/components/plugins/vantMore/yearVanDropDownItem.vue?v=" + new Date().getTime()))
Vue.component("van-text-dialog", httpVueLoader("/components/plugins/vantMore/vantTextDialog.vue?v=" + new Date().getTime()))
Vue.component("enum-tag", httpVueLoader("/components/plugins/sysEnum/EnumTag.vue?v=" + new Date().getTime()))
</script>
</head>
<body>
@@ -8,47 +8,6 @@ layout("/layouts/platform_h5.html"){
height: 100vh;
overflow-y: auto;
}
.form-container {
padding: 0 16px;
font-family: "PingFang SC", sans-serif;
}
/* 分段标题样式 */
.form-section {
border-radius: 12px;
overflow: hidden;
}
/* 协会选择字段样式 */
.club-field .van-field__label {
width: 90px !important;
}
.club-field .van-cell__value {
color: #333;
}
/* 弹出选择器样式 */
.picker-style {
background-color: #f5f5f5;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* 输入文本区域样式 */
.van-field__control {
font-size: 14px;
color: #333;
}
.van-field__control input,
.van-field__control textarea {
font-size: 14px;
color: #333;
border-radius: 6px;
padding: 8px 12px;
background-color: #f9f9f9;
}
/* 同意条款样式 */
.agree-section {
padding: 16px;
@@ -61,28 +20,6 @@ layout("/layouts/platform_h5.html"){
line-height: 1.5;
color: #666;
}
/* 提交按钮样式 */
.submit-btn {
margin: 20px 16px 30px;
background: linear-gradient(to right, #4a90e2, #5ab1ef);
border-radius: 24px;
overflow: hidden;
}
.submit-btn .van-button {
height: 48px;
font-size: 16px;
font-weight: bold;
}
.van-cell-group__title {
font-weight: bold;
}
.more-text .van-field__label{
width: 100%;
}
.more-text {
display: inline-block;
}
</style>
<div id="app">
@@ -90,7 +27,7 @@ layout("/layouts/platform_h5.html"){
<van-nav-bar title="文体协会会员申请" left-text="返回" left-arrow @click-left="historyBack"></van-nav-bar>
<!-- 表单容器 -->
<van-form @submit="doSubmit" ref="formRef" class="form-container">
<van-form ref="formRef" class="form-container">
<!-- 协会信息 -->
<van-cell-group title="协会信息" class="form-section">
<van-field
@@ -101,8 +38,8 @@ layout("/layouts/platform_h5.html"){
required
is-link
readonly
name="clubName"
@click="showClubPopup = true"
class="club-field"
></van-field>
<van-popup v-model:show="showClubPopup" position="bottom">
<van-picker
@@ -191,8 +128,10 @@ layout("/layouts/platform_h5.html"){
</van-cell-group>
<!-- 提交按钮 -->
<div class="submit-btn">
<van-button round block type="info">提交申请</van-button>
<div class="submit-many-btn">
<van-button native-type="button" @click="onSave" round type="info">保存申请</van-button>
<van-button native-type="submit" @click="onSubmit" round type="info" v-if="!taskId">提交申请</van-button>
<van-button native-type="submit" @click="onFinishTask" round type="info" v-else>提交申请</van-button>
</div>
</van-form>
</div>
@@ -204,6 +143,8 @@ layout("/layouts/platform_h5.html"){
components: {},
data() {
return {
bizId: GetQueryString("bizId"),
taskId: GetQueryString("taskId"),
formData: {
clubId: "",
clubName: "",
@@ -230,13 +171,55 @@ layout("/layouts/platform_h5.html"){
}
},
methods: {
onClubConfirm(value, index) {
this.formData.clubId = this.clubOptions[index].id;
this.formData.clubName = value;
this.showClubPopup = false;
// 检查是否已申请该协会
this.checkApplyClub(this.formData.clubId);
onSave() {
this.$dialog.confirm({
title: "提示",
message: "您确定保存吗?"
}).then(() => {
this.$axios.post('/platform/club/join/apply/save', {data: JSON.stringify(this.formData)}).then(res => {
if (res.code === 0) {
this.$toast(res.msg);
this.$pjaxReplace("/platform/h5/club/mine")
}
})
})
},
async onSubmit() {
if (!this.isAgree) {
this.$toast.fail("请先阅读并同意协议");
return;
}
await this.$refs.formRef.validate()
this.$dialog.confirm({
title: "提示",
message: "您确定要提交申请吗?"
}).then(() => {
this.$axios.post("/platform/club/join/apply/submit", this.formData).then(res => {
if (res.code === 0) {
this.$toast(res.msg);
this.$pjaxReplace("/platform/h5/club/mine")
}
});
});
},
onFinishTask() {
this.$refs.formRef.validate((valid) => {
if (valid) {
if (!this.isAgree) {
this.$message.warning("请先阅读并同意协议")
return
}
this.$axios.post('/platform/club/join/apply/submitAgain', {
data: JSON.stringify(this.formData),
taskId: GetQueryString("taskId")
}).then(res => {
if (res.code === 0) {
this.$toast(res.msg);
this.$pjaxReplace("/platform/h5/club/mine")
}
})
}
})
},
checkApplyClub(clubId) {
this.$axios.post("/platform/club/join/apply/checkApplyClub", { clubId }).then(res => {
@@ -247,6 +230,14 @@ layout("/layouts/platform_h5.html"){
}
});
},
onClubConfirm(value, index) {
this.formData.clubId = this.clubOptions[index].id;
this.formData.clubName = value;
this.showClubPopup = false;
// 检查是否已申请该协会
this.checkApplyClub(this.formData.clubId);
},
listClub() {
this.$axios.post("/platform/club/common/listClub").then(res => {
if (res.code === 0) {
@@ -255,34 +246,36 @@ layout("/layouts/platform_h5.html"){
});
},
init() {
const user = this.$store.state.user;
this.formData.userId = user.id;
this.formData.userName = user.username;
this.formData.loginName = user.loginname;
this.formData.unitName = user.unit ? user.unit.name : null;
this.formData.unionName = user.union ? user.union.name : null;
this.formData.sex = user.sex;
this.formData.education = user.education;
this.formData.technicalTitle = user.technicalTitle;
this.formData.governmentPosition = user.governmentPosition;
},
doSubmit() {
if (!this.isAgree) {
this.$toast.fail("请先阅读并同意协议");
return;
this.bizId = GetQueryString("bizId")
if (GetQueryString("clubId")) {
this.$set(this.formData, "clubId", GetQueryString("clubId"))
}
this.$dialog.confirm({
title: "提示",
message: "您确定要提交申请吗?"
}).then(() => {
this.$axios.post("/platform/club/join/apply/submit", this.formData).then(res => {
if (this.bizId) {
this.$axios.post("/platform/club/join/apply/info", { id: this.bizId }).then((res) => {
if (res.code === 0) {
this.$toast(res.msg);
this.$pjaxReplace("/platform/club/join/mine")
this.formData = res.data
this.isAgree = true
}
});
});
}
})
} else {
const user = this.$store.state.user
this.$set(this.formData, "userId", user.id)
this.$set(this.formData, "userName", user.username)
this.$set(this.formData, "loginName", user.loginname)
this.$set(this.formData, "unitId", user.unit ? user.unit.id : null)
this.$set(this.formData, "unitName", user.unit ? user.unit.name : null)
this.$set(this.formData, "unionId", user.union ? user.union.id : null)
this.$set(this.formData, "unionName", user.union ? user.union.name : null)
this.$set(this.formData, "sex", user.sex)
this.$set(this.formData, "birthday", "${@auth.getPrincipalProperty('birthday'),'yyyy-MM-dd'}")
this.$set(this.formData, "nation", user.nation)
this.$set(this.formData, "political", user.political)
this.$set(this.formData, "education", user.education)
this.$set(this.formData, "technicalTitle", user.technicalTitle)
this.$set(this.formData, "position", user.position)
this.$set(this.formData, "academicDegree", user.academicDegree)
}
},
},
created() {
this.listClub();
@@ -39,8 +39,8 @@ const clubUserJoin = {
}
},
methods: {
onOpen(id) {
this.$axios.post("/platform/club/join/common/info", { id }).then((res) => {
onOpen(row) {
this.$axios.post("/platform/club/join/mine/info", { id: row.id }).then((res) => {
if (res.code === 0) {
this.viewData = res.data
}
@@ -10,7 +10,7 @@ layout("/layouts/platform_h5.html"){
<div id="app">
<van-sticky>
<van-nav-bar title="我的申请" left-text="返回" left-arrow @click-left="$pjaxReplace('/platform/h5/home')"></van-nav-bar>
<van-nav-bar title="我的申请" left-text="返回" left-arrow @click-left="historyBack"></van-nav-bar>
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
<van-dropdown-item :options="yearList" @change="doSearch" v-model="pageForm.year"></van-dropdown-item>
</van-dropdown-menu>
@@ -18,30 +18,26 @@ layout("/layouts/platform_h5.html"){
<div>
<van-list v-if="tableData.length>0" v-model="tableLoading" :finished="tableFinished" finished-text="没有更多了" @load="pageData">
<div class="table-list">
<div class="table-card" v-for="row in tableData" :key="row.id">
<div class="list-card" v-for="row in tableData" :key="row.id">
<div class="list-card-body">
<van-cell title="姓名" :value="row.userName"></van-cell>
<van-cell title="工号" :value="row.loginName"></van-cell>
<van-cell title="协会名称" :value="row.clubName"></van-cell>
<van-cell title="申请模式" :value="row.mode ? '加入' : '退出'"></van-cell>
<van-cell title="申请时间" :value="row.applyDate"></van-cell>
<van-cell title="当前节点" :value="row.processInstanceNodeName"></van-cell>
<van-cell class="table-card-footer">
<van-button type="info" size="small" @click="onOpen(row)">查看</van-button>
<van-button @click="openEdit(row)" v-if="[10,40,70].includes(row.processInstanceNodeCode)" size="small">编辑</van-button>
<van-button
@click="openRevoke(row)"
v-if="[20].includes(row.processInstanceNodeCode) && !row.nextTaskIsComplete"
size="small"
type="danger"
>
撤销
</van-button>
<van-button v-if="[10].includes(row.processInstanceNodeCode)" @click="doDelete(row.id)" size="small" type="danger">
删除
</van-button>
<van-cell title="当前节点" :value="row.taskName"></van-cell>
<van-cell title="流程状态">
<enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" mode="h5" label_key="message" size="small"></enum-tag>
</van-cell>
</div>
<div class="list-card-footer">
<van-button type="info" size="small" @click="openView(row)">查看</van-button>
<van-button type="info" v-if="row.taskKey === 'startTask' || !row.instanceId" @click="onEdit(row)" size="small">编辑</van-button>
<van-button type="danger" v-if="row.canRevoke" @click="openRevoke(row)" size="small">撤销</van-button>
<van-button type="danger" v-if="row.taskKey === 'startTask' || !row.instanceId" @click="onDelete(row.id)" size="small" >
删除
</van-button>
</div>
</div>
</van-list>
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
@@ -59,7 +55,7 @@ layout("/layouts/platform_h5.html"){
<script>
<!--#include('../common/clubUserJoin.js'){}#-->
const vue = new Vue({
new Vue({
el: "#app",
store,
components: {
@@ -81,36 +77,29 @@ layout("/layouts/platform_h5.html"){
}
},
methods: {
onOpen(row) {
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.pageData()
}
});
});
},
openView(row) {
this.viewShow = true
this.$nextTick(() => {
this.$refs.infoRef.onOpen(row.id)
this.$refs.infoRef.onOpen(row)
})
},
doSearch() {
this.pageForm.pageNumber = 1
this.tableData = []
this.finished = false
this.pageData()
onEdit(row) {
this.$pjaxReplace('/platform/h5/club/apply?taskId=' + (row.startTaskId || '') + "&bizId=" + row.id)
},
openRevoke(row) {
this.$dialog.confirm({
title: "提示",
message: "您确定要撤销申请吗?"
})
.then(() => {
this.$axios.post("/platform/club/join/mine/revokeApply", { id: row.id }).then((res) => {
if (res.code === 0) {
this.$toast.success(res.msg)
this.doSearch()
} else {
this.$toast.fail(res.msg)
}
})
})
.catch(() => {})
},
doDelete(row) {
onDelete(row) {
this.$dialog.confirm({
title: "提示",
message: "确定要删除此申请吗?"
@@ -127,6 +116,12 @@ layout("/layouts/platform_h5.html"){
})
.catch(() => {})
},
doSearch() {
this.pageForm.pageNumber = 1
this.tableData = []
this.finished = false
this.pageData()
},
pageData() {
this.tableLoading = true
this.$axios.post("/platform/club/join/mine/pageData", this.pageForm).then((res) => {