Commit b5d4b997 authored by 黄奎's avatar 黄奎

页面修改

parent d392ccec
......@@ -29,8 +29,8 @@
</div>
<div class="row wrap">
<div class="col-6">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.StudyCountryId"
ref="School_Id" :options="CountryList" label="留学国家" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
<q-select filled stack-label option-value="ID" option-label="Name" v-model="objOption.StudyCountryId"
ref="StudyCountryId" :options="CountryList" label="留学国家" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
map-options />
</div>
......
<template>
<q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
<q-card style="width: 800px;max-width:900px;">
<q-card-section>
<div class="text-h6">{{objOption.MenuId==0?'新增地区信息':'修改地区信息'}}</div>
</q-card-section>
<q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="text-caption q-mb-lg q-px-md text-grey-6">地区信息</div>
<div class="row wrap">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.Name" ref="Name"
class="col-6 q-pr-lg q-pb-lg" label="地区名称" :rules="[val => !!val || '请填地区名称']" />
<q-select filled stack-label class="col-6 q-pr-lg" option-value="Id" option-label="Name"
v-model="objOption.CodeLevel" :options="LevelList" emit-value map-options label="等级"
@input="changeType()" />
</div>
<div class="row wrap">
<q-select clearable use-input :disable="objOption.CodeLevel==1" filled stack-label class="col-6 q-pr-lg q-pb-lg" option-value="ID"
option-label="Name" v-model="objOption.CountryId" :options="CountryList" emit-value map-options label="所属国家"
@input="changeProvice()" @filter="filterCountry" />
<q-select clearable use-input :disable="objOption.CodeLevel==2" filled stack-label class="col-6 q-pr-lg" option-value="ID"
option-label="Name" v-model="objOption.ProviceId" :options="ProviceList" emit-value map-options label="所属省份"
@input="changeCity()" @filter="filterProvice" />
</div>
<div class="row wrap">
<q-select clearable use-input :disable="objOption.CodeLevel==3" filled stack-label class="col-6 q-pr-lg q-pb-lg" option-value="ID"
option-label="Name" v-model="objOption.CityId" :options="CityList" emit-value map-options label="所属城市"
@filter="filterCity" />
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
<q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
@click="setArea" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
import {
queryCountryList,
queryAreaList,
queryAreaInfo,
saveArea
} from '../../api/common/common'
export default {
props: {
saveObj: {
type: Object,
default: null
}
},
data() {
return {
persistent: true,
objOption: {
ID: 0, //地区编号
Name: "", //地区名称
ParentID: "", //父节点编号
CodeLevel: 1, //等级(1-国家,2-省份,3-城市,4-区县)
CountryId: "", //国家编号
ProviceId: "", //省份编号
CityId: "", //城市编号
},
//等级列表
LevelList: [{
Id: 1,
Name: "国家"
},
{
Id: 2,
Name: "省"
},
{
Id: 3,
Name: "市"
},
{
Id: 4,
Name: "区县"
},
],
optionTitle: "",
CountryList: [], //国家列表
AllCountryList: [], //所有国家
ProviceList: [], //省份列表
AllProviceList: [], //所有省份
CityList: [], //城市列表
AllCityList: [], //所有城市列表
saveLoading: false,
}
},
created() {
this.getCountryList();
},
mounted() {
this.initObj()
},
methods: {
//筛选国家
filterCountry(val, update) {
update(() => {
if (val === '') {
this.CountryList = JSON.parse(JSON.stringify(this.AllCountryList))
} else {
const needle = val.toLowerCase();
this.CountryList = this.AllCountryList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
}
})
},
//筛选省份
filterProvice(val, update) {
update(() => {
if (val === '') {
this.ProviceList = JSON.parse(JSON.stringify(this.AllProviceList))
} else {
const needle = val.toLowerCase();
this.ProviceList = this.AllProviceList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
}
})
},
//筛选城市
filterCity(val, update) {
update(() => {
if (val === '') {
this.CityList = JSON.parse(JSON.stringify(this.AllCityList))
} else {
const needle = val.toLowerCase();
this.CityList = this.AllCityList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
}
})
},
//获取国家列表
getCountryList() {
queryCountryList({}).then(res => {
this.CountryList = res.Data;
this.AllCountryList = res.Data;
})
},
//类型切换
changeType() {
this.objOption.CountryId = "";
this.objOption.ProviceId = "";
this.objOption.CityId = "";
},
//获取省份
changeProvice() {
if (this.objOption.CountryId != "") {
queryAreaList({
ParentID: this.objOption.CountryId
}).then(res => {
if (res.Code == 1) {
this.ProviceList = res.Data;
this.AllProviceList = res.Data;
}
})
}
},
//获取城市列表
changeCity() {
if (this.objOption.ProviceId != "") {
queryAreaList({
ParentID: this.objOption.ProviceId
}).then(res => {
if (res.Code == 1) {
this.CityList = res.Data;
this.AllCityList = res.Data;
}
})
}
},
//初始化表单
initObj() {
if (this.saveObj && this.saveObj.ID > 0) {
queryAreaInfo({
ID: this.saveObj.ID
}).then(res => {
var tempData = res.Data;
this.objOption.ID = tempData.ID;
this.objOption.Name = tempData.Name;
this.objOption.ParentID = tempData.ParentID;
this.objOption.CodeLevel = tempData.CodeLevel;
if (tempData.CountryId && tempData.CountryId == 0) {
this.objOption.CountryId = "";
} else {
this.objOption.CountryId = tempData.CountryId;
}
if (tempData.ProviceId && tempData.ProviceId == 0) {
this.objOption.ProviceId = "";
} else {
this.objOption.ProviceId = tempData.ProviceId;
}
if (tempData.CityId && tempData.CityId == 0) {
this.objOption.CityId = "";
} else {
this.objOption.CityId = tempData.CityId;
}
if (tempData.ProviceId && tempData.ProviceId > 0) {
this.changeProvice()
}
if (tempData.CityId && tempData.CityId > 0) {
this.changeCity();
}
})
this.optionTitle = "修改地区信息"
} else {
this.optionTitle = "新增地区"
this.objOption.ID = 0;
this.objOption.Name = '';
this.objOption.ParentID = '';
this.objOption.CodeLevel = 1;
}
},
//关闭弹窗
closeSaveForm() {
this.$emit('close')
this.persistent = false
},
//保存菜单
setArea() {
this.saveLoading = true;
if (this.objOption.CodeLevel == 2) {
this.objOption.ParentID = this.objOption.CountryId;
}
if (this.objOption.CodeLevel == 3) {
this.objOption.ParentID = this.objOption.ProviceId;
}
if (this.objOption.CodeLevel == 4) {
this.objOption.ParentID = this.objOption.CityId;
}
saveArea(this.objOption).then(res => {
this.saveLoading = false
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '数据保存成功!',
position: 'top'
})
this.$emit("success")
this.closeSaveForm()
}).catch(() => {
this.saveLoading = false
})
}
},
}
</script>
\ No newline at end of file
......@@ -109,7 +109,7 @@
this.initObj()
},
methods: {
//筛选员工
//筛选菜单
filterFn(val, update) {
update(() => {
if (val === '') {
......
......@@ -47,6 +47,9 @@
</a>
</div>
</q-td>
<q-td v-if="col.name=='StudyCountryName'">
{{col.value}}
</q-td>
<q-td v-if="col.name=='SchoolName'">
{{col.value}}
</q-td>
......@@ -259,14 +262,13 @@
},
dataList: [],
loading: true,
columns: [
{
columns: [{
name: 'Remark',
label: '备注',
field: 'Remark',
align: 'left'
},
{
{
name: 'ProductTypeName',
label: '类型',
field: 'ProductTypeName',
......@@ -284,6 +286,12 @@
field: 'SupplierName',
align: 'left'
},
{
name: 'StudyCountryName',
label: '留学国家',
field: 'StudyCountryName',
align: 'left'
},
{
name: 'SchoolName',
label: '所属校区',
......@@ -346,10 +354,10 @@
],
//表格可见列
visibleColumns: [
'Remark', 'Name', 'SchoolName', 'SuggestPrice', 'SellPrice', "PreferentialList",
'Remark', 'Name', 'StudyCountryName', 'SchoolName', 'SuggestPrice', 'SellPrice', "PreferentialList",
"PreferentialListSellCommission",
"PreferentialListB2BCommission",
"EducationCommission", 'SaleStateName', 'Id', 'SupplierName','ProductTypeName'
"EducationCommission", 'SaleStateName', 'Id', 'SupplierName', 'ProductTypeName'
], //可见列
PageCount: 0,
isShowStudy: false, //是否显示留学弹窗
......@@ -551,7 +559,6 @@
}
}
}
</script>
<style scoped>
.border-bottom {
......@@ -559,9 +566,7 @@
padding-bottom: 5px;
margin-bottom: 5px;
}
</style>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
</style>
\ No newline at end of file
......@@ -48,6 +48,9 @@
<q-td :props="props">
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
@click="editArea(props.row)" />
<q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
@click="delArea(props.row)" />
</q-td>
</template>
</q-table>
......@@ -58,7 +61,8 @@
</template>
<script>
import {
queryAreaPage
queryAreaPage,
deleteArea
} from '../../api/common/common'
import areaForm from '../../components/system/area-form'
export default {
......@@ -132,6 +136,34 @@
this.getAreapage();
},
methods: {
//删除地区
delArea(item) {
var that=this;
this.$q.dialog({
title: '提示信息',
message: '是否确定删除?',
cancel: true,
persistent: true,
ok: "确定",
cancel: "取消",
}).onOk(() => {
let delMsg = {
ID: item.ID,
}
deleteArea(delMsg).then(res => {
if (res.Code == 1) {
that.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '操作成功',
position: 'top'
})
that.refreshPage();
}
})
})
},
//刷新页面
refreshPage() {
this.isShowAreaForm = false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment