Skip to content

P
patzn-cloud-web-h5app-drs
Commit c55e1d4c by zhuxiaomei
Options

维护人员地点

parent 8e1e6a81
Showing with 728 additions and 407 deletions
src/page/sampling-plan/RandomCreate.vue 0 → 100644
<template>
<div>
<div class="layout-cont-btn">
<van-form>
<van-field
v-model="count"
name="count"
type="digit"
required center
label="人员随机数量"
placeholder="请输入人员随机数量"
:rules="[{ required: true, message: '' }]">
<template #button>
<van-button size="small" type="info" @click="_create">生成</van-button>
</template>
</van-field>
<van-field label="人员" center>
<template #input>
<Tag v-for="(item,index) in userList" :key="item.id" :name="index" closable @on-close="_handleClose">
{{ item.name }}
</Tag>
<van-button size="small" type="default" @click="_add">添加</van-button>
</template>
</van-field>
</van-form>
<van-form>
<van-field
v-model="locCount"
name="count"
type="digit"
required center
label="地点随机数量"
placeholder="请输入地点随机数量"
:rules="[{ required: true, message: '' }]">
<template #button>
<van-button size="small" type="info" @click="_locCreate">生成</van-button>
</template>
</van-field>
<van-field label="地点" center>
<template #input>
<Tag v-for="(item,index) in locList" :key="item.id" :name="index" closable @on-close="_handleLocClose">
{{ item.name }}
</Tag>
<van-button size="small" type="default" @click="_addLoc">添加</van-button>
</template>
</van-field>
</van-form>
</div>
<van-popup v-model="showAllSelect">
<SelectSamplerChecked @cancel="showAllSelect=false" @on-change="_selectChange"
ref="select"></SelectSamplerChecked>
</van-popup>
<van-popup v-model="showSelect">
<SelectLocChecked @cancel="showSelect=false" @on-change="_selectLocChange" ref="selectLoc"></SelectLocChecked>
</van-popup>
<div class="bottom-btn" style="position: fixed;bottom: 0">
<van-button type="info" block @click="_save">保存</van-button>
</div>
</div>
</template>
<script>
import {samplingPlan} from '../../api'
import SelectSamplerChecked from './sampler/SelectSamplerChecked'
import SelectLocChecked from './add/loc/SelectLocChecked'
export default {
name: "CreateSampler",
components: {
SelectSamplerChecked,
SelectLocChecked
},
data() {
return {
showAllSelect: false,
planId: '',
count: '',
userList: [],
showSelect: false,
locCount: '',
locList: []
}
},
mounted() {
this.planId = this.$route.query.planId
this._getInfo()
},
methods: {
_getInfo: async function () {
const result = await samplingPlan.getSamplerPlace({planId: this.planId})
if (result) {
this.userList = result.samplers
this.locList = result.places;
}
},
_create: async function () {
if (this.count) {
let result = await samplingPlan.generateSampler({count: this.count, planId: this.planId})
if (result) {
this.$toast('生成成功！')
this.userList = result
}
} else {
this.$toast("请输入随机数量")
}
},
_handleClose(event, index) {
this.userList.splice(index, 1);
},
_add() {
this.showAllSelect = true
this.$nextTick(function () {
this.$refs.select._open(this.planId)
})
},
_selectChange(res) {
this.showAllSelect = false
this.userList = [...res, ...this.userList]
},
_save: async function () {
if (this.userList.length === 0) {
this.$toast('请生成人员！')
} else if (this.locList.length === 0) {
this.$toast('请生成地点！')
} else {
let result = await samplingPlan.saveSamplerRandom({
planId: this.planId,
samplerIds: this.userList.map(item => item.id).join(',')
})
let resultLoc = await samplingPlan.savePlace({
planId: this.planId,
placeIds: this.locList.map(item => item.id).join(',')
})
if (result && resultLoc) {
this.$toast('保存成功！')
this.$router.go(-2)
}
}
},
_locCreate: async function () {
if (this.locCount) {
let result = await samplingPlan.generatePlace({count: this.locCount, planId: this.planId})
if (result) {
this.$toast('生成成功！')
this.locList = result
}
} else {
this.$toast("请输入随机数量")
}
},
_handleLocClose(event, name) {
const index = this.locList.indexOf(name);
this.locList.splice(index, 1);
},
_addLoc() {
this.showSelect = true
this.$nextTick(function () {
this.$refs.selectLoc._open(this.planId)
})
},
_selectLocChange(res) {
this.showSelect = false
this.locList = [...res, ...this.locList]
},
_back() {
this.$emit('back')
},
_submit: async function () {
if (this.userList.length === 0) {
this.$toast('请生成人员！')
} else if (this.locList.length === 0) {
this.$toast('请生成地点！')
} else {
let result = await samplingPlan.saveSubmitPlan({
planId: this.planId,
samplerIds: this.userList.map(item => item.id).join(','),
placeIds: this.locList.map(item => item.id).join(',')
})
if (result) {
this.$toast('操作成功！')
this.$router.go(-1)
}
}
}
}
}
</script>
<style scoped>
</style>
src/page/sampling-plan/add/MaintainComponent.vue → src/page/sampling-plan/add/AddMaintain.vue
...@@ -70,7 +70,6 @@ import LocAdd from './loc/LocAdd' ...@@ -70,7 +70,6 @@ import LocAdd from './loc/LocAdd'
import SelectLoc from './loc/SelectLoc' import SelectLoc from './loc/SelectLoc'
export default { export default {
name: "Maintain",
components: { components: {
SamplerLab, SamplerLab,
LocAdd, LocAdd,
......
src/page/sampling-plan/add/SamplingPlanAdd.vue
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
</van-form> </van-form>
</div> </div>
<div v-else-if="active===1" style="height: calc(100% - 63px)"> <div v-else-if="active===1" style="height: calc(100% - 63px)">
<MaintainComponent ref="maintain" @back="active--" @next="_nextTab3"></MaintainComponent> <AddMaintain ref="maintain" @back="active--" @next="_nextTab3"></AddMaintain>
</div> </div>
<div v-else-if="active===2" style="height: calc(100% - 63px)"> <div v-else-if="active===2" style="height: calc(100% - 63px)">
<TaskRequirements ref="task" @next="_saveCreate" @back="active--"></TaskRequirements> <TaskRequirements ref="task" @next="_saveCreate" @back="active--"></TaskRequirements>
...@@ -119,13 +119,13 @@ ...@@ -119,13 +119,13 @@
<script> <script>
import {samplingPlan} from '../../../api' import {samplingPlan} from '../../../api'
import TaskRequirements from './TaskRequirements' import TaskRequirements from './TaskRequirements'
import MaintainComponent from './MaintainComponent' import AddMaintain from './AddMaintain'
export default { export default {
name: "SamplingPlanAdd", name: "SamplingPlanAdd",
components: { components: {
TaskRequirements, TaskRequirements,
MaintainComponent, AddMaintain,
}, },
data() { data() {
return { return {
......
src/page/sampling-plan/add/TaskRequirements.vue
...@@ -31,8 +31,8 @@ ...@@ -31,8 +31,8 @@
name="count" name="count"
type="digit" type="digit"
required center required center
label="随机数量" label="地点随机数量"
placeholder="请输入随机数量" placeholder="请输入地点随机数量"
:rules="[{ required: true, message: '' }]"> :rules="[{ required: true, message: '' }]">
<template #button> <template #button>
<van-button size="small" type="info" @click="_locCreate">生成</van-button> <van-button size="small" type="info" @click="_locCreate">生成</van-button>
......
src/page/sampling-plan/loc/CreateLoc.vue → src/page/sampling-plan/loc/CreateLocDIS.vue
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<script> <script>
import {samplingPlan} from '../../../api' import {samplingPlan} from '../../../api'
import SelectLocChecked from './SelectLocChecked' import SelectLocChecked from '../add/loc/SelectLocChecked'
export default { export default {
name: "CreateLoc", name: "CreateLoc",
......
src/page/sampling-plan/loc/LocAdd.vue
<template> <template>
<div> <div>
<div class="layout-cont-btn"> <div class="layout-cont-btn">
<van-form ref="form" @submit="onSubmit"> <van-form ref="form" @submit="onSubmit">
<van-field <van-field
v-model="formObj.name" v-model="formObj.name"
name="name" name="name"
required required
label="地点" label="地点"
placeholder="请输入地点" placeholder="请输入地点"
:rules="[{ required: true, message: '' }]"> :rules="[{ required: true, message: '' }]">
</van-field> </van-field>
<van-field <van-field
v-model="formObj.address" v-model="formObj.address"
name="address" name="address"
label="地址" label="地址"
placeholder="请输入地址"> placeholder="请输入地址">
</van-field> </van-field>
<van-field <van-field
v-model="formObj.longitude" v-model="formObj.longitude"
name="longitude" name="longitude"
label="经度" label="经度"
placeholder="请输入经度"> placeholder="请输入经度">
</van-field> </van-field>
<van-field <van-field
v-model="formObj.latitude" v-model="formObj.latitude"
name="latitude" name="latitude"
label="纬度" label="纬度"
placeholder="请输入纬度"> placeholder="请输入纬度">
</van-field> </van-field>
</van-form> </van-form>
</div>
<div class="bottom-btn">
<van-button type="info" block @click="_save">保存</van-button>
</div>
</div> </div>
<div class="bottom-btn">
<van-button type="info" block @click="_save">保存</van-button>
</div>
</div>
</template> </template>
<script> <script>
import {samplingPlace} from '../../../api' import {samplingPlace} from '../../../api'
export default { export default {
name: "LocAdd", name: "LocAdd",
data() { data() {
return { return {
formObj: { formObj: {
name: '', name: '',
address: '', address: '',
longitude: '', longitude: '',
latitude: '', latitude: '',
}, },
planId: '' planId: ''
} }
}, },
mounted() { // mounted() {
this.planId = this.$route.query.planId // this.planId = this.$route.query.planId
}, // },
methods: { methods: {
_save(){ _open(planId) {
this.$refs.form.submit() this.planId = planId
}, this.formObj = this.$resetFields(this.formObj)
onSubmit(){ },
this._saveOk() _save() {
}, this.$refs.form.submit()
_saveOk: async function () { },
let obj = {...this.formObj, ...{planId: this.planId}} onSubmit() {
let result = await samplingPlace.add(this.$serializeForm(obj)) this._saveOk()
if (result) { },
this.$toast('操作成功！') _saveOk:async function() {
this.$router.go(-1) let obj = {...this.formObj, ...{planId: this.planId}}
} let result = await samplingPlace.add(this.$serializeForm(obj))
} if (result) {
} this.$toast('操作成功！')
this.$emit('on-change')
}
} }
}
}
</script> </script>
<style scoped> <style scoped>
......
src/page/sampling-plan/loc/SelectLoc.vue
<template> <template>
<div> <div>
<div style="display: flex"> <div style="display: flex">
<van-field name="checkboxGroup" label="省市区"> <van-field name="checkboxGroup" label="省市区">
<template #input> <template #input>
<select id='province' @change='_locSearch'></select> <select id='province' @change='_locSearch'></select>
</template> </template>
</van-field> </van-field>
<van-field name="checkboxGroup" label="地级市"> <van-field name="checkboxGroup" label="地级市">
<template #input> <template #input>
<select id='city' @change='_locSearch'></select> <select id='city' @change='_locSearch'></select>
</template> </template>
</van-field> </van-field>
<van-field name="checkboxGroup" label="区县"> <van-field name="checkboxGroup" label="区县">
<template #input> <template #input>
<select id='district' @change='_locSearch'></select> <select id='district' @change='_locSearch'></select>
</template> </template>
</van-field> </van-field>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="width:50%;"> <div style="width:50%;">
<van-field <van-field
v-model="formObj.key" v-model="formObj.key"
label="关键字" label="关键字"
placeholder="关键字" placeholder="关键字"
></van-field> ></van-field>
</div> </div>
<div style="width:50%;display: flex;background: #ffffff"> <div style="width:50%;display: flex;background: #ffffff">
<van-button type="primary" block style="margin:0 20px" @click="_areaSearch">搜索</van-button> <van-button type="primary" block style="margin:0 20px" @click="_areaSearch">搜索</van-button>
<van-button type="danger" block style="margin:0 20px" @click="_clear">清空</van-button> <van-button type="danger" block style="margin:0 20px" @click="_clear">清空</van-button>
</div> </div>
</div> </div>
<div class="layout-cont-s" style="height: calc(100% - 150px);margin-bottom: 10px"> <div class="layout-cont-s" style="height: calc(100% - 150px);margin-bottom: 10px">
<van-checkbox-group v-model="checkListValue" ref="checkboxGroup"> <van-checkbox-group v-model="checkListValue" ref="checkboxGroup">
<div class="result-item" v-for="(item,index) in resultList" :key="index" @click="_tapItem(item)"> <div class="result-item" v-for="(item,index) in resultList" :key="index" @click="_tapItem(item)">
<div> <div>
<van-checkbox :name="item" shape="square">名称：{{item.name}}</van-checkbox> <van-checkbox :name="item" shape="square">名称：{{ item.name }}</van-checkbox>
</div> </div>
<div>地址：{{item.address}}</div> <div>地址：{{ item.address }}</div>
<div>经度：{{item.longitude}}</div> <div>经度：{{ item.longitude }}</div>
<div>纬度：{{item.latitude}}</div> <div>纬度：{{ item.latitude }}</div>
</div>
</van-checkbox-group>
</div>
<div id='areaContainer' style="width: 100%;height: 50%;margin-top: 100px" v-show="false"></div>
<div id="areaPanel" v-show="false"></div>
<div class="bottom-btn">
<van-button type="info" block @click="_add">添加</van-button>
</div> </div>
</van-checkbox-group>
</div>
<div id='areaContainer' style="width: 100%;height: 50%;margin-top: 100px" v-show="false"></div>
<div id="areaPanel" v-show="false"></div>
<div class="bottom-btn">
<van-button type="info" block @click="_add">添加</van-button>
</div> </div>
</div>
</template> </template>
<script> <script>
import {samplingPlace} from '../../../api' import {samplingPlace} from '../../../api'
let that = {} let that = {}
export default { export default {
data() { data() {
return { return {
map: {}, map: {},
district: {}, district: {},
placeSearch: {}, placeSearch: {},
polygons: [], polygons: [],
adcode: '', adcode: '',
provinceSelect: {}, provinceSelect: {},
citySelect: {}, citySelect: {},
districtSelect: {}, districtSelect: {},
completeData: {}, completeData: {},
formObj: { formObj: {
key: '' key: ''
}, },
isSearch: false, isSearch: false,
planId: '', planId: '',
resultList: [], resultList: [],
checkListValue: [] checkListValue: []
} }
}, },
mounted() { mounted() {
this.planId = this.$route.query.planId this._open(this.$route.query.planId)
this._open() },
}, methods: {
methods: { _tapItem(item) {
_tapItem(item) { if (this.checkListValue.indexOf(item) === -1) {
if (this.checkListValue.indexOf(item) === -1) { this.checkListValue.push(item);
this.checkListValue.push(item); } else {
} else { this.checkListValue.splice(this.checkListValue.indexOf(item), 1);
this.checkListValue.splice(this.checkListValue.indexOf(item), 1); }
} },
}, _add() {
_add() { if (this.checkListValue.length === 0) {
if (this.checkListValue.length === 0) { this.$toast('请至少选择一条数据！')
this.$toast('请至少选择一条数据！') } else {
} else { this._addOk()
this._addOk() }
} },
}, _addOk: async function () {
_addOk: async function () { let data = {
let data = { places: this.checkListValue.map(item => {
places: this.checkListValue.map(item => { return {
return { name: item.name,
name: item.name, address: item.address,
address: item.address, latitude: item.latitude,
latitude: item.latitude, longitude: item.longitude
longitude: item.longitude }
} }),
}), planId: this.planId
planId: this.planId }
} let result = await samplingPlace.savePlaces(data)
let result = await samplingPlace.savePlaces(data) if (result) {
if (result) { this.$toast('操作成功')
this.$toast('操作成功') this.$emit('on-change')
this.$router.go(-1) }
} },
}, _open(planId) {
_open() { this.planId = planId
that = this
this.isSearch = false that = this
this.map = new AMap.Map('areaContainer', { this.isSearch = false
zoom: 14 this.map = new AMap.Map('areaContainer', {
}); zoom: 14
this.provinceSelect = document.getElementById('province'); });
this.citySelect = document.getElementById('city'); this.provinceSelect = document.getElementById('province');
this.districtSelect = document.getElementById('district'); this.citySelect = document.getElementById('city');
//行政区划查询 this.districtSelect = document.getElementById('district');
let opts = { //行政区划查询
subdistrict: 1, //返回下一级行政区 let opts = {
showbiz: false //最后一级返回街道信息 subdistrict: 1, //返回下一级行政区
}; showbiz: false //最后一级返回街道信息
this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用 };
this.district.search('中国', function (status, result) { this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
if (status === 'complete') { this.district.search('中国', function (status, result) {
that.completeData = result.districtList[0] if (status === 'complete') {
that._getData(result.districtList[0]); that.completeData = result.districtList[0]
} that._getData(result.districtList[0]);
}); }
}, });
_areaSearch() { },
this._clearSearch() _areaSearch() {
this.$nextTick(function () { this._clearSearch()
if (!this.adcode) { this.$nextTick(function () {
this.$toast('请输入关键字！') if (!this.adcode) {
return this.$toast('请输入关键字！')
} return
if (this.formObj.key) { }
//构造地点查询类 if (this.formObj.key) {
this.placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 50, // 单页显示结果条数 this.placeSearch = new AMap.PlaceSearch({
pageIndex: 1, // 页码 pageSize: 50, // 单页显示结果条数
city: that.adcode, // 兴趣点城市 pageIndex: 1, // 页码
citylimit: true, //是否强制限制在设置的城市内搜索 city: that.adcode, // 兴趣点城市
map: that.map, // 展现结果的地图实例 citylimit: true, //是否强制限制在设置的城市内搜索
panel: "areaPanel", // 结果列表将在此容器中进行展示。 map: that.map, // 展现结果的地图实例
// showCover: false, panel: "areaPanel", // 结果列表将在此容器中进行展示。
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 // showCover: false,
}); autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
this.placeSearch.search(that.formObj.key, function (status, result) { });
that.isSearch = true this.placeSearch.search(that.formObj.key, function (status, result) {
that.resultList = result.poiList.pois.map(item => { that.isSearch = true
return { that.resultList = result.poiList.pois.map(item => {
name: item.name, return {
address: item.address, name: item.name,
latitude: item.location.lat, address: item.address,
longitude: item.location.lng latitude: item.location.lat,
} longitude: item.location.lng
}) }
console.log(result, 'result') })
}); console.log(result, 'result')
} else { });
this.$toast('请输入关键字！') } else {
} this.$toast('请输入关键字！')
}) }
}, })
_clearSearch() { },
if (this.isSearch) { _clearSearch() {
this.placeSearch.clear() if (this.isSearch) {
} this.placeSearch.clear()
}, }
_clear() { },
this.map.clearMap(); _clear() {
//行政区划的去空 this.map.clearMap();
for (let i = 0, l = this.polygons.length; i < l; i++) { //行政区划的去空
this.polygons[i].setMap(null); for (let i = 0, l = this.polygons.length; i < l; i++) {
} this.polygons[i].setMap(null);
this._clearSearch() }
this._clearSearch()
this.formObj.key = '' this.formObj.key = ''
this.adcode = '' this.adcode = ''
this.provinceSelect.innerHTML = ''; this.provinceSelect.innerHTML = '';
this.citySelect.innerHTML = ''; this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = ''; this.districtSelect.innerHTML = '';
this._getData(this.completeData) this._getData(this.completeData)
}, },
_getData(data, level) { _getData(data, level) {
this.map.clearMap(); this.map.clearMap();
let bounds = data.boundaries; let bounds = data.boundaries;
if (bounds) { if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) { for (let i = 0, l = bounds.length; i < l; i++) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
map: that.map, map: that.map,
strokeWeight: 1, strokeWeight: 1,
strokeColor: '#0091ea', strokeColor: '#0091ea',
fillColor: '#80d8ff', fillColor: '#80d8ff',
fillOpacity: 0.2, fillOpacity: 0.2,
path: bounds[i] path: bounds[i]
}); });
that.polygons.push(polygon); that.polygons.push(polygon);
} }
// this.map.setFitView();//地图自适应 app端报错 // this.map.setFitView();//地图自适应 app端报错
} }
//清空下一级别的下拉列表 //清空下一级别的下拉列表
if (level === 'province') { if (level === 'province') {
this.citySelect.innerHTML = ''; this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = ''; this.districtSelect.innerHTML = '';
} else if (level === 'city') { } else if (level === 'city') {
this.districtSelect.innerHTML = ''; this.districtSelect.innerHTML = '';
} }
if (level !== 'district') { if (level !== 'district') {
//获取全国的省份list[] {adcode,level:'province',name:'山东省'} //获取全国的省份list[] {adcode,level:'province',name:'山东省'}
let subList = data.districtList; let subList = data.districtList;
if (subList) { if (subList) {
let contentSub = new Option('--请选择--'); let contentSub = new Option('--请选择--');
//获取下拉项的等级 province //获取下拉项的等级 province
let curlevel = subList[0].level; let curlevel = subList[0].level;
//获取id 为curlevel的元素select //获取id 为curlevel的元素select
let curList = document.querySelector('#' + curlevel); let curList = document.querySelector('#' + curlevel);
//添加一项option //添加一项option
curList.add(contentSub); curList.add(contentSub);
//遍历省份添加option到select下 //遍历省份添加option到select下
for (let i = 0, l = subList.length; i < l; i++) { for (let i = 0, l = subList.length; i < l; i++) {
contentSub = new Option(subList[i].name); contentSub = new Option(subList[i].name);
contentSub.setAttribute("value", subList[i].level); contentSub.setAttribute("value", subList[i].level);
contentSub.center = subList[i].center; contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode; contentSub.adcode = subList[i].adcode;
contentSub.cityCode = subList[i].cityCode; contentSub.cityCode = subList[i].cityCode;
curList.add(contentSub); curList.add(contentSub);
} }
} }
} }
}, },
_locSearch(obj) { _locSearch(obj) {
//清除地图上所有覆盖物 //清除地图上所有覆盖物
for (let i = 0, l = this.polygons.length; i < l; i++) { for (let i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null); this.polygons[i].setMap(null);
} }
let option = obj.srcElement[obj.srcElement.options.selectedIndex]; let option = obj.srcElement[obj.srcElement.options.selectedIndex];
that.adcode = option.adcode that.adcode = option.adcode
//如果没有选择 则清空下级下拉 //如果没有选择 则清空下级下拉
if (option.adcode) { if (option.adcode) {
this.district.setLevel(option.value); //行政区级别 this.district.setLevel(option.value); //行政区级别
this.district.setExtensions('all'); this.district.setExtensions('all');
//行政区查询 //行政区查询
//按照adcode进行查询可以保证数据返回的唯一性 //按照adcode进行查询可以保证数据返回的唯一性
this.district.search(option.adcode, function (status, result) { this.district.search(option.adcode, function (status, result) {
if (status === 'complete') { if (status === 'complete') {
that._getData(result.districtList[0], obj.srcElement.id); that._getData(result.districtList[0], obj.srcElement.id);
} }
}); });
} else { } else {
//省份未选择时 清空市区 //省份未选择时 清空市区
if (obj.srcElement.id === 'province') { if (obj.srcElement.id === 'province') {
this.citySelect.innerHTML = ''; this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = ''; this.districtSelect.innerHTML = '';
} }
//市未选择时 清空区 //市未选择时 清空区
if (obj.srcElement.id === 'city') { if (obj.srcElement.id === 'city') {
this.districtSelect.innerHTML = ''; this.districtSelect.innerHTML = '';
} }
//市 区未选择时的处理 //市 区未选择时的处理
let option1 = document.querySelector('#province')[document.querySelector('#province').options.selectedIndex] let option1 = document.querySelector('#province')[document.querySelector('#province').options.selectedIndex]
let option2 = document.querySelector('#city')[document.querySelector('#city').options.selectedIndex] let option2 = document.querySelector('#city')[document.querySelector('#city').options.selectedIndex]
let option3 = document.querySelector('#district')[document.querySelector('#district').options.selectedIndex] let option3 = document.querySelector('#district')[document.querySelector('#district').options.selectedIndex]
let id = '' let id = ''
if (option3 && option3.adcode) { if (option3 && option3.adcode) {
that.adcode = option3.adcode that.adcode = option3.adcode
this.district.setLevel(option3.value); //行政区级别 this.district.setLevel(option3.value); //行政区级别
id = 'district' id = 'district'
} else if (option2 && option2.adcode) { } else if (option2 && option2.adcode) {
that.adcode = option2.adcode that.adcode = option2.adcode
this.district.setLevel(option2.value); //行政区级别 this.district.setLevel(option2.value); //行政区级别
id = 'city' id = 'city'
} else { } else {
that.adcode = option1.adcode that.adcode = option1.adcode
this.district.setLevel(option1.value); //行政区级别 this.district.setLevel(option1.value); //行政区级别
id = 'province' id = 'province'
}
this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(that.adcode, function (status, result) {
if (status === 'complete') {
that._getData(result.districtList[0], id);
}
});
}
},
} }
} this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(that.adcode, function (status, result) {
if (status === 'complete') {
that._getData(result.districtList[0], id);
}
});
}
},
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#areaPanel { #areaPanel {
position: fixed; position: fixed;
background-color: white; background-color: white;
max-height: 90%; max-height: 90%;
overflow-y: auto; overflow-y: auto;
top: 10px; top: 10px;
right: 10px; right: 10px;
width: 280px; width: 280px;
} }
select { select {
position: relative; position: relative;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-bottom: 0;
display: inline-block; display: inline-block;
height: 32px; height: 32px;
padding: .375rem 1.75rem .375rem .75rem; padding: .375rem 1.75rem .375rem .75rem;
line-height: 1.5; line-height: 1.5;
color: #495057; color: #495057;
vertical-align: middle; vertical-align: middle;
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: 8px 10px; background-size: 8px 10px;
border: 1px solid #ced4da; border: 1px solid #ced4da;
border-radius: 4px; border-radius: 4px;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none appearance: none
} }
select:not(:last-child) { select:not(:last-child) {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0 border-bottom-right-radius: 0
} }
select:not(:first-child) { select:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0 border-bottom-left-radius: 0
} }
select:focus { select:focus {
border-color: #80bdff; border-color: #80bdff;
outline: 0; outline: 0;
box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1) box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
} }
select:focus::-ms-value { select:focus::-ms-value {
color: #495057; color: #495057;
background-color: #fff background-color: #fff
} }
</style> </style>
src/page/sampling-plan/sampler/SamplerLab.vue 0 → 100644
<template>
<customer-navBar-layout style="width: 100vw;height:100vh">
<template #navBar>
<van-nav-bar
title="选择人员"
left-arrow
@click-left="_cancel"
></van-nav-bar>
</template>
<template #content>
<search-bar label="地点" @search="_search"></search-bar>
<div class="layout-cont-s layout-cont-s-btn">
<van-pull-refresh v-model="refreshing" @refresh="_refresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="_load">
<van-checkbox-group v-model="checkListValue" ref="checkboxGroup">
<van-swipe-cell v-for="item in resultList" :key="item.name">
<div class="result-item" @click="_tapItem(item)">
<van-checkbox :name="item" shape="square"></van-checkbox>
<div>姓名：{{ item.name }}</div>
<div>电话：{{ item.tel }}</div>
<div>所属部门：{{ item.department }}</div>
</div>
</van-swipe-cell>
</van-checkbox-group>
</van-list>
</van-pull-refresh>
</div>
<div class="bottom-btn">
<van-button type="info" block @click="_add">添加</van-button>
</div>
</template>
</customer-navBar-layout>
</template>
<script>
/**
* 人员大库的操作
*/
import {sampler,samplingPlan} from '../../../api'
export default {
data() {
return {
resultList: [],
page: 1,
rows: 10,
refreshing: false,//刷新中...
loading: false,//加载中...
finished: false,//没有更多数据
checkListValue: [],
planId: ''
}
},
methods: {
_open(planId) {
this.checkListValue = []
this.planId = planId
this._refresh()
},
_search(value) {
this.key = value
this._refresh()
},
_refresh() {
this.page = 1
this._getData()
},
_searchParams() {
let data = {
page: this.page,
rows: this.rows,
name: this.key,
};
return this.$serializeForm(data)
},
_getData: async function () {
let result = await sampler.page(this._searchParams())
this.resultList = [...(this.page === 1 ? [] : this.resultList), ...result.records]
this.refreshing = false
this.loading = false
if (this.resultList.length === result.total) {
this.finished = true
}
},
_load() {
this.page = this.page + 1;
this._getData()
},
_tapItem(item) {
if (this.checkListValue.indexOf(item) === -1) {
this.checkListValue.push(item);
} else {
this.checkListValue.splice(this.checkListValue.indexOf(item), 1);
}
},
_add: async function () {
if (this.checkListValue.length === 0) {
this.$toast('请至少选择一条数据！')
} else {
const data = {
planId: this.planId,
samplerIds: this.checkListValue.map(item=>item.id).join(',')
}
const result = await samplingPlan.saveSampler(data)
if (result) {
this.$emit('on-change')
}
}
},
_cancel() {
this.$emit('cancel')
}
}
}
</script>
<style scoped>
</style>
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