11

src/views/modules/base/epidemic/vaccin.vue

@@ -92,9 +92,9 @@
     </div>
     <div class="div_table">
       <div class="div_btn">
-        <!-- <el-button class="diy-button--add"
+        <el-button class="diy-button--add"
                    size="small"
-                   @click="handleAdd">新增</el-button> -->
+                   @click="handleAdd">新增</el-button>
 
         <el-button style="float: left"
                    class="diy-button--export"
@@ -183,7 +183,7 @@
 
         <el-table-column label="操作"
                          fixed="right"
-                         width="140"
+                         width="240"
                          header-align="center"
                          align="center"
                          class="operate">
@@ -198,7 +198,17 @@
                        class="div-table-button--edit"
                        size="small"
                        @click="handleAttention(scope.row)">同步</el-button>
+            <el-button v-if="scope.row.agencyId===agencyId"
+                       type="text"
+                       class="div-table-button--edit"
+                       size="small"
+                       @click="handleEdit(scope.row)">修改</el-button>
 
+            <el-button v-if="scope.row.agencyId===agencyId"
+                       type="text"
+                       class="div-table-button--delete "
+                       size="small"
+                       @click="handleDelete(scope.row)">删除</el-button>
             <el-button v-if="
                 isResiUser &&
                 scope.row.userType === 'synchro' &&
@@ -223,7 +233,7 @@
       </div>
     </div>
 
-    <!-- 修改弹出框 -->
+    <!-- 详情弹出框 -->
     <el-dialog :visible.sync="formShow"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
@@ -236,11 +246,24 @@
                   @dialogCancle="diaClose"
                   @dialogOk="addFormOk"></vaccinForm>
     </el-dialog>
+    <el-dialog :visible.sync="addFormShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="formTitle"
+               width="850px"
+               top="5vh"
+               class="dialog-h"
+               @closed="diaClose">
+      <vaccinAdd ref="ref_form_add"
+                 @dialogCancle="diaClose"
+                 @dialogOk="addFormOk"></vaccinAdd>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import vaccinForm from "./vaccinForm";
+import vaccinAdd from "./vaccinAdd";
 import natForm from "./natInfo/natForm";
 
 import { requestPost } from "@/js/dai/request";
