Skip to content

P
patzn-cloud-web-h5app-drs
Commit 8a6a8c25 by zhuxiaomei
Options

添加与编辑

parent 3975ab1e
Showing with 1450 additions and 3 deletions
src/page/sampling-plan/add/MaintainComponent.vue 0 → 100644
<template>
<div style="height: 100%">
<van-field label="人员" center>
<template #input>
<Tag v-for="(item,index) in userList" :key="item.id" :name="index" closable @on-close="_userHandleClose">
{{ item.name }}
</Tag>
<van-button size="small" type="default" @click="_userAdd">添加</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="_locHandleClose">
{{ item.name }}
</Tag>
<van-button size="small" type="default" @click="_locAdd">手动添加</van-button>
<van-button size="small" type="default" @click="_locSearch" style="margin-left: 10px">搜索选择</van-button>
</template>
</van-field>
<van-popup v-model="showUserSelect">
<SamplerLab @cancel="showUserSelect=false" @on-change="_selectUserChange"
ref="userSelect"></SamplerLab>
</van-popup>
<van-popup v-model="showLocAdd">
<customer-navBar-layout style="width: 100vw;height:100vh">
<template #navBar>
<van-nav-bar
title="添加地点"
left-arrow
@click-left="showLocAdd=false"
></van-nav-bar>
</template>
<template #content>
<div class="layout-cont pop-page-cont">
<LocAdd @on-change="_addLocChange" ref="locAdd"></LocAdd>
</div>
</template>
</customer-navBar-layout>
</van-popup>
<van-popup v-model="showLocSelect">
<customer-navBar-layout style="width: 100vw;height:100vh">
<template #navBar>
<van-nav-bar
title="选择地点"
left-arrow
@click-left="showLocSelect=false"
></van-nav-bar>
</template>
<template #content>
<div class="layout-cont pop-page-cont">
<SelectLoc @on-change="_selectLocChange" ref="locSelect"></SelectLoc>
</div>
</template>
</customer-navBar-layout>
</van-popup>
<div class="bottom-btn" style="position: fixed;bottom: 0">
<!-- <van-button type="info" block @click="_back">上一步</van-button>-->
<van-button type="info" block @click="_save">保存并下一步</van-button>
</div>
</div>
</template>
<script>
import {samplingPlan, samplingPlace} from '../../../api'
import SamplerLab from './sampler/SamplerLab'
import LocAdd from './loc/LocAdd'
import SelectLoc from './loc/SelectLoc'
export default {
name: "Maintain",
components: {
SamplerLab,
LocAdd,
SelectLoc,
},
data() {
return {
userList: [],
locList: [],
showUserSelect: false,
showLocAdd: false,
showLocSelect: false,
planId: '',
}
},
methods: {
_open(planId) {
this.planId = planId
// this._getUserList()
// this._getLocList()
},
_userAdd() {
this.showUserSelect = true
this.$nextTick(function () {
this.$refs.userSelect._open(this.planId)
})
},
_locAdd() {
this.showLocAdd = true
this.$nextTick(function () {
this.$refs.locAdd._open(this.planId)
})
},
_locSearch() {
this.showLocSelect = true
this.$nextTick(function () {
this.$refs.locSelect._open(this.planId)
})
},
_selectUserChange(list) {
this.showUserSelect = false
this.userList = [...list, ...this.userList]
},
// _getUserList: async function () {
// const page = await samplingPlan.samplerPage({page: 1, rows: 1000, planId: this.planId})
// this.userList = page ? page.records : []
// },
_addLocChange(list) {
this.showLocAdd = false
this.locList = [...list, ...this.locList]
},
// _getLocList: async function () {
// const page = await samplingPlace.page({page: 1, rows: 1000, planId: this.planId})
// this.locList = page ? page.records : []
// },
_selectLocChange(list) {
this.showLocSelect = false
this.locList = [...list, ...this.locList]
},
_userHandleClose: async function (event, index) {
this.userList.splice(index, 1);
},
_locHandleClose: async function (event, index) {
this.locList.splice(index, 1);
},
_back() {
this.$emit('back')
},
_save: async function () {
let userObj = {
planId: this.planId,
samplerIds: this.userList.map(item => item.id).join(',')
}
const result = await samplingPlan.saveSampler(userObj)
const locResult = await samplingPlace.savePlaces({planId: this.planId, places: this.locList})
if (result && locResult) {
this.$emit('next')
}
}
}
}
</script>
<style scoped>
.pop-page-cont > div {
width: 100%;
height: 100%;
}
</style>
src/page/sampling-plan/add/SamplingPlanAdd.vue 0 → 100644
<template>
<div>
<van-steps :active="active" active-icon="success" active-color="#38f" v-if="id===''">
<van-step>抽样计划</van-step>
<van-step>维护人员地点</van-step>
<van-step>任务要求</van-step>
</van-steps>
<div v-if="active===0">
<van-form @submit="onSubmit">
<van-field
v-model="formObj.name"
name="name"
label="计划名称"
placeholder="计划名称"
:rules="[{ required: true, message: '请填写计划名称'}]"
></van-field>
<van-field
v-model="formObj.planDate"
name="monitorDate"
label="计划日期"
placeholder="计划日期"
@click="_selectDate('formObj.planDate')"
></van-field>
<van-field
v-model="formObj.issuingUnit"
name="issuingUnit"
label="任务下达单位"
placeholder="任务下达单位"
></van-field>
<van-field
v-model="formObj.taskSource"
name="taskSource"
label="任务来源"
placeholder="任务来源"
></van-field>
<van-field
type="textarea"
v-model="formObj.product"
name="product"
label="产品"
placeholder="产品"
></van-field>
<van-field
v-model="formObj.standard"
name="standard"
label="抽查依据标准"
placeholder="抽查依据标准"
></van-field>
<van-field
v-model="formObj.finishDate"
name="finishDate"
label="完成时间"
placeholder="完成时间"
@click="_selectDate('formObj.finishDate')"
></van-field>
<van-field
type="number"
v-model="formObj.samplingQuantity"
name="samplingQuantity"
label="抽样数量"
placeholder="抽样数量"
:rules="[{ required: true, message: '请填写抽样数量'}]"></van-field>
<van-field
type="number"
v-model="formObj.testCost"
name="testCost"
label="检测费用"
placeholder="检测费用"
></van-field>
<van-field
v-model="formObj.announcementNo"
name="announcementNo"
label="公告号"
placeholder="公告号"
></van-field>
<van-field
v-model="formObj.announcementDate"
name="announcementDate"
label="公告日期"
placeholder="公告日期"
@click="_selectDate('formObj.announcementDate')"
></van-field>
<van-field
type="textarea"
v-model="formObj.remark"
name="remark"
label="备注"
placeholder="备注"
></van-field>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit" v-if="id===''">
保存并下一步
</van-button>
<van-button round block type="info" native-type="submit" v-else>
保存
</van-button>
</div>
</van-form>
</div>
<div v-else-if="active===1" style="height: calc(100% - 63px)">
<MaintainComponent ref="maintain" @back="active--" @next="_nextTab3"></MaintainComponent>
</div>
<div v-else-if="active===2" style="height: calc(100% - 63px)">
<TaskRequirements ref="task" @next="_saveCreate" @back="active--"></TaskRequirements>
</div>
<van-popup v-model="showDatePicker" position="bottom"
:safe-area-inset-bottom="true"
:close-on-popstate="true">
<van-datetime-picker
type="date"
v-model="currentDate"
@confirm="_dateConfirm"
@cancel="showDatePicker = false"
></van-datetime-picker>
</van-popup>
</div>
</template>
<script>
import {samplingPlan} from '../../../api'
import TaskRequirements from './TaskRequirements'
import MaintainComponent from './MaintainComponent'
export default {
name: "SamplingPlanAdd",
components: {
TaskRequirements,
MaintainComponent,
},
data() {
return {
active: 0,
showDatePicker: false,
currentDate: new Date(),
selectDateType: '',
id: '',
formObj: {
name: '',
planDate: '',
issuingUnit: '',
taskSource: '',
product: '',
standard: '',
finishDate: '',
samplingQuantity: '',
testCost: 0,
announcementNo: '',
announcementDate: '',
remark: ''
},
planId:''
}
},
mounted() {
this._open()
},
methods: {
_open() {
if (this.$route.query.id) {//编辑
this.id = this.$route.query.id
this._getData()
} else {
this.id = ''
}
},
_getData: async function () {
let result = await samplingPlan.getById(this.id)
if (result) {
for (let key in this.formObj) {
if (result[key]) {
if (key === 'planDate' || key === 'finishDate' || key === 'announcementDate') {
this.formObj[key] = this.$dateformat(result[key], 'yyyy-mm-dd')
} else {
this.formObj[key] = result[key]
}
}
}
}
},
onSubmit(res) {
if (this.id) {
this._editSave(this.$serializeForm(res))
} else {
this._addSave(this.$serializeForm(res))
}
},
_editSave: async function (res) {
let result = await samplingPlan.edit({id: this.id, obj: res})
if (result) {
this.$toast('编辑成功！')
this.$router.go(-1)
}
},
_addSave: async function (res) {
let result = await samplingPlan.addPlan(res)
if (result) {
this.active++
this.planId = result
this.$nextTick(function () {
this.$refs.maintain._open(result)
})
}
},
_selectDate(type) {
this.selectDateType = type
this.showDatePicker = true
},
_dateConfirm(date) {
switch (this.selectDateType) {
case 'formObj.planDate':
this.formObj.planDate = this.$dateformat(date, 'yyyy-mm-dd')
break
case 'formObj.finishDate':
this.formObj.finishDate = this.$dateformat(date, 'yyyy-mm-dd')
break
case 'formObj.announcementDate':
this.formObj.announcementDate = this.$dateformat(date, 'yyyy-mm-dd')
break
}
this.showDatePicker = false
},
_nextTab3(){
this.active++
this.$nextTick(function () {
this.$refs.task._open(this.planId)
})
},
_saveCreate() {
}
}
}
</script>
<style scoped>
</style>
src/page/sampling-plan/add/SelectLoc.vue 0 → 100644
<!--<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 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="_back">上一步</van-button>-->
<!-- <van-button type="info" block @click="_add">添加</van-button>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import {samplingPlace} from '../../../api'-->
<!--let that = {}-->
<!--export default {-->
<!-- data() {-->
<!-- return {-->
<!-- map: {},-->
<!-- district: {},-->
<!-- placeSearch: {},-->
<!-- polygons: [],-->
<!-- adcode: '',-->
<!-- provinceSelect: {},-->
<!-- citySelect: {},-->
<!-- districtSelect: {},-->
<!-- 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)-->
<!-- this.$emit('next')-->
<!-- }-->
<!-- this.$emit('next')-->
<!-- },-->
<!-- _back(){-->
<!-- this.$emit('back')-->
<!-- },-->
<!-- _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()-->
<!-- 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端报错-->
<!-- }-->
<!-- //清空下一级别的下拉列表-->
<!-- 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('&#45;&#45;请选择&#45;&#45;');-->
<!-- //获取下拉项的等级 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 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;-->
<!--}-->
<!--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(: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::-ms-value {-->
<!-- color: #495057;-->
<!-- background-color: #fff-->
<!--}-->
<!--</style>-->
src/page/sampling-plan/add/SelectSampler.vue 0 → 100644
<!--<template>-->
<!-- <div>-->
<!-- <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.id" 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="_back">上一步</van-button>-->
<!-- <van-button type="info" block @click="_add">保存并下一步</van-button>-->
<!-- </div>-->
<!-- </div>-->
<!--</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.planId = planId-->
<!-- this._getData()-->
<!-- },-->
<!-- _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,-->
<!-- planId: this.planId,-->
<!-- status: 1-->
<!-- };-->
<!-- 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.id) === -1) {-->
<!-- this.checkListValue.push(item.id);-->
<!-- } else {-->
<!-- this.checkListValue.splice(this.checkListValue.indexOf(item.id), 1);-->
<!-- }-->
<!-- },-->
<!-- _add() {-->
<!-- if (this.checkListValue.length === 0) {-->
<!-- this.$toast('请至少选择一条数据！')-->
<!-- } else {-->
<!-- this._addOk()-->
<!-- }-->
<!-- },-->
<!-- _addOk: async function () {-->
<!-- let data = {-->
<!-- planId: this.planId,-->
<!-- samplerIds: this.checkListValue.join(',')-->
<!-- }-->
<!-- let result = await samplingPlan.saveSampler(data)-->
<!-- if (result) {-->
<!-- // this.$toast('操作成功')-->
<!-- // this.$router.go(-1)-->
<!-- this.$emit('next')-->
<!-- }-->
<!-- this.$emit('next')-->
<!-- },-->
<!-- _back() {-->
<!-- this.$emit('back')-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style scoped>-->
<!--</style>-->
src/page/sampling-plan/add/loc/LocAdd.vue 0 → 100644
<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>
</template>
<script>
// import {samplingPlace} from '../../../api'
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() {
this.$emit('on-change', [{...this.formObj}])
}
}
}
</script>
<style scoped>
</style>
src/page/sampling-plan/add/loc/SelectLoc.vue 0 → 100644
<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 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'
let that = {}
export default {
data() {
return {
map: {},
district: {},
placeSearch: {},
polygons: [],
adcode: '',
provinceSelect: {},
citySelect: {},
districtSelect: {},
completeData: {},
formObj: {
key: ''
},
isSearch: false,
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 places = this.checkListValue.map(item => {
return {
name: item.name,
address: item.address,
latitude: item.latitude,
longitude: item.longitude
}
})
this.$emit('on-change',places)
},
_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.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 !== '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 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;
}
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(: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::-ms-value {
color: #495057;
background-color: #fff
}
</style>
src/page/sampling-plan/loc/SelectLocChecked.vue → src/page/sampling-plan/add/loc/SelectLocChecked.vue
......@@ -38,7 +38,7 @@
</template>
<script>
import {samplingPlace} from '../../../api'
import {samplingPlace} from '../../../../api'
export default {
data() {
......
src/page/sampling-plan/sampler/SamplerChecked.vue → src/page/sampling-plan/add/sampler/SamplerChecked.vue
......@@ -23,14 +23,17 @@
</van-pull-refresh>
</div>
<div class="bottom-btn">
<van-button type="info" square block @click="_add">添加</van-button>
<van-button type="info" square block @click="_add">手动添加</van-button>
<van-button type="primary" square block @click="_create">随机生成抽样人员</van-button>
</div>
</div>
</template>
<script>
import {samplingPlan} from '../../../api'
/**
* 抽样计划-人员双随机
*/
import {samplingPlan} from '../../../../api'
export default {
data() {
......
src/page/sampling-plan/add/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} 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 {
this.$emit('on-change',this.checkListValue)
}
},
_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