279 lines
9.1 KiB
Vue
279 lines
9.1 KiB
Vue
<template>
|
||
<section class="AppWhereabouts">
|
||
<ai-list>
|
||
<ai-title slot="title" title="工作去向" isShowBottomBorder/>
|
||
|
||
<template #custom>
|
||
<el-row type="flex" class="staDataPane">
|
||
<div class="boxItem" v-for="(op,i) in staData" :key="i">
|
||
<div>{{ op.name }}</div>
|
||
<b>{{ op.v1 }}</b>
|
||
</div>
|
||
</el-row>
|
||
|
||
<div class="mainPane">
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<!-- <el-select v-model="search.village" placeholder="请选择联村" size="small"-->
|
||
<!-- @change="page.current=1,getTableData()" clearable>-->
|
||
<!-- <el-option v-for="(op,i) in dict.getDict('villageCadresDirectionArea')" :key="i" :label="op.dictName"-->
|
||
<!-- :value="op.dictValue"/>-->
|
||
<!-- </el-select>-->
|
||
<ai-select placeholder="请选择工作去向" v-model="search.direction"
|
||
:selectList="dict.getDict('villageCadresDirectionChoice')"
|
||
@change="page.current=1,getTableData()"/>
|
||
</template>
|
||
<template #right>
|
||
<el-input suffix-icon="iconfont iconSearch" v-model="search.name" placeholder="姓名/手机号码" clearable
|
||
@change="page.current=1,getTableData()" size="small"/>
|
||
</template>
|
||
</ai-search-bar>
|
||
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<el-button type="primary" icon="iconfont iconAdd" size="small" @click="dialog=true">添加</el-button>
|
||
<el-button icon="iconfont iconDelete" size="small" @click="handleDelete()" :disabled="ids.length==0">删除
|
||
</el-button>
|
||
</template>
|
||
<template #right>
|
||
<ai-import :instance="instance" :dict="dict" type="appvillagecadresdirection" name="工作去向"
|
||
@success="getTableData()">
|
||
<el-button icon="iconfont iconImport">导入</el-button>
|
||
</ai-import>
|
||
<ai-download :instance="instance" url="/app/appvillagecadresdirection/listExport" :params="params"
|
||
fileName="工作去向数据导出"/>
|
||
</template>
|
||
</ai-search-bar>
|
||
|
||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total"
|
||
@selection-change="v=>ids=v.map(e=>e.id)"
|
||
:current.sync="page.current" :size.sync="page.size" @getList="getTableData">
|
||
<el-table-column slot="options" label="操作" align="center">
|
||
<div class="tableOptions" slot-scope="{row}">
|
||
<el-button type="text" @click="editItem(row)">编辑</el-button>
|
||
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
|
||
</div>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</div>
|
||
</template>
|
||
</ai-list>
|
||
|
||
|
||
<ai-dialog :visible.sync="dialog" title="工作去向" @closed="form={},getTableData(),getStaData()"
|
||
@onConfirm="submitForm" @opened="$refs.WhereaboutsConfigForm.clearValidate()">
|
||
<el-form size="small" ref="WhereaboutsConfigForm" :model="form" :rules="rules" label-suffix="："
|
||
label-width="100px">
|
||
<el-row type="flex" class="WhereaboutsConfigForm" justify="space-between">
|
||
<el-form-item v-for="(op,i) in colConfigs.slice(1,9)" :key="i" v-bind="op" style="width: 48%">
|
||
|
||
<!-- <el-select v-if="op.prop=='village'" v-model="form[op.prop]" placeholder="请选择联村" clearable multiple>-->
|
||
<!-- <el-option v-for="(op,i) in dict.getDict('villageCadresDirectionArea')" :key="i" :label="op.dictName"-->
|
||
<!-- :value="op.dictValue"/>-->
|
||
<!-- </el-select>-->
|
||
<ai-select v-if="op.prop=='direction'" placeholder="请选择工作去向" v-model="form[op.prop]"
|
||
:selectList="dict.getDict('villageCadresDirectionChoice')"/>
|
||
<el-input v-else v-model="form[op.prop]" placeholder="请输入"/>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
</ai-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "AppWhereabouts",
|
||
label: "工作去向",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
computed: {
|
||
colConfigs() {
|
||
const required = true
|
||
return [
|
||
{type: "selection"},
|
||
{label: "姓名", prop: "name", align: "center", required},
|
||
{
|
||
label: "联村", prop: "village", align: "center", required,
|
||
render: (h, {row}) => h('span', null, row?.village?.split(",")
|
||
?.map(e => this.dict.getLabel("villageCadresDirectionArea", e)).join(","))
|
||
},
|
||
{label: "联系片", prop: "connect", align: "center"},
|
||
{label: "包保网络", prop: "net", align: "center"},
|
||
{label: "手机号码", prop: "phone", align: "center", required},
|
||
{label: "备注", prop: "remark", align: "center"},
|
||
{
|
||
label: "工作去向", prop: "direction", align: "center", required,
|
||
render: (h, {row}) => h('span', null, this.dict.getLabel("villageCadresDirectionChoice", row?.direction))
|
||
},
|
||
{label: "排序编号", prop: "sort", align: "center"},
|
||
{slot: "options"},
|
||
]
|
||
},
|
||
params() {
|
||
let params = {}
|
||
//导出搜索条件
|
||
if (this.ids.length) {
|
||
params = {
|
||
...params,
|
||
ids: this.ids
|
||
}
|
||
} else {
|
||
params = {
|
||
...params,
|
||
...this.search
|
||
}
|
||
}
|
||
return params
|
||
},
|
||
formConfigs() {
|
||
return this.colConfigs.slice(1, 9).map(e => ({
|
||
...e, comp: ['village', 'direction'].includes(e.prop) ? 'select' : 'input'
|
||
}))
|
||
},
|
||
rules() {
|
||
let rules = {}
|
||
//调整columns要慎重
|
||
this.formConfigs.filter(e => e.required).map(e => {
|
||
rules[e.prop] = [
|
||
{message: `请${e.comp == 'select' ? '选择' : '输入'}${e.label}`, required: true}
|
||
]
|
||
if (e.prop == 'phone') {
|
||
rules[e.prop]?.push({pattern: /^1[1356789][0-9]\d{8}$/, message: '手机格式有误!'})
|
||
}
|
||
})
|
||
return rules
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
staData: [],
|
||
search: {name: null, direction: null, village: null},
|
||
page: {size: 10, current: 1, total: 0},
|
||
dialog: false,
|
||
tableData: [],
|
||
form: {},
|
||
ids: []
|
||
}
|
||
},
|
||
methods: {
|
||
getStaData() {
|
||
this.instance.post("/app/appvillagecadresdirection/queryDataStatistics").then(res => {
|
||
if (res?.data) {
|
||
this.staData = res.data
|
||
}
|
||
})
|
||
},
|
||
getTableData() {
|
||
this.instance.post("/app/appvillagecadresdirection/list", null, {
|
||
params: {...this.search, ...this.page}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.tableData = res.data.records
|
||
this.page.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
submitForm() {
|
||
this.$refs.WhereaboutsConfigForm.validate(v => {
|
||
if (v) {
|
||
this.instance.post("/app/appvillagecadresdirection/addOrUpdate", {
|
||
...this.form
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
this.$message.success("提交成功!")
|
||
this.dialog = false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handleDelete(id) {
|
||
this.$confirm("是否删除该联村镇干?").then(() => {
|
||
this.instance.post("/app/appvillagecadresdirection/delete", null, {
|
||
params: {ids: id || this.ids.join(",")}
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
this.$message.success("删除成功!")
|
||
this.getTableData()
|
||
this.getStaData()
|
||
}
|
||
})
|
||
}).catch(() => 0)
|
||
},
|
||
editItem(row) {
|
||
this.dialog = true
|
||
this.form = JSON.parse(JSON.stringify({...row}))
|
||
}
|
||
},
|
||
created() {
|
||
this.dict.load("villageCadresDirectionChoice", "villageCadresDirectionArea")
|
||
this.getStaData()
|
||
this.getTableData()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppWhereabouts {
|
||
height: 100%;
|
||
|
||
::v-deep .ai-list__content {
|
||
padding: 0 16px 16px !important;
|
||
box-sizing: border-box;
|
||
|
||
.ai-list__content--wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
|
||
::v-deep .staDataPane {
|
||
width: 100%;
|
||
gap: 16px;
|
||
padding-top: 16px;
|
||
|
||
.boxItem {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 64px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
border: 1px solid #eee;
|
||
background: #fff;
|
||
|
||
b {
|
||
font-size: 20px;
|
||
font-family: DINAlternate-Bold, DINAlternate, serif;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .mainPane {
|
||
background: #fff;
|
||
border: 1px solid #eee;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.WhereaboutsConfigForm {
|
||
flex-wrap: wrap;
|
||
|
||
.el-select {
|
||
width: 100%;
|
||
|
||
::v-deep .el-tag__close.el-icon-close {
|
||
background: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|