@@ -296,11 +319,14 @@ export default {
       //form相关
       formShow: false,
       formTitle: "新增",
+
+      addFormShow: false,
     };
   },
   components: {
     vaccinForm,
     natForm,
+    vaccinAdd
   },
   async created () { },
   async mounted () {
@@ -311,6 +337,9 @@ export default {
 
     await this.loadTable();
   },
+  activated () {
+    this.$refs["ref_table"].doLayout();
+  },
 
   methods: {
     async handleSearch () {
@@ -381,17 +410,17 @@ export default {
 
     handleAdd () {
       this.formTitle = "新增";
-      this.formShow = true;
+      this.addFormShow = true;
       this.$nextTick(() => {
-        this.$refs.ref_form.initForm("add", null);
+        this.$refs.ref_form_add.initForm("add", null);
       });
     },
 
     handleEdit (row) {
       this.formTitle = "修改";
-      this.formShow = true;
+      this.addFormShow = true;
       this.$nextTick(() => {
-        this.$refs.ref_form.initForm("edit", row.icNatId);
+        this.$refs.ref_form_add.initForm("edit", row.icNatId);
       });
     },
 

src/views/modules/base/epidemic/vaccinAdd.vue

@@ -0,0 +1,575 @@
+<template>
+  <div class="epidemic-form">
+    <div class="dialog-h-content scroll-h">
+
+      <el-form ref="ref_form"
+               :inline="true"
+               :model="formData"
+               :rules="dataRule"
+               :disabled="formType==='detail'"
+               class="form">
+
+        <el-form-item v-if="formType==='add'"
+                      label="录入方式"
+                      label-width="150px"
+                      style="display: block">
+          <el-radio-group v-model="enterType"
+                          @change="handleChangeEnterType">
+
+            <el-radio :label="'1'">手动输入</el-radio>
+            <el-radio :label="'2'">选择居民</el-radio>
+
+          </el-radio-group>
+
+        </el-form-item>
+
+        <el-form-item v-if="formType==='add'"
+                      label="所属网格"
+                      style="display: block"
+                      label-width="150px">
+          <el-select class="item_width_2"
+                     v-model.trim="formData.gridId"
+                     placeholder="请选择"
+                     :disabled="!isFromResi"
+                     clearable>
+            <el-option v-for="item in gridList"
+                       @click.native="handleSelGrid(item.value)"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="formType==='add'"
+                      label="居民"
+                      prop="userId"
+                      style="display: block"
+                      label-width="150px">
+          <el-select class="item_width_2"
+                     v-model.trim="formData.userId"
+                     placeholder="请选择"
+                     filterable
+                     :disabled="!isFromResi"
+                     clearable>
+            <el-option v-for="item in personList"
+                       @click.native="handleSelPerson(item)"
+                       :key="item.demandUserId"
+                       :label="item.demandUserName"
+                       :value="item.demandUserId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="姓名"
+                      prop="name"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_2"
+                    placeholder="请输入姓名"
+                    clearable
+                    :disabled="isFromResi"
+                    v-model="formData.name">
+          </el-input>
+
+        </el-form-item>
+
+        <el-form-item label="手机号"
+                      prop="mobile"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_2"
+                    placeholder="请输入手机号"
+                    clearable
+                    :disabled="isFromResi"
+                    v-model="formData.mobile">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="身份证号"
+                      prop="idCard"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_2"
+                    placeholder="请输入身份证号"
+                    clearable
+                    :disabled="isFromResi"
+                    v-model="formData.idCard">
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="接种"
+                      style="display: block"
+                      prop="natTime"
+                      label-width="150px">
+          <el-date-picker class="item_width_2"
+                          v-model="formData.natTime"
+                          format="yyyy-MM-dd HH:mm"
+                          value-format="yyyy-MM-dd HH:mm"
+                          type="datetime"
+                          :picker-options="pickerOptions"
+                          clearable
+                          placeholder="选择时间">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="接种地点"
+                      prop="natAddress"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    placeholder="请输入检测地点"
+                    clearable
+                    v-model="formData.natAddress">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="疫苗厂家"
+                      prop="natAddress"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    placeholder="请输入检测地点"
+                    clearable
+                    v-model="formData.natAddress">
+          </el-input>
+        </el-form-item>
+
+        <div v-if=" formType!=='detail'">
+          <el-form-item label="通知渠道"
+                        prop="isSelChannel"
+                        label-width="150px"
+                        style="display: block">
+
+            <el-checkbox v-model="formData.isSelChannel"
+                         @change="handleChannelChange"
+                         key="0"
+                         label="0">小程序通知</el-checkbox>
+            <!-- <el-checkbox-group v-model="formData.channel">
+            <el-checkbox key="0"
+                         label="0">小程序通知</el-checkbox>
+            <el-checkbox key="1"
+                         label="1">短信通知</el-checkbox>
+
+          </el-checkbox-group> -->
+          </el-form-item>
+
+          <el-form-item v-if="formData.isSelChannel"
+                        label="通知内容"
+                        prop="content"
+                        label-width="150px"
+                        style="display: block">
+            <el-input class="item_width_1"
+                      type="textarea"
+                      maxlength="500"
+                      show-word-limit
+                      :autosize="{ minRows: 5, maxRows: 10 }"
+                      clearable
+                      placeholder="请输入通知内容"
+                      v-model="formData.content"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+
+    <div class="form_div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+      <el-button v-if="formType != 'detail'"
+                 size="small"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button>
+    </div>
+
+    <el-dialog :visible.sync="dialogVisible"
+               width="550px"
+               top="5vh"
+               append-to-body>
+      <img width="100%"
+           :src="dialogImageUrl"
+           alt="">
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+import { dateFormats } from '@/utils/index'
+
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+      hideUploadEdit: false, // 隐藏'上传按钮'
+      limitNum: 1,
+      enterType: '1',//录入方式1 手动输入  2  选择居民
+      isFromResi: false,//是否从已有居民信息中选择
+
+      gridList: [],
+      personList: [],
+      pickerOptions: { //控制时间范围
+        disabledDate (time) {
+          return time.getTime() > (Date.now())
+        }
+      },
+
+      btnDisable: false,
+
+      icNatId: '',
+      formData: {
+        icNatId: '',
+        agencyId: '',//当前网格所属组织Id	
+        userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值	
+        userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro	
+        name: '',
+        idCard: '',
+        mobile: '',
+        natTime: '',
+        natAddress: '',
+        natResult: '',
+        isSelChannel: false,
+        channel: [],
+        content: '',
+
+      },
+
+
+    }
+  },
+  components: {},
+  async mounted () {
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
+    //获取网格下拉框数据
+    await this.loadGrid()
+  },
+
+  methods: {
+    handleChannelChange (val) {
+      this.formData.content = ''
+    },
+
+    async initForm (type, icNatId) {
+      this.startLoading()
+      this.formData.agencyId = this.agencyId
+
+      this.$refs['ref_form'].resetFields();
+      this.isFromResi = false
+      this.enterType = '1'
+      this.formType = type
+
+      if (icNatId) {
+        this.icNatId = icNatId
+        this.formData.icNatId = icNatId
+        this.isFromResi = false
+        await this.loadFormData()
+      }
+
+      this.endLoading()
+
+
+    },
+
+    handleChangeEnterType (value) {
+      this.formData.name = ''
+      this.formData.mobile = ''
+      this.formData.idCard = ''
+      this.formData.gridId = ''
+      this.formData.userId = ''
+
+      this.$refs['ref_form'].resetFields();
+      if (value === '2') {
+        this.isFromResi = true
+      } else {
+        this.isFromResi = false
+      }
+
+    },
+
+    async loadGrid () {
+      const url = "/gov/org/customergrid/gridoption"
+
+      let params = {
+        agencyId: this.agencyId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.gridList = data
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+    async handleSelGrid (value) {
+
+      const url = "/epmetuser/icresiuser/demandusers"
+
+      let params = {
+        agencyId: this.agencyId,
+        gridId: value
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.personList = data
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+    async handleSelPerson (personItem) {
+      this.formData.userId = personItem.demandUserId
+      this.formData.name = personItem.demandUserName
+      this.formData.mobile = personItem.demandUserMobile
+      this.formData.idCard = personItem.idCard
+    },
+
+    async loadFormData () {
+
+      // const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/detail'
+      const url = '/epmetuser/icNat/detail'
+      let params = {
+        icNatId: this.icNatId,
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.formData = data
+        this.formData.channel = []
+        this.formData.content = ''
+        // if (data.channel && data.channel.length > 0) {
+        //   this.$set(this.formData, 'isSelChannel', true)
+        //   // this.formData.isSelChannel = true
+        // } else {
+        //   this.$set(this.formData, 'isSelChannel', false)
+        //   // this.formData.isSelChannel = false
+        //   this.formData.channel = []
+        //   this.formData.content = ''
+        // }
+        console.log(this.formData.isSelChannel)
+
+        this.formData.icNatId = this.icNatId
+        if (this.formData.userId) {
+          this.isFromResi = true
+        } else {
+          this.isFromResi = false
+        }
+
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    handleComfirm () {
+      this.$refs['ref_form'].validate((valid, messageObj) => {
+        if (!valid) {
+          app.util.validateRule(messageObj)
+
+        } else {
+          this.addNat()
+        }
+
+      })
+    },
+
+    async addNat () {
+      // if (this.imgLoading) {
+      //   this.$message({
+      //     type: 'warning',
+      //     message: '正在上传图片，请稍候重试'
+      //   })
+      //   return false;
+      // }
+      const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
+      if (regPhone.test(this.formData.mobile) === false) {
+        this.btnDisable = false
+        this.$message({
+          type: 'warning',
+          message: '请输入正确的手机号码'
+        })
+        return false;
+      }
+      const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
+      if (regCard.test(this.formData.idCard) === false) {
+        this.btnDisable = false
+        this.$message({
+          type: 'warning',
+          message: '请输入正确的身份证号码'
+        })
+        return false;
+      }
+
+      if (this.formData.isSelChannel) {
+        if (!this.formData.content) {
+          this.$message({
+            type: 'warning',
+            message: '请填写通知内容'
+          })
+          return false;
+        } else {
+          this.formData.channel = ['0']
+        }
+
+      } else {
+        this.formData.channel = []
+        this.formData.content = ''
+      }
+
+      this.btnDisable = true
+      setTimeout(() => {
+        this.btnDisable = false
+      }, 5000)
+
+      let url = ''
+      if (this.formType === 'add') {
+        url = '/epmetuser/icNat/add'
+        // url = "http://yapi.elinkservice.cn/mock/102/epmetuser/icNat/add"
+        this.formData.icNatId = ''
+
+      } else {
+        url = '/epmetuser/icNat/edit'
+        // url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/edit"
+      }
+
+
+      const { data, code, msg } = await requestPost(url, this.formData)
+
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.resetData()
+        this.$emit('dialogOk')
+        this.btnDisable = false
+
+      } else {
+        this.btnDisable = false
+        this.$message.error(msg)
+      }
+
+    },
+
+    handleCancle () {
+      this.resetData()
+      this.$emit('dialogCancle')
+
+    },
+
+
+    resetData () {
+      this.icNatId = ''
+      this.fileList = []
+      this.hideUploadEdit = false
+
+      this.formData = {
+        icNatId: '',
+        agencyId: '',//当前网格所属组织Id	
+        userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值	
+        userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro	
+        name: '',
+        idCard: '',
+        mobile: '',
+        natTime: '',
+        natAddress: '',
+        natResult: '',
+        isSelChannel: false,
+        channel: [],
+        content: '',
+
+
+
+      }
+    },
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: '姓名不能为空', trigger: 'blur' }
+        ],
+        idCard: [
+          { required: true, message: '身份证号不能为空', trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+        ],
+        natTime: [
+          { required: true, message: '接种时间不能为空', trigger: 'blur' },
+        ],
+        natTime: [
+          { required: true, message: '接种地点不能为空', trigger: 'blur' },
+        ],
+        natTime: [
+          { required: true, message: '疫苗厂家不能为空', trigger: 'blur' },
+        ],
+
+
+
+        isSelChannel: [
+          { required: false },
+        ],
+        channel: [
+          { required: false },
+        ],
+        content: [
+          { required: false },
+        ],
+
+      }
+    },
+
+  },
+  props: {
+
+
+
+    // serviceList: {
+    //   type: Array,
+    //   default: []
+    // },
+  }
+}
+</script>
+
+
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/management/epidemic.scss";
+</style>
+
+<style lang='scss'>
+// 隐藏上传按钮
+.hide .el-upload--picture-card {
+  display: none;
+}
+// 添加/删除文件时去掉动画过渡
+.el-upload-list__item {
+  transition: none !important;
+}
+</style>
+
+
+