初始化
This commit is contained in:
aixianling
278
packages/wechat/AppWhereabouts/AppWhereabouts.vue
Normal file
278
packages/wechat/AppWhereabouts/AppWhereabouts.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user