添加与编辑

src/page/sampling-plan/add/TaskRequirements.vue

+<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>
+    </div>
+    <div class="layout-cont-btn">
+      <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="_back">上一步</van-button>-->
+      <van-button type="info" block @click="_save">保存</van-button>
+      <van-button type="info" block @click="_submit">提交</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {samplingPlan} from '../../../api'
+import SelectSamplerChecked from '../sampler/SelectSamplerChecked'
+import SelectLocChecked from './loc/SelectLocChecked'
+
+export default {
+  name: "CreateSampler",
+  components: {
+    SelectSamplerChecked,
+    SelectLocChecked
+  },
+  data() {
+    return {
+      showAllSelect: false,
+      planId: '',
+      count: '',
+      userList: [],
+      showSelect: false,
+      locCount: '',
+      locList: []
+    }
+  },
+  methods: {
+    _open(planId) {
+      this.planId = planId
+    },
+    _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(-1)
+        }
+      }
+    },
+    _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>