kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

平昌党建先提交挂起

Browse Source
This commit is contained in:
aixianling
2022-10-24 16:13:01 +08:00
parent 9209ac9fae
commit a9351c58d3
7 changed files with 305 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
project/pingchang/apps/AppOrganizationChange/components/detailPanel.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<section class="detailPanel">
<div class="itemTitle">
<b>本届任职{{editable?"（必填）":""}}</b>
<span type="text" class="iconfont iconAdd" @click="showDialog({type:0})">添加任职人员</span>
</div>
<el-table :data="serveList" border header-cell-class-name="table-header" cell-class-name="table-cell">
<el-table-column label="职位" width="180px" prop="position"/>
<el-table-column label="姓名" prop="name"/>
<el-table-column label="操作" width="120px" align="center">
<div slot-scope="{row,$index}" class="table-operation">
<span class="iconfont iconEdit" @click="showDialog(row,$index)" title="编辑"/>
<span class="iconfont iconDelete" title="删除" @click="deleteItem($index,0)"/>
</div>
</el-table-column>
</el-table>
<div class="itemTitle">
<b>本届候选人</b>
<span type="text" class="iconfont iconAdd" @click="showDialog({type:1})">添加候选人</span>
</div>
<el-table :data="candidateList" border header-cell-class-name="table-header" cell-class-name="table-cell">
<el-table-column label="职位" width="180px" prop="position"/>
<el-table-column label="候选人" prop="name"/>
<el-table-column label="操作" width="120px" align="center">
<div slot-scope="{row,$index}" class="table-operation">
<span class="iconfont iconEdit" @click="showDialog(row,$index)" title="编辑"/>
<span class="iconfont iconDelete" title="删除" @click="deleteItem($index,1)"/>
</div>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialog.visible" width="520px" :title="dialog.title" class="editStyle"
@close="dialog={visible: false},$refs.editListItemForm.clearValidate()">
<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>
<div slot="footer" class="footerBtns">
<el-button size="small" @click="dialog.visible=false">取消</el-button>
<el-button size="small" type="primary" @click="submitAdd">确认</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
export default {
name: "detailPanel",
model: {
prop: "value",
event: "change"
},
props: {
value: Object,
instance: Function,
dict: Object,
permissions: Function,
editable: {type: Boolean, default: false}
},
data() {
return {
dialog: {
visible: false,
title: "",
name: "",
changeTime: ""
},
serveList: [],
candidateList: []
}
},
computed: {
lists() {
return {candidateList: this.candidateList, serveList: this.serveList}
},
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"}],
}
},
},
watch: {
lists: {
deep: true,
handler() {
this.$emit('change', this.lists)
}
},
value: {
deep: true,
handler(v) {
if (v) {
v.candidateList && (this.candidateList = v.candidateList)
v.serveList && (this.serveList = v.serveList)
}
}
}
},
methods: {
showDialog(v, rowIndex) {
this.dialog = {...this.dialog, ...v, rowIndex}
this.dialog.title = (this.dialog.rowIndex==0? "编辑" : "添加") + this.currentList.dialogTitle
this.dialog.visible = true
},
submitAdd() {
this.$refs.editListItemForm.validate(v => {
if (v) {
if (this.dialog.rowIndex > -1) {
this.$data[this.currentList.list].splice(this.dialog.rowIndex, 1, this.dialog)
} else this.$data[this.currentList.list].push(this.dialog)
this.dialog.visible = false
this.dialog.rowIndex==undefined ? this.$emit("refresh",1) : this.$emit("refresh",2);
}
})
},
deleteItem(index,type) {
this.$confirm(`是否要删除该${type==0?'本届任职人':'本届候选人'}`, {type: "error"}).then(() => {
type==0?this.$data["serveList"].splice(index, 1):this.$data["candidateList"].splice(index, 1)
this.$emit("refresh",0)
}).catch(() => {
})
}
},
mounted() {
this.$nextTick(() => {
if (this.value) {
let v = JSON.parse(JSON.stringify(this.value))
v.candidateList && (this.candidateList = v.candidateList)
v.serveList && (this.serveList = v.serveList)
}
})
}
}
</script>
<style lang="scss" scoped>
.detailPanel {
.itemTitle + .el-table {
margin-top: 16px;
}
.el-table + .itemTitle {
margin-top: 24px;
}
::v-deep .table-header {
box-sizing: border-box;
border-right: 1px solid #d0d4dc !important;
.cell {
padding-left: 32px;
}
&.is-center > .cell {
padding-left: 10px !important;
}
}
::v-deep .table-cell {
height: 44px;
color: #333;
.cell {
padding-left: 32px;
}
&.is-center > .cell {
padding-left: 10px !important;
}
}
}
</style>