duanliangtao
2 years ago
2 changed files with 514 additions and 0 deletions
@ -0,0 +1,202 @@ |
|||||
|
<template> |
||||
|
<div class="g-main"> |
||||
|
<div> |
||||
|
<div class="m-table"> |
||||
|
<div class="div_btn"><el-button size="small" type="primary " @click="handleAdd({}, 'add')">新增</el-button></div> |
||||
|
<el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="maxTableHeight"> |
||||
|
<!-- <el-table-column label="" fixed="left" type="selection" align="center" width="50" /> --> |
||||
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
||||
|
<el-table-column prop="categoryName" align="center" label="分类名称" :show-overflow-tooltip="true"></el-table-column> |
||||
|
<!-- <el-table-column prop="awardPoint" align="center" label="积分" :show-overflow-tooltip="true"></el-table-column> --> |
||||
|
<el-table-column prop="usableFlag" label="状态" min-width="140" align="center" :show-overflow-tooltip="true"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.usableFlag == '0'">禁用</span> |
||||
|
<span v-if="scope.row.usableFlag == '1'">启用</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" label="操作" align="center" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button @click="handleHid(scope.row)" type="text" size="small" v-if="scope.row.usableFlag == '1'" class="">禁用</el-button> |
||||
|
<el-button @click="handleHid(scope.row)" type="text" size="small" v-if="scope.row.usableFlag == '0'" class="">启用</el-button> |
||||
|
<el-button style="margin-right: 10px" @click="handleAdd(scope.row, 'edit')" size="small" type="text">修改</el-button> |
||||
|
<el-button style="margin-right: 10px" @click="handleDel(scope.row)" size="small" type="text">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="parseInt(pageSize)" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
:total="total" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<addForm :detailId="detailId" :pageType="pageType" v-if="dialogVisible" :dialogVisible="dialogVisible" @handleClose="handleClose" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from '@/js/dai/request'; |
||||
|
import nextTick from 'dai-js/tools/nextTick'; |
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import addForm from './hobbyItemsComponents/addForm.vue'; |
||||
|
import axios from 'axios'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dialogVisible: false, |
||||
|
warnFlagList: [{ value: '0', label: '否' }, { value: '1', label: '是' }], |
||||
|
intelligentFlagList: [{ value: '0', label: '不开启' }, { value: '1', label: '开启' }], |
||||
|
disabled: false, |
||||
|
user: '', |
||||
|
agencyId: '', |
||||
|
formData: {}, |
||||
|
customerId: '', |
||||
|
pageType: 'list', // 列表list 新增add 处理dispose 详情info |
||||
|
gridList: [], //所属网格list--场所区域 |
||||
|
placeTypeList: [], //场所类型 |
||||
|
tableData: [], |
||||
|
pageNo: 1, |
||||
|
pageSize: window.localStorage.getItem('pageSize') || 20, |
||||
|
total: 1, |
||||
|
detailId: '', |
||||
|
detailData: {}, |
||||
|
multipleSelection: [], |
||||
|
rowObj: {}, |
||||
|
importLoading: false |
||||
|
}; |
||||
|
}, |
||||
|
components: { addForm }, |
||||
|
created() {}, |
||||
|
computed: { |
||||
|
maxTableHeight() { |
||||
|
return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeigh : this.clientHeight - 410; |
||||
|
}, |
||||
|
...mapGetters(['clientHeight', 'iframeHeight']) |
||||
|
}, |
||||
|
watch: {}, |
||||
|
mounted() { |
||||
|
this.user = this.$store.state.user; |
||||
|
this.agencyId = this.user.agencyId; |
||||
|
this.customerId = this.user.customerId; |
||||
|
console.log('this.customerId ', this.customerId); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async handleDel(rowData) { |
||||
|
let message = '确认删除?'; |
||||
|
this.$confirm(message, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.del(rowData.categoryId); |
||||
|
}) |
||||
|
.catch(err => {}); |
||||
|
}, |
||||
|
async del(id) { |
||||
|
const url = `/actual/base/hobbyitem/delete/${id}`; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url); |
||||
|
if (code === 0) { |
||||
|
this.$message.success('删除成功！'); |
||||
|
this.getTableData(); |
||||
|
} else { |
||||
|
this.$message.error('操作失败！'); |
||||
|
} |
||||
|
}, |
||||
|
handleAdd(row, type) { |
||||
|
if (row.categoryId) { |
||||
|
this.detailId = row.categoryId; |
||||
|
} |
||||
|
this.pageType = type; |
||||
|
this.dialogVisible = true; |
||||
|
}, |
||||
|
async handleHid(row) { |
||||
|
let usableFlag = ''; |
||||
|
if (row.usableFlag == '1') { |
||||
|
usableFlag = false; |
||||
|
} else { |
||||
|
usableFlag = true; |
||||
|
} |
||||
|
const url = '/actual/base/hobbyitem/updatestatus'; |
||||
|
const param = { |
||||
|
categoryId: row.categoryId, |
||||
|
usableFlag: usableFlag |
||||
|
}; |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/330/actual/base/enterprise/list'; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
const { data, code, msg } = await requestPost(url, param); |
||||
|
if (code === 0) { |
||||
|
this.$message.success('操作成功'); |
||||
|
this.getTableData(); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
handleSearch(val) { |
||||
|
console.log(this.formData); |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.dialogVisible = false; |
||||
|
this.detailId = ''; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
async getTableData() { |
||||
|
const url = '/actual/base/hobbyitem/list'; |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/330/actual/base/enterprise/list'; |
||||
|
const { pageSize, pageNo, customerId } = this; |
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
pageSize, |
||||
|
pageNo, |
||||
|
customerId |
||||
|
}); |
||||
|
if (code === 0) { |
||||
|
this.total = data.total || 0; |
||||
|
this.tableData = data.list |
||||
|
? data.list.map(item => { |
||||
|
return item; |
||||
|
}) |
||||
|
: []; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val; |
||||
|
window.localStorage.setItem('pageSize', val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
resetSearch() { |
||||
|
this.formData = { |
||||
|
customerId |
||||
|
}; |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '@/assets/scss/modules/management/list-main.scss'; |
||||
|
.m-search { |
||||
|
.u-item-width-normal { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,312 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="800px" |
||||
|
:before-close="handleCancle" |
||||
|
> |
||||
|
<span slot="title"> |
||||
|
<span v-if="pageType == 'add'">新增</span> |
||||
|
<span v-if="pageType == 'edit'">修改</span> |
||||
|
<span v-if="pageType == 'view'">查看</span> |
||||
|
</span> |
||||
|
<div> |
||||
|
<el-form |
||||
|
:model="formData" |
||||
|
ref="form" |
||||
|
:rules="dataRule" |
||||
|
:label-width="'120px'" |
||||
|
> |
||||
|
<el-form-item label="分类名称" prop="categoryName"> |
||||
|
<el-input |
||||
|
v-model="formData.categoryName" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入" |
||||
|
></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- <el-form-item label="奖励积分" prop="awardPoint"> |
||||
|
<el-input-number v-model="formData.awardPoint" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input-number> |
||||
|
</el-form-item> --> |
||||
|
<el-form-item label="对应个性需求" prop="demandList"> |
||||
|
<el-cascader |
||||
|
ref="cascaderItem1" |
||||
|
:options="demandOptions" |
||||
|
:props="props1" |
||||
|
v-model="formData.demandList1" |
||||
|
@change="handleAreaChange1" |
||||
|
clearable |
||||
|
></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="对应公共服务" prop="commonServiceTypeList"> |
||||
|
<el-cascader |
||||
|
ref="cascaderItem2" |
||||
|
:options="commonServiceTypeOptions" |
||||
|
:props="props2" |
||||
|
v-model="formData.commonServiceTypeList1" |
||||
|
@change="handleAreaChange2" |
||||
|
clearable |
||||
|
></el-cascader> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="handleCancle">取 消</el-button> |
||||
|
<el-button type="primary" @click="handleComfirm">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { isMobile } from "@/utils/validate"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
import daiMap from "@/utils/dai-map"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
|
||||
|
let loading; // 加载动画 |
||||
|
let map; |
||||
|
var search; |
||||
|
var markers; |
||||
|
var infoWindowList; |
||||
|
var geocoder; // 新建一个正逆地址解析类 |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
detailId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
|
||||
|
dialogVisible: { |
||||
|
type: Boolean, |
||||
|
default: "", |
||||
|
}, |
||||
|
pageType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
props1: { |
||||
|
multiple: true, |
||||
|
value: "value", |
||||
|
label: "label", |
||||
|
children: "children", |
||||
|
}, |
||||
|
props2: { |
||||
|
value: "id", |
||||
|
label: "name", |
||||
|
children: "childrenList", |
||||
|
multiple: true, |
||||
|
}, |
||||
|
categoryCodeArr: {}, |
||||
|
demandOptions: [], |
||||
|
commonServiceTypeOptions: [], |
||||
|
index: -1, //判断这个是arr中的第几个 |
||||
|
arr: [ |
||||
|
"育龄妇女", |
||||
|
"老年人", |
||||
|
"空巢老人", |
||||
|
"独居老人", |
||||
|
"租户", |
||||
|
"残疾", |
||||
|
"大病", |
||||
|
"慢病", |
||||
|
], |
||||
|
btnDisable: false, |
||||
|
user: "", |
||||
|
agencyId: "", |
||||
|
marryList: [ |
||||
|
{ value: "-1", label: "不限制" }, |
||||
|
{ value: "0", label: "未婚" }, |
||||
|
{ value: "1", label: "已婚" }, |
||||
|
], |
||||
|
list: {}, |
||||
|
formData: { |
||||
|
// awardPoint: '', |
||||
|
categoryId: "", |
||||
|
categoryName: "", |
||||
|
demandList1: [], |
||||
|
commonServiceTypeList1: [], |
||||
|
demandList: [], |
||||
|
commonServiceTypeList: [], |
||||
|
}, |
||||
|
dataRule: { |
||||
|
categoryName: [ |
||||
|
{ required: true, message: "分类名称不能为空", trigger: "bulr" }, |
||||
|
], |
||||
|
// awardPoint: [{ required: true, message: '奖励积分不能为空', trigger: 'bulr' }], |
||||
|
// demandList: [{ required: true, message: '对应个性需求不能为空', trigger: 'blur' }], |
||||
|
// commonServiceTypeList: [{ required: true, message: '对应公共服务不能为空', trigger: 'bulr' }] |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
watch: {}, |
||||
|
|
||||
|
created() {}, |
||||
|
async mounted() { |
||||
|
this.user = this.$store.state.user; |
||||
|
this.agencyId = this.user.agencyId; |
||||
|
this.startLoading(); |
||||
|
if (this.pageType == "edit") { |
||||
|
this.getDetail(); |
||||
|
} |
||||
|
this.getDemandOptions(); |
||||
|
this.getCommonServiceTypeOptions(); |
||||
|
await this.endLoading(); |
||||
|
this.endLoading(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleAreaChange1(data) { |
||||
|
let that = this; |
||||
|
let demandList = []; |
||||
|
const obj = this.$refs["cascaderItem1"].getCheckedNodes(); |
||||
|
//标签上定义的 ref值 |
||||
|
obj.forEach((item) => { |
||||
|
if (item.data.pvalue != "0") { |
||||
|
let obj2 = { |
||||
|
demandCategoryId: item.data.id, |
||||
|
demandCategoryCode: item.data.value, |
||||
|
demandParentCode: item.data.pvalue, |
||||
|
}; |
||||
|
demandList.push(obj2); |
||||
|
} |
||||
|
}); |
||||
|
that.formData.demandList = [...demandList]; |
||||
|
}, |
||||
|
handleAreaChange2(data) { |
||||
|
let that = this; |
||||
|
let commonServiceTypeList = []; |
||||
|
const obj = this.$refs["cascaderItem2"].getCheckedNodes(); |
||||
|
//标签上定义的 ref值 |
||||
|
obj.forEach((item) => { |
||||
|
let obj2 = { |
||||
|
commonServiceTypeId: item.data.id, |
||||
|
commonServiceTypePid: item.data.pid, |
||||
|
}; |
||||
|
commonServiceTypeList.push(obj2); |
||||
|
}); |
||||
|
that.formData.commonServiceTypeList = [...commonServiceTypeList]; |
||||
|
}, |
||||
|
getTreeData(data) { |
||||
|
if (!Array.isArray(data)) return []; |
||||
|
let arr = data.map((item) => { |
||||
|
let _item = {}; |
||||
|
if (item.children) { |
||||
|
if (item.children.length === 0) |
||||
|
_item = { ...item, children: undefined }; |
||||
|
else _item = { ...item, children: this.getTreeData(item.children) }; |
||||
|
} else { |
||||
|
_item = { ...item }; |
||||
|
} |
||||
|
return _item; |
||||
|
}); |
||||
|
return arr; |
||||
|
}, |
||||
|
|
||||
|
async getDemandOptions() { |
||||
|
const url = `/governance/icresidemanddict/demandoption`; |
||||
|
const { data, code, msg } = await requestPost(url); |
||||
|
if (code === 0) { |
||||
|
console.log("this.demandOptions", data); |
||||
|
this.demandOptions = this.getTreeData(data); |
||||
|
// console.log("this.demandOptions",this.demandOptions) |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getCommonServiceTypeOptions() { |
||||
|
const url = `/governance/commonServiceType/treeList`; |
||||
|
const { data, code, msg } = await requestGet(url); |
||||
|
if (code === 0) { |
||||
|
this.commonServiceTypeOptions = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
async getDetail() { |
||||
|
const url = `/actual/base/hobbyitem/detail/${this.detailId}`; |
||||
|
const { data, code, msg } = await requestPost(url); |
||||
|
if (code === 0) { |
||||
|
console.log("详情数据", data); |
||||
|
this.formData = { ...data }; |
||||
|
this.fenxiData(); |
||||
|
this.index = this.arr.indexOf(this.formData.categoryName); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
fenxiData() { |
||||
|
let that = this; |
||||
|
let commonServiceTypeList1 = []; |
||||
|
let demandList1 = []; |
||||
|
this.formData.commonServiceTypeList.forEach((item) => { |
||||
|
let arr = [item.commonServiceTypePid, item.commonServiceTypeId]; |
||||
|
commonServiceTypeList1.push(arr); |
||||
|
}); |
||||
|
this.formData.demandList.forEach((item) => { |
||||
|
console.log(item); |
||||
|
let arr2 = [item.demandParentCode, item.demandCategoryCode]; |
||||
|
demandList1.push(arr2); |
||||
|
}); |
||||
|
this.formData.commonServiceTypeList1 = [...commonServiceTypeList1]; |
||||
|
this.formData.demandList1 = [...demandList1]; |
||||
|
}, |
||||
|
handleComfirm() { |
||||
|
this.save(); |
||||
|
}, |
||||
|
|
||||
|
async save() { |
||||
|
let form = this.formData; |
||||
|
this.handleAreaChange1(); |
||||
|
this.handleAreaChange2(); |
||||
|
console.log("this.formData", this.formData); |
||||
|
const url = "/actual/base/hobbyitem/saveorupdate"; |
||||
|
var params = {}; |
||||
|
params = { ...this.formData }; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
this.$message.success("操作成功"); |
||||
|
this.handleCancle(); |
||||
|
} else if (code >= 8000) { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
handleCancle() { |
||||
|
// this.resetData(); |
||||
|
this.$emit("handleClose"); |
||||
|
}, |
||||
|
resetData() { |
||||
|
this.$refs.form.resetFields(); |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: "正在加载……", // 加载中需要显示的文字 |
||||
|
background: "rgba(0,0,0,.7)", // 背景颜色 |
||||
|
}); |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading() { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close(); |
||||
|
} |
||||
|
}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/management/form-main.scss"; |
||||
|
@import "@/assets/scss/modules/management/form.scss"; |
||||
|
@import "@/assets/scss/modules/visual/a_customize.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue