Files
dvcp_v2_webapp/packages/jianping/AppHelpedResident/detail/hrMeasure.vue
2022-04-25 08:58:10 +08:00

154 lines
4.1 KiB
Vue

<template>
<section class="hrMeasure">
<ai-card title="帮扶措施">
<template #right>
<el-button type="text" icon="el-icon-plus" @click="dialog=true">添加</el-button>
</template>
<template #content>
<div class="logItem" v-for="row in tableData" :key="row.id">
<el-row type="flex" align="middle" justify="space-between">
<b v-text="row.createUserName"/>
<span v-text="row.createTime"/>
</el-row>
<p>帮扶类型:</p>
<div class="content" v-text="row.detail"/>
<ai-uploader v-model="row.files" disabled/>
<div class="btns">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
</div>
</div>
<ai-empty v-if="tableData.length==0"/>
</template>
</ai-card>
<ai-dialog :visible.sync="dialog" :title="addTitle" @closed="form={}" @onConfirm="submit" width="600px">
<el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="80px">
<el-form-item label="帮扶类型" prop="sex">
<ai-select
v-model="form.sex"
:selectList="dict.getDict('sex')"
disabled
/>
</el-form-item>
<el-form-item label="帮扶措施" prop="detail">
<el-input type="textarea" v-model="form.detail" placeholder="请输入" maxlength="500" show-word-limit rows="5"/>
</el-form-item>
<el-form-item label="图片" prop="files">
<ai-uploader v-model="form.files" :instance="instance" acceptType=".jpg,.jpeg,.png">
<template #tips>
最多9张,仅支持10M以内的jpgjpegpng格式照片
</template>
</ai-uploader>
</el-form-item>
</el-form>
</ai-dialog>
</section>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "hrMeasure",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
...mapState(['user']),
addTitle() {
return this.form.id ? "编辑措施" : "新建措施"
}
},
data() {
return {
dialog: false,
form: {},
rules: {
detail: {required: true, message: "请输入帮扶措施"}
},
tableData: []
}
},
methods: {
getTableData() {
let {id: pid} = this.$route.query
this.instance.post("/app/apppreventionreturntopovertylog/list", null, {
params: {size: 9999, pid, type: 1}
}).then(res => {
if (res?.data) {
this.tableData = res.data?.records || []
}
})
},
submit() {
this.$refs.DialogForm.validate(v => {
if (v) {
let {id: pid} = this.$route.query
this.instance.post(`/app/apppreventionreturntopovertylog/addOrUpdate`, {
...this.form,
pid,
type: 1
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功!');
this.dialog = false
this.getTableData()
}
})
}
})
},
handleEdit(row) {
this.dialog = true
this.form = JSON.parse(JSON.stringify(row))
},
handleDelete(ids) {
this.$confirm("是否要删除帮扶措施").then(() => {
this.instance.post("/app/apppreventionreturntopovertylog/delete", null, {
params: {ids: ids?.toString()}
}).then(res => {
if (res?.code == 0) {
this.$message.success("删除成功!")
this.getTableData()
}
})
}).catch(() => 0)
},
},
created() {
this.getTableData()
}
}
</script>
<style lang="scss" scoped>
.hrMeasure {
.logItem {
position: relative;
padding: 8px 16px;
border-radius: 4px;
&:hover {
background: #eee;
.btns {
display: block;
}
}
.content {
margin: 8px 0;
}
.btns {
display: none;
position: absolute;
right: 8px;
bottom: 8px;
}
}
}
</style>