迁移
This commit is contained in:
liuye
60
project/biaopin/AppGeneralElection/AppGeneralElection.vue
Normal file
60
project/biaopin/AppGeneralElection/AppGeneralElection.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppGeneralElection">
|
||||||
|
<keep-alive :include="['electionList']">
|
||||||
|
<component ref="component" :is="component" :instance="instance" :params="params" :dict="dict" @change="onChange"/>
|
||||||
|
</keep-alive>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import electionList from "./components/electionList.vue";
|
||||||
|
import electionAdd from "./components/electionAdd.vue";
|
||||||
|
import Statistics from "./components/Statistics.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppGeneralElection",
|
||||||
|
label: "换届选举",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
components: {electionAdd, electionList,Statistics},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: "electionList",
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === "electionAdd") {
|
||||||
|
this.component = "electionAdd";
|
||||||
|
this.params = data.params;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "Statistics") {
|
||||||
|
this.component = "Statistics";
|
||||||
|
this.params = data.params;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === "electionList") {
|
||||||
|
this.component = "electionList";
|
||||||
|
this.params = data.params;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (data.isRefresh) {
|
||||||
|
this.$refs.component.getList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppGeneralElection {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
152
project/biaopin/AppGeneralElection/components/Statistics.vue
Normal file
152
project/biaopin/AppGeneralElection/components/Statistics.vue
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<ai-detail class="Statistics">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="投票实况" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-title title="本届任职" isShowBottomBorder></ai-title>
|
||||||
|
<div class="basicinfo-box">
|
||||||
|
<div><span>已投人数：</span><span>{{ data.alreadyCount || 0 }}</span></div>
|
||||||
|
<div><span>未投人数：</span><span>{{ data.notYetCount || 0 }}</span></div>
|
||||||
|
<div><span>日期：</span><span>{{ data.dateTime || '' }}</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ai-title title="候选人选票统计" isShowBottomBorder></ai-title>
|
||||||
|
|
||||||
|
<div class="echarts-box">
|
||||||
|
<div id="echarts-bar"></div>
|
||||||
|
<!-- <ai-empty class="empty"></ai-empty> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
name: "Statistics",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data: {},
|
||||||
|
myChart: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getStatistics()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getStaBar()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel (isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'electionList',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getStatistics() {
|
||||||
|
this.instance.post(`/app/appgeneralelectioninfo/statistics?id=${this.params.id}`).then(res=> {
|
||||||
|
if(res?.data) {
|
||||||
|
this.data = res.data
|
||||||
|
this.statistics = res.data.statistics
|
||||||
|
let xData = res.data.statistics.map(e=> e.candidate_user_name)
|
||||||
|
let yData1 = res.data.statistics.map(e=> e.c1)
|
||||||
|
let yData2 = res.data.statistics.map(e=> e.c2)
|
||||||
|
let yData3 = res.data.statistics.map(e=> e.c3)
|
||||||
|
this.getStaBar(xData,yData1,yData2,yData3)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getStaBar(xData,yData1,yData2,yData3) {
|
||||||
|
let chartDom = document.getElementById('echarts-bar')
|
||||||
|
this.myChart = echarts.init(chartDom);
|
||||||
|
this.myChart.setOption({
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "slider",
|
||||||
|
xAxisIndex: [0],
|
||||||
|
filterMode: "filter",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
data: ['支持', '反对', '弃票']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xData,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
alignTicks: true,
|
||||||
|
},
|
||||||
|
series: [ // 支持、反对、弃票
|
||||||
|
{
|
||||||
|
name: '支持',
|
||||||
|
data: yData1,
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(180, 180, 180, 0.2)'
|
||||||
|
},
|
||||||
|
barWidth: 22,
|
||||||
|
barGap: '20%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '反对',
|
||||||
|
data: yData2,
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(180, 180, 180, 0.2)'
|
||||||
|
},
|
||||||
|
barWidth: 22,
|
||||||
|
barGap: '20%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '弃票',
|
||||||
|
data: yData3,
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(180, 180, 180, 0.2)'
|
||||||
|
},
|
||||||
|
barWidth: 22,
|
||||||
|
barGap: '20%',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Statistics {
|
||||||
|
.basicinfo-box {
|
||||||
|
display: flex;
|
||||||
|
margin: 20px 0;
|
||||||
|
div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echarts-box {
|
||||||
|
// width: 100%;
|
||||||
|
|
||||||
|
#echarts-bar {
|
||||||
|
width: 1200px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
284
project/biaopin/AppGeneralElection/components/electionAdd.vue
Normal file
284
project/biaopin/AppGeneralElection/components/electionAdd.vue
Normal file
@@ -0,0 +1,284 @@
|
|||||||
|
<template>
|
||||||
|
<section class="electionAdd">
|
||||||
|
<ai-detail v-show="id && !isEdit">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="换届选举详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-card :title="info.title">
|
||||||
|
<template #right>
|
||||||
|
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="isEdit==false && info.status==0" @click="update">修改</span>
|
||||||
|
</template>
|
||||||
|
<template #content v-if="isEdit == false">
|
||||||
|
<ai-wrapper>
|
||||||
|
<ai-info-item label="投票说明" :value="info.votingInstructions"></ai-info-item>
|
||||||
|
<ai-info-item label="单位名称" :value="info.organizationName"></ai-info-item>
|
||||||
|
<ai-info-item label="选举方式">
|
||||||
|
{{ info.electionMethod==0? '等额':'差额'}}
|
||||||
|
<el-tooltip class="item" effect="dark" content="差额选举：候选人数多于应选人数的选举方式；
|
||||||
|
等额选举：候选人数与应选人数相等的选举方式。" placement="top">
|
||||||
|
<i class="el-icon-info" style="margin-right: 8px"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="应选人数" :value="info.candidatesNumber"></ai-info-item>
|
||||||
|
<ai-info-item label="投票日期" :value="info.votingDate"></ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="参会人员信息">
|
||||||
|
<template #content v-if="isEdit == false">
|
||||||
|
<ai-wrapper>
|
||||||
|
<ai-info-item label="候选人" isLine>
|
||||||
|
<span v-for="(item,index) in candidateUsersList" :key="index">
|
||||||
|
{{ item }}
|
||||||
|
<span v-if="index < candidateUsersList.length - 1">、</span>
|
||||||
|
</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="投票人" isLine>
|
||||||
|
<span v-for="(item,index) in voteUsersList" :key="index">
|
||||||
|
{{ item }}
|
||||||
|
<span v-if="index < voteUsersList.length - 1">、</span>
|
||||||
|
</span>
|
||||||
|
</ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
<ai-detail v-show="!id || isEdit==true">
|
||||||
|
<ai-title slot="title" :title="id? '编辑换届选举':'添加换届选举'" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-card title="基本信息">
|
||||||
|
<template #content>
|
||||||
|
<div class="tips" v-if="!id"><i class="el-icon-warning"></i>换届选举仅采取不记名（匿名）投票</div>
|
||||||
|
<div class="add-form">
|
||||||
|
<el-form ref="form" :model="form" :rules="formRules" size="small" label-width="150px">
|
||||||
|
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<el-input v-model="form.title" placeholder="请输入" show-word-limit maxlength="100"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="投票说明">
|
||||||
|
<el-input type="textarea" :rows="5" v-model="form.votingInstructions" placeholder="请输入" show-word-limit maxlength="500"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="单位名称" prop="organizationName">
|
||||||
|
<el-input size="small" disabled placeholder="请选择所属党组织" v-model="form.organizationName">
|
||||||
|
<template slot="append">
|
||||||
|
<ai-party :instance="instance" size="small" :value="form.partyOrgId" @origin="handlePartyOrgSelect"/>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="选举方式" prop="electionMethod">
|
||||||
|
<el-tooltip class="item" effect="dark" content="差额选举：候选人数多于应选人数的选举方式；
|
||||||
|
等额选举：候选人数与应选人数相等的选举方式。" placement="top">
|
||||||
|
<i class="el-icon-info" style="margin-right: 8px"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<el-radio v-model="form.electionMethod" label="0">等额</el-radio>
|
||||||
|
<el-radio v-model="form.electionMethod" label="1">差额</el-radio>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :span="20">
|
||||||
|
<el-form-item label="应选人数" prop="chooseNumber">
|
||||||
|
<el-input type="number" v-model="form.chooseNumber" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
<el-form-item label="投票日期" prop="votingDate">
|
||||||
|
<el-date-picker v-model="form.votingDate" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期" style="width:338px">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-form-item label="候选人" prop="candidateUsers">
|
||||||
|
<ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseCandidateList"
|
||||||
|
:url="`/app/appparty/list?partyOrgId=${form.partyOrgId}`" headerTitle="党员列表"
|
||||||
|
:isMultiple="true" dialogTitle="选择" @selectPerson="selectCandidate" class="aipersonselect">
|
||||||
|
<template name="option" v-slot:option="{ item }">
|
||||||
|
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||||||
|
<span>{{ item.phone }}</span>
|
||||||
|
<span>{{ item}}</span>
|
||||||
|
</template>
|
||||||
|
</ai-person-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="投票人" prop="voteUsers">
|
||||||
|
<ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseVoteList"
|
||||||
|
:url="`/app/appparty/list?partyOrgId=${form.partyOrgId}`" headerTitle="党员列表"
|
||||||
|
:isMultiple="true" dialogTitle="选择" @selectPerson="selectVote" class="aipersonselect">
|
||||||
|
<template name="option" v-slot:option="{ item }">
|
||||||
|
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||||||
|
<ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
|
||||||
|
</template>
|
||||||
|
</ai-person-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
|
||||||
|
<el-button class="footer-btn" type="primary" @click="confirm()">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "electionAdd",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
let validCandidate = (rule, value, callback) => {
|
||||||
|
if (!value.length) {
|
||||||
|
return callback(new Error('请选择候选人'));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let validVote = (rule, value, callback) => {
|
||||||
|
if (!value.length) {
|
||||||
|
return callback(new Error('请选择投票人'));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
title: '',
|
||||||
|
votingInstructions: '',
|
||||||
|
organizationName: '',
|
||||||
|
electionMethod: '',
|
||||||
|
chooseNumber: '',
|
||||||
|
votingDate: '',
|
||||||
|
candidateUsers: [],
|
||||||
|
voteUsers: [],
|
||||||
|
partyOrganizations: [],
|
||||||
|
partyOrgId: ''
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
title: [{required: true, message: "请输入标题", trigger: "blur"}],
|
||||||
|
organizationName: [{required: true, message: "请选择党组织", trigger: "blur"}],
|
||||||
|
electionMethod: [{required: true, message: "请选择选举方式", trigger: "blur"}],
|
||||||
|
chooseNumber: [{required: true, message: "请输入应选人数", trigger: "blur"}],
|
||||||
|
votingDate: [{required: true, message: "请选择投票日期", trigger: "blur"}],
|
||||||
|
candidateUsers: [{required: true,validator: validCandidate, trigger: "blur"}],
|
||||||
|
voteUsers: [{required: true,validator: validVote, trigger: "blur"}],
|
||||||
|
},
|
||||||
|
id: '',
|
||||||
|
isEdit: false,
|
||||||
|
info: {},
|
||||||
|
candidateUsersList: '',
|
||||||
|
voteUsersList: '',
|
||||||
|
chooseCandidateList: [],
|
||||||
|
chooseVoteList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if(this.params && this.params.id) {
|
||||||
|
this.id = this.params.id
|
||||||
|
this.getDetail()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel (isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'electionList',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
},
|
||||||
|
update() {
|
||||||
|
this.isEdit = true
|
||||||
|
this.getDetail()
|
||||||
|
},
|
||||||
|
getDetail() {
|
||||||
|
this.instance.post(`/app/appgeneralelectioninfo/queryDetailById`,null, {
|
||||||
|
params: {id:this.id}
|
||||||
|
}).then((res) => {
|
||||||
|
if(res?.data) {
|
||||||
|
this.form = res.data
|
||||||
|
this.form.organizationName = res.data.partyOrganizations[0].name
|
||||||
|
this.info = res.data
|
||||||
|
this.candidateUsersList = res.data.candidateUsers.map(v=> v.name)
|
||||||
|
this.voteUsersList = res.data.voteUsers.map(v=> v.name)
|
||||||
|
this.chooseCandidateList = res.data.candidateUsers
|
||||||
|
this.chooseVoteList = res.data.voteUsers
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
selectCandidate(v) {
|
||||||
|
this.form.candidateUsers = v
|
||||||
|
},
|
||||||
|
selectVote(e) {
|
||||||
|
this.form.voteUsers = e
|
||||||
|
},
|
||||||
|
handlePartyOrgSelect(v) {
|
||||||
|
if(v) {
|
||||||
|
this.form.organizationName = v[0]?.name
|
||||||
|
this.form.partyOrganizations = [v[0]]
|
||||||
|
this.form.partyOrgId = v[0]?.id
|
||||||
|
} else {
|
||||||
|
this.form.organizationName = this.chooseUserList[0]?.name
|
||||||
|
this.form.partyOrganizations = this.chooseUserList
|
||||||
|
}
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if(this.form.electionMethod == 0) {
|
||||||
|
if(this.form.chooseNumber != this.form.candidateUsers.length) {
|
||||||
|
return this.$message.error('候选人数与应选人数应相等')
|
||||||
|
}
|
||||||
|
} else if(this.form.electionMethod == 1) {
|
||||||
|
if(this.form.chooseNumber >= this.form.candidateUsers.length) {
|
||||||
|
return this.$message.error('候选人数应多于应选人数')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.instance.post(`/app/appgeneralelectioninfo/addOrUpdate`,{
|
||||||
|
...this.form
|
||||||
|
}).then(res => {
|
||||||
|
if(res.code == 0) {
|
||||||
|
this.$message.success(this.id ? '编辑成功' : '新增成功')
|
||||||
|
this.cancel(true)
|
||||||
|
}
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scope>
|
||||||
|
.electionAdd {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
:deep( .el-date-editor .el-input ){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #f82;
|
||||||
|
background-color: #fff3e9;
|
||||||
|
color: #f82;
|
||||||
|
padding: 8px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
148
project/biaopin/AppGeneralElection/components/electionList.vue
Normal file
148
project/biaopin/AppGeneralElection/components/electionList.vue
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<section class="electionList">
|
||||||
|
<ai-list>
|
||||||
|
<ai-title slot="title" title="换届选举" isShowBottomBorder />
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')" >添加</el-button>
|
||||||
|
<ai-select v-model="search.status" @change=";(page.current = 1), getList()" placeholder="请选择状态" :selectList="dict.getDict('electionStatus')"></ai-select>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input v-model="search.title" class="search-input" size="small" v-throttle="() => {(page.current = 1), getList()} " placeholder="标题" clearable @change="getList" @clear="page.current = 1, (search.title = ''), getList()" suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getList" :col-configs="colConfigs" :dict="dict">
|
||||||
|
<el-table-column slot="options" label="操作" fixed="right" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click.native="toAdd(row.id)">详情</el-button>
|
||||||
|
<el-button type="text" v-show="row.status!=2" :disabled="row.status==2" @click.native="startEnd(row.id, row.status)">{{row.status == 0? '开启':'结束'}}</el-button>
|
||||||
|
<el-button type="text" v-show="row.status != 0" @click.native="toStatistics(row.id)">统计</el-button>
|
||||||
|
<el-button type="text" @click.native="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'electionList',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
status: '', // 0、未开始；1、进行中；2、已结束
|
||||||
|
title: '',
|
||||||
|
},
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.$dict.load('electionStatus', 'electionMethod').then(()=> {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{prop: "title", label: "标题", align: "left", showOverflowTooltip: true},
|
||||||
|
{prop: "organizationName", label: "所属支部", align: "center"},
|
||||||
|
{prop: "electionMethod", label: "选举方式", align: "center",dict:"electionMethod"},
|
||||||
|
{prop: "chooseNumber", label: "应选人数", align: "center"},
|
||||||
|
{prop: "status", label: "状态", align: "center",width: "180px", dict: "electionStatus"},
|
||||||
|
{ slot: "options", },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.instance.post(`/app/appgeneralelectioninfo/list`,null,{
|
||||||
|
params: {
|
||||||
|
...this.page,
|
||||||
|
...this.search,
|
||||||
|
}
|
||||||
|
}).then(res=> {
|
||||||
|
if(res?.data) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.page.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toAdd(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'electionAdd',
|
||||||
|
params: {
|
||||||
|
id: id || '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDelete(id) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appgeneralelectioninfo/delete?ids=${id}`).then(res=>{
|
||||||
|
if(res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.search = {
|
||||||
|
status: '',
|
||||||
|
title: '',
|
||||||
|
}
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
// 开启、结束
|
||||||
|
startEnd(id, status) {
|
||||||
|
let title = ''
|
||||||
|
let bool = null
|
||||||
|
let tips = ''
|
||||||
|
if(status == 0) {
|
||||||
|
title = '未到投票开始时间，确定要提前开始吗？'
|
||||||
|
bool = true
|
||||||
|
tips = '开启成功'
|
||||||
|
} else if(status == 1) {
|
||||||
|
title = '投票正在进行中，确定要提前结束吗？'
|
||||||
|
bool = false
|
||||||
|
tips = '结束成功'
|
||||||
|
}
|
||||||
|
this.$confirm(title).then(() => {
|
||||||
|
this.instance.post(`/app/appgeneralelectioninfo/start-end?id=${id}&start=${bool}`).then(res=>{
|
||||||
|
if(res.code == 0) {
|
||||||
|
this.$message.success(tips)
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 统计
|
||||||
|
toStatistics(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Statistics',
|
||||||
|
params: {
|
||||||
|
id: id || '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.electionList {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppOrganizationChange">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component :is="currentPage" :instance="instance" :selected.sync="selected" :params="params" :dict="dict" @change="onChange"/>
|
||||||
|
</keep-alive>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from "vuex";
|
||||||
|
import List from "./components/List.vue";
|
||||||
|
import organizationSetting from "./components/organizationSetting.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppOrganizationChange",
|
||||||
|
label: "组织换届",
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
...this.$props
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
List,
|
||||||
|
organizationSetting,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
currentPage() {
|
||||||
|
const {hash} = this.$route
|
||||||
|
if (["#add","#makeup"].includes(hash)) {
|
||||||
|
return organizationSetting
|
||||||
|
} else return List
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
selected: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
this.params = data.params;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppOrganizationChange {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
109
project/biaopin/AppOrganizationChange/components/List.vue
Normal file
109
project/biaopin/AppOrganizationChange/components/List.vue
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail list class="List">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="组织换届" isShowBottomBorder>
|
||||||
|
<template #rightBtn>
|
||||||
|
<el-button size="small" type="primary" @click="toAdd(selected.id)" v-if="hasConfig&&permissions('app_apporganizationchangeconfig')">换届设置
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<el-row slot="content" type="flex">
|
||||||
|
<ai-tree-menu title="组织目录" searchPlaceholder="请输入组织名称" @search="onSearch">
|
||||||
|
<ai-party-tree
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree"
|
||||||
|
:instance="instance"
|
||||||
|
:root="user.info.organizationId"
|
||||||
|
:current-node-key="selected.id"
|
||||||
|
@select="onTreeChange"/>
|
||||||
|
</ai-tree-menu>
|
||||||
|
<el-scrollbar class="fill mar-l16 mainContent">
|
||||||
|
<ai-card title="当前届次">
|
||||||
|
<moment slot="content" :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="历史届次" v-if="hasConfig">
|
||||||
|
<history slot="content" :selected="selected" v-on="$listeners"/>
|
||||||
|
</ai-card>
|
||||||
|
</el-scrollbar>
|
||||||
|
</el-row>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
import moment from './moment.vue'
|
||||||
|
import history from './history.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
inject: ['permissions', 'instance', 'dict'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabs: [
|
||||||
|
{label: '当前届次', name: 'moment', comp: moment, permission: ''},
|
||||||
|
{label: '历史届次', name: 'history', comp: history, permission: ''}
|
||||||
|
],
|
||||||
|
currIndex: '0',
|
||||||
|
selected: null,
|
||||||
|
hasConfig: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
moment,
|
||||||
|
history,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onTreeChange(e) {
|
||||||
|
this.selected = e
|
||||||
|
},
|
||||||
|
onSearch(v) {
|
||||||
|
this.$refs.tree?.$refs?.partyTree?.filter(v)
|
||||||
|
},
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
toAdd(oid) {
|
||||||
|
this.$router.push({hash: "#add", query: {oid}})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const {organizationId: id, organizationName: name} = this.user.info
|
||||||
|
this.selected = {id, name}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.List {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
:deep(.ai-detail__content--wrapper ){
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainContent {
|
||||||
|
.el-scrollbar__wrap {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.AiTreeMenu {
|
||||||
|
min-width: 300px;
|
||||||
|
box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .is-current > .el-tree-node__content ){
|
||||||
|
width: 100% !important;
|
||||||
|
padding-right: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
157
project/biaopin/AppOrganizationChange/components/detailPanel.vue
Normal file
157
project/biaopin/AppOrganizationChange/components/detailPanel.vue
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<section class="detailPanel">
|
||||||
|
<ai-title :title="`本届任职${!disabled?'（必填）':''}`">
|
||||||
|
<template #rightBtn v-if="!disabled">
|
||||||
|
<el-button type="text" icon="iconfont iconAdd" @click="showDialog({type:0})">添加任职人员</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-title>
|
||||||
|
<el-table :data="serveList" border size="small">
|
||||||
|
<el-table-column label="职位" width="180px" prop="position"/>
|
||||||
|
<el-table-column label="姓名" prop="name"/>
|
||||||
|
<el-table-column label="操作" width="200px" align="center" v-if="!disabled">
|
||||||
|
<div slot-scope="{row,$index}" class="table-operation">
|
||||||
|
<el-button type="text" @click="showDialog(row,$index)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="deleteItem($index,0)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<ai-title title="本届候选人">
|
||||||
|
<template #rightBtn v-if="!disabled">
|
||||||
|
<el-button type="text" icon="iconfont iconAdd" @click="showDialog({type:1})">添加候选人</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-title>
|
||||||
|
<el-table :data="candidateList" border size="small">
|
||||||
|
<el-table-column label="职位" width="180px" prop="position"/>
|
||||||
|
<el-table-column label="候选人" prop="name"/>
|
||||||
|
<el-table-column label="操作" width="200px" align="center" v-if="!disabled">
|
||||||
|
<div slot-scope="{row,$index}" class="table-operation">
|
||||||
|
<el-button type="text" @click="showDialog(row,$index)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="deleteItem($index,1)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<ai-dialog :visible.sync="visible" width="520px" :title="dialog.title" class="editStyle"
|
||||||
|
@closed="dialog={}" @onConfirm="submitAdd">
|
||||||
|
<el-form ref="editListItemForm" size="small" :model="dialog" :rules="rules" label-width="100px"
|
||||||
|
:validate-on-rule-change="false">
|
||||||
|
<el-form-item label="职位：" prop="position">
|
||||||
|
<el-input v-model="dialog.position" placeholder="请输入..."/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="currentList.name+'：'" prop="name">
|
||||||
|
<el-input v-if="dialog.type==0" v-model="dialog.name" placeholder="请输入..."/>
|
||||||
|
<div v-else>
|
||||||
|
<el-input type="textarea" :rows="3" v-model="dialog.name" placeholder="请输入..."/>
|
||||||
|
<span style="color:#999;font-size: 12px">输入候选人姓名，用空格隔开</span>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "detailPanel",
|
||||||
|
props: {
|
||||||
|
candidateList: {default: () => []},
|
||||||
|
serveList: {default: () => []},
|
||||||
|
disabled: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
dialog: {
|
||||||
|
title: "",
|
||||||
|
name: "",
|
||||||
|
changeTime: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentList() {
|
||||||
|
let initData = {
|
||||||
|
0: {name: "姓名", dialogTitle: "本届任职人", list: "serveList"},
|
||||||
|
1: {name: "候选人", dialogTitle: "本届候选人", list: "candidateList"}
|
||||||
|
}
|
||||||
|
return initData[this.dialog.type || 0]
|
||||||
|
},
|
||||||
|
rules() {
|
||||||
|
return {
|
||||||
|
name: [{required: true, message: "请输入" + this.currentList.name, trigger: "change"}],
|
||||||
|
position: [{required: true, message: "请输入职位", trigger: "change"}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDialog(v, rowIndex) {
|
||||||
|
this.dialog = {...this.dialog, ...v, rowIndex}
|
||||||
|
this.dialog.title = (this.dialog.rowIndex == 0 ? "编辑" : "添加") + this.currentList.dialogTitle
|
||||||
|
this.visible = true
|
||||||
|
},
|
||||||
|
submitAdd() {
|
||||||
|
this.$refs.editListItemForm.validate(v => {
|
||||||
|
if (v) {
|
||||||
|
this.handleData(this.currentList.list, list => {
|
||||||
|
if (this.dialog.rowIndex > -1) {
|
||||||
|
list.splice(this.dialog.rowIndex, 1, this.dialog)
|
||||||
|
} else list.push(this.dialog)
|
||||||
|
})
|
||||||
|
this.visible = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleData(prop, cb) {
|
||||||
|
const list = this.$copy(this.$props[prop]) || []
|
||||||
|
cb(list)
|
||||||
|
this.$emit("update:" + prop, list)
|
||||||
|
},
|
||||||
|
deleteItem(index, type) {
|
||||||
|
this.$confirm(`是否要删除该${type == 0 ? '本届任职人' : '本届候选人'}`, {type: "error"}).then(() => {
|
||||||
|
this.handleData(type == 0 ? "serveList" : "candidateList", list => {
|
||||||
|
list.splice(index, 1)
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.detailPanel {
|
||||||
|
.itemTitle + .el-table {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table + .itemTitle {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .table-header ){
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-right: 1px solid #d0d4dc !important;
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-center > .cell {
|
||||||
|
padding-left: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .table-cell ){
|
||||||
|
height: 44px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-center > .cell {
|
||||||
|
padding-left: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
93
project/biaopin/AppOrganizationChange/components/history.vue
Normal file
93
project/biaopin/AppOrganizationChange/components/history.vue
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<section class="history">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-button type="primary" icon="iconfont iconEdit" @click="$router.push({hash:'#makeup',query:{oid}})">补录</el-button>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input size="small" placeholder="请输入届次" v-model="search.sessionTime" clearable @change="getList"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :col-configs="colConfigs" :isShowPagination="false" @getList="getList">
|
||||||
|
<el-table-column slot="options" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "history",
|
||||||
|
inject: {
|
||||||
|
permissions: {},
|
||||||
|
instance: {},
|
||||||
|
dict: {}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {sessionTime: null},
|
||||||
|
tableData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{prop: 'sessionTime', label: '届次', align: 'left'},
|
||||||
|
{prop: 'changeTime', label: '换届日期', align: 'center'},
|
||||||
|
{prop: 'createTime', label: '操作时间', align: 'center'},
|
||||||
|
{prop: 'createUserName', label: '操作人', align: 'center'},
|
||||||
|
{slot: 'options'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
oid: v => v.$attrs.selected.id
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
oid: {
|
||||||
|
immediate: true,
|
||||||
|
handler() {
|
||||||
|
this.search.sessionTime = null
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleEdit(id) {
|
||||||
|
this.$router.push({hash: "#makeup", query: {id}})
|
||||||
|
},
|
||||||
|
handleDelete(id) {
|
||||||
|
this.$confirm("是否要删除该条届次记录?").then(() => {
|
||||||
|
this.instance.post("/app/apporganizationgeneralelection/delete", null, {
|
||||||
|
params: {id}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("删除成功!")
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => 0)
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
const {oid: organizationId} = this
|
||||||
|
organizationId && this.instance.post("/app/apporganizationgeneralelection/list", null, {
|
||||||
|
throttle: 500,
|
||||||
|
params: {...this.search, organizationId}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.tableData = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scope>
|
||||||
|
.history {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
background-color: #FFF !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
82
project/biaopin/AppOrganizationChange/components/moment.vue
Normal file
82
project/biaopin/AppOrganizationChange/components/moment.vue
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<section class="moment">
|
||||||
|
<template v-if="detail.id">
|
||||||
|
<ai-title :title="detail.organizationName||'基本信息'" class="mar-b8"/>
|
||||||
|
<ai-wrapper>
|
||||||
|
<ai-info-item label="本届换届时间" :value="detail.changeTime"/>
|
||||||
|
<ai-info-item label="换届类型" :value="dict.getLabel('organizationChangeType',detail.type)"/>
|
||||||
|
<ai-info-item label="下届换届时间" :value="detail.nextChangeTime"/>
|
||||||
|
<ai-info-item label="当前届次" :value="detail.sessionTime"/>
|
||||||
|
</ai-wrapper>
|
||||||
|
<detail-panel :candidate-list="detail.candidateList" :serve-list="detail.serveList" disabled/>
|
||||||
|
</template>
|
||||||
|
<ai-empty v-else>
|
||||||
|
<div>暂无换届信息</div>
|
||||||
|
<el-row type="flex" justify="center" class="mar-t8">
|
||||||
|
<ai-highlight content="请点击【@v】完善基础内容后,再进行后续操作" value="开始设置"/>
|
||||||
|
</el-row>
|
||||||
|
<el-button class="mar-t32" type="primary" @click="$router.push({hash:'#add',query:{oid,new:1}})">开始设置</el-button>
|
||||||
|
</ai-empty>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DetailPanel from "./detailPanel";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "moment",
|
||||||
|
components: {DetailPanel},
|
||||||
|
inject: ['permissions', 'instance', 'dict'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detail: {},
|
||||||
|
tableData: [],
|
||||||
|
totalJob: 0,
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{prop: 'content', label: '职位'},
|
||||||
|
{prop: 'content', label: '姓名'},
|
||||||
|
{slot: 'options'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
oid: v => v.$attrs.selected.id
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
oid: {
|
||||||
|
immediate: true,
|
||||||
|
handler() {
|
||||||
|
this.getDetail()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDetail() {
|
||||||
|
const {oid: organizationId} = this
|
||||||
|
this.detail = {}
|
||||||
|
organizationId && this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
|
||||||
|
pureBack:true,
|
||||||
|
params: {organizationId}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.detail = res.data
|
||||||
|
}
|
||||||
|
}).finally(() => this.$emit("update:hasConfig", !!this.detail.id))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dict.load("organizationChangeType")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scope>
|
||||||
|
.moment {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
background-color: #FFF !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,195 @@
|
|||||||
|
<template>
|
||||||
|
<section class="organizationSetting">
|
||||||
|
<ai-detail>
|
||||||
|
<ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
|
||||||
|
<template slot="content">
|
||||||
|
<el-form ref="SettingForm" :model="form" :rules="formRules" size="small" label-width="150px">
|
||||||
|
<ai-card title="基本信息" v-if="!isMakeUp">
|
||||||
|
<template #content>
|
||||||
|
<div class="tips">
|
||||||
|
<i class="el-icon-warning"></i>
|
||||||
|
系统将在下次换届时间开始前，对“换届提醒人”进行提醒。提醒方式包括平台消息推送、短信提醒。
|
||||||
|
</div>
|
||||||
|
<el-form-item label="单位名称">{{ org.name }}</el-form-item>
|
||||||
|
<el-form-item label="成立时间">{{ $dateFormat(org.createTime) }}</el-form-item>
|
||||||
|
<el-form-item label="换届类型" prop="type">
|
||||||
|
<el-radio v-model="form.type" label="0">三年换届</el-radio>
|
||||||
|
<el-radio v-model="form.type" label="1">五年换届</el-radio>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="换届提醒人" prop="userList">
|
||||||
|
<ai-person-select :instance="instance" :customClicker="true" :chooseUserList="form.userList"
|
||||||
|
:url="`/app/appparty/list?partyOrgId=${org.id}`" headerTitle="党员列表"
|
||||||
|
:isMultiple="true" dialogTitle="选择抄送人" @selectPerson="selectUser" class="aipersonselect">
|
||||||
|
<template name="option" v-slot:option="{ item }">
|
||||||
|
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||||||
|
</template>
|
||||||
|
</ai-person-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="当前届次">
|
||||||
|
<template #content>
|
||||||
|
<div flex class="wrap">
|
||||||
|
<el-form-item class="w50" label="本届换届时间" prop="changeTime">
|
||||||
|
<el-date-picker v-model="form.changeTime" @change="getNextChangeTime" value-format="yyyy-MM-dd" placeholder="本届换届时间"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="w50" label="下届换届时间" prop="nextChangeTime" v-if="!isMakeUp">
|
||||||
|
<el-date-picker disabled v-model="form.nextChangeTime" placeholder="根据换届设置信息自动计算"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="届次" prop="sessionTime" class="w50">
|
||||||
|
<el-input type="number" v-model="form.sessionTime" placeholder="请输入..."/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<detail-panel :serve-list.sync="form.serveList" :candidate-list.sync="form.candidateList"/>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template slot="footer" class="footer">
|
||||||
|
<el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
|
||||||
|
<el-button class="footer-btn" type="primary" @click="confirm()">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
import DetailPanel from "./detailPanel";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "organizationSetting",
|
||||||
|
components: {DetailPanel},
|
||||||
|
inject: ['permissions', 'instance', 'dict'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
type: "",
|
||||||
|
userList: [],
|
||||||
|
sessionTime: "",
|
||||||
|
changeTime: "",
|
||||||
|
nextChangeTime: "",
|
||||||
|
serveList: [],
|
||||||
|
candidateList: []
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
type: [{required: true, message: "请选择换届类型", trigger: "change"}],
|
||||||
|
sessionTime: [{required: true, message: "请输入届次", trigger: "blur"}],
|
||||||
|
userList: [{required: true, message: "请选择换届提醒人", trigger: "change"}],
|
||||||
|
changeTime: [{required: true, message: "请选择本次换届时间", trigger: "blur"}],
|
||||||
|
nextChangeTime: [{required: true, message: "请选择下次换届时间", trigger: "change"}]
|
||||||
|
},
|
||||||
|
org: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
isMakeUp: v => v.$route.hash == "#makeup",
|
||||||
|
pageTitle: v => v.isMakeUp ? "补录换届" : "换届设置",
|
||||||
|
oid: v => v.$route.query.oid
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'form.type'() {
|
||||||
|
this.getNextChangeTime()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!!this.oid) {
|
||||||
|
this.org = new this.MODEL.PartyOrg(this.oid)
|
||||||
|
}
|
||||||
|
!!this.isMakeUp ? this.getSession() : this.getDetail()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel() {
|
||||||
|
this.$router.back()
|
||||||
|
},
|
||||||
|
getNextChangeTime() {
|
||||||
|
const {type, changeTime} = this.form, sessionPeriod = {0: 3, 1: 5}[type]
|
||||||
|
this.form.nextChangeTime = type && changeTime ? this.$dateFormat(this.$moment(changeTime).add(sessionPeriod, "years")) : ""
|
||||||
|
},
|
||||||
|
getSession() {
|
||||||
|
//根据id获取对应届次信息
|
||||||
|
const {id} = this.$route.query
|
||||||
|
id && this.instance.post(`/app/apporganizationgeneralelection/queryDetailById`, null, {
|
||||||
|
pureBack: true,
|
||||||
|
params: {id}
|
||||||
|
}).then((res) => {
|
||||||
|
if (res?.data && res?.code == '0') {
|
||||||
|
this.form = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDetail() {
|
||||||
|
//获取到当前届次信息
|
||||||
|
const {oid: organizationId} = this.$route.query
|
||||||
|
this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
|
||||||
|
pureBack: true,
|
||||||
|
params: {organizationId}
|
||||||
|
}).then((res) => {
|
||||||
|
if (res?.data && res?.code == '0') {
|
||||||
|
this.form = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
selectUser(v) {
|
||||||
|
this.form.userList = v.map(e => ({
|
||||||
|
name: e.name,
|
||||||
|
organizationId: e.partyOrgId,
|
||||||
|
partyId: e.id,
|
||||||
|
phone: e.phone
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
// 换届设置
|
||||||
|
this.$refs.SettingForm.validate(v => {
|
||||||
|
if (v) {
|
||||||
|
const {id: organizationId, name: organizationName} = this.org
|
||||||
|
let action
|
||||||
|
if (this.isMakeUp) {//补录
|
||||||
|
action = `/app/apporganizationgeneralelection/${!!this.form.id ? 'update' : 'add'}`
|
||||||
|
} else {//换届设置
|
||||||
|
action = `/app/${!!this.form.id ? "apporganizationgeneralelection/updateAll" : 'apporganizationchangeconfig/add'}`
|
||||||
|
}
|
||||||
|
const addOrMakeup = !this.isMakeUp
|
||||||
|
this.instance.post(action, {
|
||||||
|
organizationId, organizationName,
|
||||||
|
...this.form, addOrMakeup
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
this.cancel(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scope>
|
||||||
|
.organizationSetting {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.el-date-editor, .el-input {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #f82;
|
||||||
|
background-color: #fff3e9;
|
||||||
|
color: #f82;
|
||||||
|
padding: 8px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="doc-circulation ailist-wrapper">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from './components/List'
|
||||||
|
import Add from './components/Add'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppVillageAuxiliarPolice',
|
||||||
|
label: '驻村干部',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
menuName: {default: '驻村干部'}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {},
|
||||||
|
include: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange (data) {
|
||||||
|
if (data.type === 'Add') {
|
||||||
|
this.component = 'Add'
|
||||||
|
this.params = data.params
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === 'list') {
|
||||||
|
this.component = 'List'
|
||||||
|
this.params = data.params
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (data.isRefresh) {
|
||||||
|
this.$refs.component.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.doc-circulation {
|
||||||
|
height: 100%;
|
||||||
|
background: #F3F6F9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
126
project/biaopin/AppVillageAuxiliarPolice/components/Add.vue
Normal file
126
project/biaopin/AppVillageAuxiliarPolice/components/Add.vue
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail>
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title :title="params.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-card title="基本信息">
|
||||||
|
<template #content>
|
||||||
|
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
|
||||||
|
<el-form-item label="服务区域" style="width: 100%;" prop="codeName">
|
||||||
|
<span style="color: #666;">{{ form.areaName }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="width: 100%" label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
|
||||||
|
<el-input size="small" placeholder="请输入姓名" v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="width: 100%" label="电话" prop="phone" :rules="[{ required: true, message: '请输入电话', trigger: 'blur' }]">
|
||||||
|
<el-input size="small" placeholder="请输入电话" maxlength="20" v-model="form.phone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="width: 100%;" label="是否公开" prop="isPublic" :rules="[{ required: true, message: '请选择是否公开', trigger: 'change' }]">
|
||||||
|
<el-radio-group v-model="form.isPublic">
|
||||||
|
<el-radio label="1">是</el-radio>
|
||||||
|
<el-radio label="0">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片" style="width: 100%;" prop="picture">
|
||||||
|
<ai-uploader
|
||||||
|
:instance="instance"
|
||||||
|
isShowTip
|
||||||
|
v-model="form.picture"
|
||||||
|
:limit="1">
|
||||||
|
</ai-uploader>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm">提交</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
info: {},
|
||||||
|
form: {
|
||||||
|
areaId: '',
|
||||||
|
name: '',
|
||||||
|
areaName: '',
|
||||||
|
phone: '',
|
||||||
|
picture: [],
|
||||||
|
isPublic: '1'
|
||||||
|
},
|
||||||
|
id: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
if (this.params && this.params.areaId && !this.params.id) {
|
||||||
|
this.form.areaId = this.params.areaId
|
||||||
|
this.form.areaName = this.params.areaName
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.id = this.params.id
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getInfo (id) {
|
||||||
|
this.instance.post(`/app/appvillageauxiliarypolice/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.form = res.data
|
||||||
|
this.form.picture = res.data.picture ? [{url: res.data.picture}] : []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose () {
|
||||||
|
this.form.explain = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm () {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/appvillageauxiliarypolice/addOrUpdate`, {
|
||||||
|
...this.form,
|
||||||
|
id: this.params.id || '',
|
||||||
|
picture: this.form.picture.length ? this.form.picture[0].url : ''
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cancel(true)
|
||||||
|
}, 600)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel (isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
426
project/biaopin/AppVillageAuxiliarPolice/components/List.vue
Normal file
426
project/biaopin/AppVillageAuxiliarPolice/components/List.vue
Normal file
@@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="villagecode">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title :title="menuName" isShowBottomBorder></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #left>
|
||||||
|
<div class="villagecode-left">
|
||||||
|
<div class="villagecode-left__title">
|
||||||
|
<h2>地区</h2>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list">
|
||||||
|
<div class="addressBook-left__list--title">
|
||||||
|
<el-input
|
||||||
|
class="addressBook-left__list--search"
|
||||||
|
size="mini"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入地区名称"
|
||||||
|
v-model="unitName"
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<el-tree
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree"
|
||||||
|
:props="defaultProps"
|
||||||
|
node-key="id"
|
||||||
|
:data="areaTree"
|
||||||
|
highlight-current
|
||||||
|
:current-node-key="search.areaId"
|
||||||
|
:default-expanded-keys="defaultExpanded"
|
||||||
|
:default-checked-keys="defaultChecked"
|
||||||
|
@current-change="onTreeChange">
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar class="search-bar">
|
||||||
|
<template #left>
|
||||||
|
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input
|
||||||
|
v-model="search.name"
|
||||||
|
class="search-input"
|
||||||
|
size="small"
|
||||||
|
v-throttle="() => {search.current = 1, getList()}"
|
||||||
|
placeholder="请输入姓名/电话"
|
||||||
|
clearable
|
||||||
|
@change="getList"
|
||||||
|
@clear="search.current = 1, search.name = '', getList()"
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
style="margin-top: 6px;"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="isPublic" label="是否公开">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-switch
|
||||||
|
v-model="row.isPublic"
|
||||||
|
active-value="1"
|
||||||
|
@change="e => onChange(row.id, e)"
|
||||||
|
inactive-value="0">
|
||||||
|
</el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
menuName: String
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
name: '',
|
||||||
|
areaId: ''
|
||||||
|
},
|
||||||
|
defaultExpanded: [],
|
||||||
|
defaultChecked: [],
|
||||||
|
areaTree: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
},
|
||||||
|
currIndex: -1,
|
||||||
|
total: 10,
|
||||||
|
colConfigs: [
|
||||||
|
{prop: 'name', label: '姓名', align: 'left'},
|
||||||
|
{prop: 'phone', label: '联系方式', align: 'center'},
|
||||||
|
{prop: 'areaName', label: '服务区域', align: 'center'},
|
||||||
|
{prop: 'createTime', label: '创建时间', align: 'center'},
|
||||||
|
{slot: 'isPublic', label: '是否公开', align: 'center'},
|
||||||
|
{slot: 'options', label: '操作'}
|
||||||
|
],
|
||||||
|
areaName: '',
|
||||||
|
unitName: '',
|
||||||
|
tableData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
unitName (val) {
|
||||||
|
this.$refs.tree.filter(val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.search.areaId = this.user.info.areaId
|
||||||
|
this.areaName = this.user.info.areaName
|
||||||
|
this.getTree()
|
||||||
|
this.getList()
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.instance.post(`/app/appvillageauxiliarypolice/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange (id) {
|
||||||
|
this.instance.post(`/app/appvillageauxiliarypolice/enable?id=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('修改成功')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
|
||||||
|
onTreeChange (e) {
|
||||||
|
this.search.areaId = e.id
|
||||||
|
this.areaName = e.name
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getTree () {
|
||||||
|
this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
let parent = res.data.map(v => {
|
||||||
|
v.label = v.name
|
||||||
|
v.children = []
|
||||||
|
|
||||||
|
return v
|
||||||
|
}).filter(e => !e.parentid)[0]
|
||||||
|
this.defaultExpanded = [parent.id]
|
||||||
|
this.defaultChecked = [parent.id]
|
||||||
|
this.search.areaId = parent.id
|
||||||
|
this.addChild(parent, res.data)
|
||||||
|
this.areaTree = [parent]
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.tree.setCurrentKey(parent.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
addChild (parent, list) {
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (list[i].parentId === parent.id) {
|
||||||
|
parent.children.push(list[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
parent['children'].map(v => this.addChild(v, list))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appvillageauxiliarypolice/delete?ids=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toAdd(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Add',
|
||||||
|
params: {
|
||||||
|
areaName: this.areaName,
|
||||||
|
id: id || '',
|
||||||
|
areaId: this.search.areaId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.villagecode {
|
||||||
|
.table-tags {
|
||||||
|
.el-tag {
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__list {
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
padding: 8px 8px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.addressBook-left__tags--item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 8px 0 16px;
|
||||||
|
color: #222222;
|
||||||
|
|
||||||
|
&.addressBook-left__tags--item-active, &:hover {
|
||||||
|
background: #E8EFFF;
|
||||||
|
color: #2266FF;
|
||||||
|
|
||||||
|
i, span {
|
||||||
|
color: #2266FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #8e9ebf;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__list--title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.addressBook-left__list--search {
|
||||||
|
flex: 1;
|
||||||
|
:deep( input ){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 84px;
|
||||||
|
flex-shrink: 1;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #222222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .el-tree ){
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.el-tree-node__expand-icon.is-leaf {
|
||||||
|
color: transparent!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree__empty-text {
|
||||||
|
color: #222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__children .el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content:hover {
|
||||||
|
background: #E8EFFF;
|
||||||
|
color: #222222;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-current > .el-tree-node__content {
|
||||||
|
&:hover {
|
||||||
|
background: #2266FF;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
background: #2266FF;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .ai-list__content--left ){
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.villagecode-left {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
background: #FAFAFB;
|
||||||
|
|
||||||
|
.villagecode-left__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.villagecode-left__list {
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
padding: 8px 0;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 24px;
|
||||||
|
color: #222222;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-right: 2px solid transparent;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #2266FF;
|
||||||
|
background: #E8EFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left-active {
|
||||||
|
color: #2266FF;
|
||||||
|
border-color: #2266FF;
|
||||||
|
background: #E8EFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .ai-list__content--right ){
|
||||||
|
|
||||||
|
.ai-list__content--right-wrapper {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-info__img {
|
||||||
|
font-size: 0;
|
||||||
|
width: 144px;
|
||||||
|
height: 144px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user