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'
import SelectLoc from './loc/SelectLoc'
export default {
name: "Maintain",
components: {
SamplerLab,
LocAdd,
......
src/page/sampling-plan/add/SamplingPlanAdd.vue
......@@ -98,7 +98,7 @@
</van-form>
</div>
<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 v-else-if="active===2" style="height: calc(100% - 63px)">
<TaskRequirements ref="task" @next="_saveCreate" @back="active--"></TaskRequirements>
......@@ -119,13 +119,13 @@
<script>
import {samplingPlan} from '../../../api'
import TaskRequirements from './TaskRequirements'
import MaintainComponent from './MaintainComponent'
import AddMaintain from './AddMaintain'
export default {
name: "SamplingPlanAdd",
components: {
TaskRequirements,
MaintainComponent,
AddMaintain,
},
data() {
return {
......
src/page/sampling-plan/add/TaskRequirements.vue
......@@ -31,8 +31,8 @@
name="count"
type="digit"
required center
label="随机数量"
placeholder="请输入随机数量"
label="地点随机数量"
placeholder="请输入地点随机数量"
:rules="[{ required: true, message: '' }]">
<template #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 @@
<script>
import {samplingPlan} from '../../../api'
import SelectLocChecked from './SelectLocChecked'
import SelectLocChecked from '../add/loc/SelectLocChecked'
export default {
name: "CreateLoc",
......
src/page/sampling-plan/loc/LocAdd.vue
<template>
<div>
<div class="layout-cont-btn">
<van-form ref="form" @submit="onSubmit">
<van-field
v-model="formObj.name"
name="name"
required
label="地点"
placeholder="请输入地点"
:rules="[{ required: true, message: '' }]">
</van-field>
<van-field
v-model="formObj.address"
name="address"
label="地址"
placeholder="请输入地址">
</van-field>
<van-field
v-model="formObj.longitude"
name="longitude"
label="经度"
placeholder="请输入经度">
</van-field>
<van-field
v-model="formObj.latitude"
name="latitude"
label="纬度"
placeholder="请输入纬度">
</van-field>
</van-form>
</div>
<div class="bottom-btn">
<van-button type="info" block @click="_save">保存</van-button>
</div>
<div>
<div class="layout-cont-btn">
<van-form ref="form" @submit="onSubmit">
<van-field
v-model="formObj.name"
name="name"
required
label="地点"
placeholder="请输入地点"
:rules="[{ required: true, message: '' }]">
</van-field>
<van-field
v-model="formObj.address"
name="address"
label="地址"
placeholder="请输入地址">
</van-field>
<van-field
v-model="formObj.longitude"
name="longitude"
label="经度"
placeholder="请输入经度">
</van-field>
<van-field
v-model="formObj.latitude"
name="latitude"
label="纬度"
placeholder="请输入纬度">
</van-field>
</van-form>
</div>
<div class="bottom-btn">
<van-button type="info" block @click="_save">保存</van-button>
</div>
</div>
</template>
<script>
import {samplingPlace} from '../../../api'
import {samplingPlace} from '../../../api'
export default {
name: "LocAdd",
data() {
return {
formObj: {
name: '',
address: '',
longitude: '',
latitude: '',
},
planId: ''
}
},
mounted() {
this.planId = this.$route.query.planId
},
methods: {
_save(){
this.$refs.form.submit()
},
onSubmit(){
this._saveOk()
},
_saveOk: async function () {
let obj = {...this.formObj, ...{planId: this.planId}}
let result = await samplingPlace.add(this.$serializeForm(obj))
if (result) {
this.$toast('操作成功！')
this.$router.go(-1)
}
}
}
export default {
name: "LocAdd",
data() {
return {
formObj: {
name: '',
address: '',
longitude: '',
latitude: '',
},
planId: ''
}
},
// mounted() {
// this.planId = this.$route.query.planId
// },
methods: {
_open(planId) {
this.planId = planId
this.formObj = this.$resetFields(this.formObj)
},
_save() {
this.$refs.form.submit()
},
onSubmit() {
this._saveOk()
},
_saveOk:async function() {
let obj = {...this.formObj, ...{planId: this.planId}}
let result = await samplingPlace.add(this.$serializeForm(obj))
if (result) {
this.$toast('操作成功！')
this.$emit('on-change')
}
}
}
}
</script>
<style scoped>
......
src/page/sampling-plan/loc/SelectLoc.vue
<template>
<div>
<div style="display: flex">
<van-field name="checkboxGroup" label="省市区">
<template #input>
<select id='province' @change='_locSearch'></select>
</template>
</van-field>
<van-field name="checkboxGroup" label="地级市">
<template #input>
<select id='city' @change='_locSearch'></select>
</template>
</van-field>
<van-field name="checkboxGroup" label="区县">
<template #input>
<select id='district' @change='_locSearch'></select>
</template>
</van-field>
</div>
<div style="display: flex;">
<div style="width:50%;">
<van-field
v-model="formObj.key"
label="关键字"
placeholder="关键字"
></van-field>
</div>
<div style="width:50%;display: flex;background: #ffffff">
<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>
</div>
</div>
<div>
<div style="display: flex">
<van-field name="checkboxGroup" label="省市区">
<template #input>
<select id='province' @change='_locSearch'></select>
</template>
</van-field>
<van-field name="checkboxGroup" label="地级市">
<template #input>
<select id='city' @change='_locSearch'></select>
</template>
</van-field>
<van-field name="checkboxGroup" label="区县">
<template #input>
<select id='district' @change='_locSearch'></select>
</template>
</van-field>
</div>
<div style="display: flex;">
<div style="width:50%;">
<van-field
v-model="formObj.key"
label="关键字"
placeholder="关键字"
></van-field>
</div>
<div style="width:50%;display: flex;background: #ffffff">
<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>
</div>
</div>
<div class="layout-cont-s" style="height: calc(100% - 150px);margin-bottom: 10px">
<van-checkbox-group v-model="checkListValue" ref="checkboxGroup">
<div class="result-item" v-for="(item,index) in resultList" :key="index" @click="_tapItem(item)">
<div>
<van-checkbox :name="item" shape="square">名称：{{item.name}}</van-checkbox>
</div>
<div>地址：{{item.address}}</div>
<div>经度：{{item.longitude}}</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 class="layout-cont-s" style="height: calc(100% - 150px);margin-bottom: 10px">
<van-checkbox-group v-model="checkListValue" ref="checkboxGroup">
<div class="result-item" v-for="(item,index) in resultList" :key="index" @click="_tapItem(item)">
<div>
<van-checkbox :name="item" shape="square">名称：{{ item.name }}</van-checkbox>
</div>
<div>地址：{{ item.address }}</div>
<div>经度：{{ item.longitude }}</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>
</template>
<script>
import {samplingPlace} from '../../../api'
import {samplingPlace} from '../../../api'
let that = {}
export default {
data() {
return {
map: {},
district: {},
placeSearch: {},
polygons: [],
adcode: '',
let that = {}
export default {
data() {
return {
map: {},
district: {},
placeSearch: {},
polygons: [],
adcode: '',
provinceSelect: {},
citySelect: {},
districtSelect: {},
provinceSelect: {},
citySelect: {},
districtSelect: {},
completeData: {},
formObj: {
key: ''
},
isSearch: false,
completeData: {},
formObj: {
key: ''
},
isSearch: false,
planId: '',
resultList: [],
checkListValue: []
}
},
mounted() {
this.planId = this.$route.query.planId
this._open()
},
methods: {
_tapItem(item) {
if (this.checkListValue.indexOf(item) === -1) {
this.checkListValue.push(item);
} else {
this.checkListValue.splice(this.checkListValue.indexOf(item), 1);
}
},
_add() {
if (this.checkListValue.length === 0) {
this.$toast('请至少选择一条数据！')
} else {
this._addOk()
}
},
_addOk: async function () {
let data = {
places: this.checkListValue.map(item => {
return {
name: item.name,
address: item.address,
latitude: item.latitude,
longitude: item.longitude
}
}),
planId: this.planId
}
let result = await samplingPlace.savePlaces(data)
if (result) {
this.$toast('操作成功')
this.$router.go(-1)
}
},
_open() {
that = this
this.isSearch = false
this.map = new AMap.Map('areaContainer', {
zoom: 14
});
this.provinceSelect = document.getElementById('province');
this.citySelect = document.getElementById('city');
this.districtSelect = document.getElementById('district');
//行政区划查询
let opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
this.district.search('中国', function (status, result) {
if (status === 'complete') {
that.completeData = result.districtList[0]
that._getData(result.districtList[0]);
}
});
},
_areaSearch() {
this._clearSearch()
this.$nextTick(function () {
if (!this.adcode) {
this.$toast('请输入关键字！')
return
}
if (this.formObj.key) {
//构造地点查询类
this.placeSearch = new AMap.PlaceSearch({
pageSize: 50, // 单页显示结果条数
pageIndex: 1, // 页码
city: that.adcode, // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: that.map, // 展现结果的地图实例
panel: "areaPanel", // 结果列表将在此容器中进行展示。
// showCover: false,
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
this.placeSearch.search(that.formObj.key, function (status, result) {
that.isSearch = true
that.resultList = result.poiList.pois.map(item => {
return {
name: item.name,
address: item.address,
latitude: item.location.lat,
longitude: item.location.lng
}
})
console.log(result, 'result')
});
} else {
this.$toast('请输入关键字！')
}
})
},
_clearSearch() {
if (this.isSearch) {
this.placeSearch.clear()
}
},
_clear() {
this.map.clearMap();
//行政区划的去空
for (let i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null);
}
this._clearSearch()
planId: '',
resultList: [],
checkListValue: []
}
},
mounted() {
this._open(this.$route.query.planId)
},
methods: {
_tapItem(item) {
if (this.checkListValue.indexOf(item) === -1) {
this.checkListValue.push(item);
} else {
this.checkListValue.splice(this.checkListValue.indexOf(item), 1);
}
},
_add() {
if (this.checkListValue.length === 0) {
this.$toast('请至少选择一条数据！')
} else {
this._addOk()
}
},
_addOk: async function () {
let data = {
places: this.checkListValue.map(item => {
return {
name: item.name,
address: item.address,
latitude: item.latitude,
longitude: item.longitude
}
}),
planId: this.planId
}
let result = await samplingPlace.savePlaces(data)
if (result) {
this.$toast('操作成功')
this.$emit('on-change')
}
},
_open(planId) {
this.planId = planId
that = this
this.isSearch = false
this.map = new AMap.Map('areaContainer', {
zoom: 14
});
this.provinceSelect = document.getElementById('province');
this.citySelect = document.getElementById('city');
this.districtSelect = document.getElementById('district');
//行政区划查询
let opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
this.district.search('中国', function (status, result) {
if (status === 'complete') {
that.completeData = result.districtList[0]
that._getData(result.districtList[0]);
}
});
},
_areaSearch() {
this._clearSearch()
this.$nextTick(function () {
if (!this.adcode) {
this.$toast('请输入关键字！')
return
}
if (this.formObj.key) {
//构造地点查询类
this.placeSearch = new AMap.PlaceSearch({
pageSize: 50, // 单页显示结果条数
pageIndex: 1, // 页码
city: that.adcode, // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: that.map, // 展现结果的地图实例
panel: "areaPanel", // 结果列表将在此容器中进行展示。
// showCover: false,
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
this.placeSearch.search(that.formObj.key, function (status, result) {
that.isSearch = true
that.resultList = result.poiList.pois.map(item => {
return {
name: item.name,
address: item.address,
latitude: item.location.lat,
longitude: item.location.lng
}
})
console.log(result, 'result')
});
} else {
this.$toast('请输入关键字！')
}
})
},
_clearSearch() {
if (this.isSearch) {
this.placeSearch.clear()
}
},
_clear() {
this.map.clearMap();
//行政区划的去空
for (let i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null);
}
this._clearSearch()
this.formObj.key = ''
this.adcode = ''
this.formObj.key = ''
this.adcode = ''
this.provinceSelect.innerHTML = '';
this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = '';
this._getData(this.completeData)
},
_getData(data, level) {
this.map.clearMap();
let bounds = data.boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
let polygon = new AMap.Polygon({
map: that.map,
strokeWeight: 1,
strokeColor: '#0091ea',
fillColor: '#80d8ff',
fillOpacity: 0.2,
path: bounds[i]
});
that.polygons.push(polygon);
}
// this.map.setFitView();//地图自适应 app端报错
}
this.provinceSelect.innerHTML = '';
this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = '';
this._getData(this.completeData)
},
_getData(data, level) {
this.map.clearMap();
let bounds = data.boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
let polygon = new AMap.Polygon({
map: that.map,
strokeWeight: 1,
strokeColor: '#0091ea',
fillColor: '#80d8ff',
fillOpacity: 0.2,
path: bounds[i]
});
that.polygons.push(polygon);
}
// this.map.setFitView();//地图自适应 app端报错
}
//清空下一级别的下拉列表
if (level === 'province') {
this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = '';
} else if (level === 'city') {
this.districtSelect.innerHTML = '';
}
//清空下一级别的下拉列表
if (level === 'province') {
this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = '';
} else if (level === 'city') {
this.districtSelect.innerHTML = '';
}
if (level !== 'district') {
//获取全国的省份list[] {adcode,level:'province',name:'山东省'}
let subList = data.districtList;
if (subList) {
let contentSub = new Option('--请选择--');
//获取下拉项的等级 province
let curlevel = subList[0].level;
//获取id 为curlevel的元素select
let curList = document.querySelector('#' + curlevel);
//添加一项option
curList.add(contentSub);
//遍历省份添加option到select下
for (let i = 0, l = subList.length; i < l; i++) {
contentSub = new Option(subList[i].name);
contentSub.setAttribute("value", subList[i].level);
contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode;
contentSub.cityCode = subList[i].cityCode;
curList.add(contentSub);
}
}
}
},
_locSearch(obj) {
//清除地图上所有覆盖物
for (let i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null);
}
let option = obj.srcElement[obj.srcElement.options.selectedIndex];
that.adcode = option.adcode
//如果没有选择 则清空下级下拉
if (option.adcode) {
this.district.setLevel(option.value); //行政区级别
this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(option.adcode, function (status, result) {
if (status === 'complete') {
that._getData(result.districtList[0], obj.srcElement.id);
}
});
} else {
//省份未选择时 清空市区
if (obj.srcElement.id === 'province') {
this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = '';
}
//市未选择时 清空区
if (obj.srcElement.id === 'city') {
this.districtSelect.innerHTML = '';
}
if (level !== 'district') {
//获取全国的省份list[] {adcode,level:'province',name:'山东省'}
let subList = data.districtList;
if (subList) {
let contentSub = new Option('--请选择--');
//获取下拉项的等级 province
let curlevel = subList[0].level;
//获取id 为curlevel的元素select
let curList = document.querySelector('#' + curlevel);
//添加一项option
curList.add(contentSub);
//遍历省份添加option到select下
for (let i = 0, l = subList.length; i < l; i++) {
contentSub = new Option(subList[i].name);
contentSub.setAttribute("value", subList[i].level);
contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode;
contentSub.cityCode = subList[i].cityCode;
curList.add(contentSub);
}
}
}
},
_locSearch(obj) {
//清除地图上所有覆盖物
for (let i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null);
}
let option = obj.srcElement[obj.srcElement.options.selectedIndex];
that.adcode = option.adcode
//如果没有选择 则清空下级下拉
if (option.adcode) {
this.district.setLevel(option.value); //行政区级别
this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(option.adcode, function (status, result) {
if (status === 'complete') {
that._getData(result.districtList[0], obj.srcElement.id);
}
});
} else {
//省份未选择时 清空市区
if (obj.srcElement.id === 'province') {
this.citySelect.innerHTML = '';
this.districtSelect.innerHTML = '';
}
//市未选择时 清空区
if (obj.srcElement.id === 'city') {
this.districtSelect.innerHTML = '';
}
//市 区未选择时的处理
let option1 = document.querySelector('#province')[document.querySelector('#province').options.selectedIndex]
let option2 = document.querySelector('#city')[document.querySelector('#city').options.selectedIndex]
let option3 = document.querySelector('#district')[document.querySelector('#district').options.selectedIndex]
//市 区未选择时的处理
let option1 = document.querySelector('#province')[document.querySelector('#province').options.selectedIndex]
let option2 = document.querySelector('#city')[document.querySelector('#city').options.selectedIndex]
let option3 = document.querySelector('#district')[document.querySelector('#district').options.selectedIndex]
let id = ''
if (option3 && option3.adcode) {
that.adcode = option3.adcode
this.district.setLevel(option3.value); //行政区级别
id = 'district'
} else if (option2 && option2.adcode) {
that.adcode = option2.adcode
this.district.setLevel(option2.value); //行政区级别
id = 'city'
} else {
that.adcode = option1.adcode
this.district.setLevel(option1.value); //行政区级别
id = 'province'
}
this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(that.adcode, function (status, result) {
if (status === 'complete') {
that._getData(result.districtList[0], id);
}
});
}
},
let id = ''
if (option3 && option3.adcode) {
that.adcode = option3.adcode
this.district.setLevel(option3.value); //行政区级别
id = 'district'
} else if (option2 && option2.adcode) {
that.adcode = option2.adcode
this.district.setLevel(option2.value); //行政区级别
id = 'city'
} else {
that.adcode = option1.adcode
this.district.setLevel(option1.value); //行政区级别
id = 'province'
}
}
this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(that.adcode, function (status, result) {
if (status === 'complete') {
that._getData(result.districtList[0], id);
}
});
}
},
}
}
</script>
<style scoped lang="less">
#areaPanel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
#areaPanel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
select {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
display: inline-block;
height: 32px;
padding: .375rem 1.75rem .375rem .75rem;
line-height: 1.5;
color: #495057;
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-size: 8px 10px;
border: 1px solid #ced4da;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
select {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 0;
display: inline-block;
height: 32px;
padding: .375rem 1.75rem .375rem .75rem;
line-height: 1.5;
color: #495057;
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-size: 8px 10px;
border: 1px solid #ced4da;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
select:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
select:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
select:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
}
select:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
}
select:focus::-ms-value {
color: #495057;
background-color: #fff
}
select:focus::-ms-value {
color: #495057;
background-color: #fff
}
</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