medical_lab_ui_mobil/src/views/platform/bpmn/complaint/complaint.vue

<template>
  <van-overlay class="backgroundSty" z-index="2002" :show="showPop"  :lock-scroll="false">
    <div style="height:5%">
      <van-sticky>
        <van-nav-bar
          :title="
            '投诉 ' +
              (typeValue == '1'
                ? '编制'
                : typeValue == '3'
                ? '修改'
                : typeValue == '2'
                ? '详情'
                : '')
          "
          :right-text="typeValue == '3' ? '退回原因' : ''"
          @click-left="closePop()"
          @click-right="getBack()"
        >
          <template #left>
            <van-icon name="cross" class="ibps-nav-bar__close-icon" />
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <div class="scrollView">
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.touSuRen"
          required
          label="投诉者:"
          placeholder="请输入投诉者"
          label-width="6em"
          clearable
          :readonly="typeValue == '2' ? true : false"
        />
        <van-field
          v-model="form.touSuDanWei"
          required
          label="投诉单位:"
          placeholder="请输入投诉单位"
          label-width="6em"
          clearable
          :type="typeValue == '2' ? 'textarea' : 'text'"
          :readonly="typeValue == '2' ? true : false"
        />
        <van-field
          v-model="form.lianXiDianHua"
          required
          label="联系电话:"
          placeholder="请输入联系电话"
          label-width="6em"
          clearable
          :rules="[
            {
              validator: $common.getRequest.checkPhone,
              message: '手机号格式错误'
            }
          ]"
          :readonly="typeValue == '2' ? true : false"
        />
        <van-field
          v-model="form.touSuBuMenJiRenYu"
          required
          label="投诉部门及人员:"
          placeholder="请输入投诉部门及人员"
          label-width="6em"
          clearable
          :type="typeValue == '2' ? 'textarea' : 'text'"
          autosize
          :readonly="typeValue == '2' ? true : false"
        />
        <van-field
          name="radio"
          required
          label="投诉分类:"
          placeholder="请选择投诉类型"
          label-width="6em"
          :value="form.touSuFenLei"
          :readonly="typeValue == '2' ? true : false"
        >
          <template #input>
            <van-radio-group
              v-if="typeValue != '2'"
              v-model="form.touSuFenLei"
              direction="horizontal"
            >
              <van-radio
                v-for="(it, index) in touSuFenLeiList"
                :key="index"
                :name="it.name"
                shape="square"
                class="lineSty"
              >
                {{ it.name }}
              </van-radio>
            </van-radio-group>
            <div v-else>{{ form.touSuFenLei }}</div>
          </template>
        </van-field>
        <van-field
          v-if="form.touSuFenLei == '其它'"
          v-model="form.qiTaFenLei"
          required
          label="其它分类:"
          placeholder="请输入其它分类"
          label-width="6em"
          clearable
          :readonly="typeValue == '2' ? true : false"
        />
        <van-field
          required
          label="投诉方式:"
          label-width="6em"
          :value="form.touSuFangShi"
          :readonly="typeValue == '2' ? true : false"
        >
          <template #input>
            <van-radio-group
              v-if="typeValue != '2'"
              v-model="form.touSuFangShi"
              direction="horizontal"
            >
              <van-radio
                v-for="(it, index) in touSuFangShiList"
                :key="index"
                :name="it.name"
                shape="square"
                class="lineSty"
              >
                {{ it.name }}
              </van-radio>
            </van-radio-group>
            <div v-else>{{ form.touSuFangShi }}</div>
          </template>
        </van-field>
      </van-form>
      <van-cell-group>
        <div
          class="verticalLine"
          style="width:8em;text-align:left;padding: 1em 0 1em 0.5em;margin: 0;"
        >
          投诉内容
        </div>
        <van-field
          v-model="form.touSuNeiRong"
          autosize
          type="textarea"
          label=""
          placeholder="投诉内容"
          label-width="0"
          clearable
          :readonly="typeValue == '2' ? true : false"
        />
      </van-cell-group>

      <ibps-uploader
        v-model="form.fuJian"
        label="上传附件"
        download
        placeholder="请上传附件"
        :have-padding="false"
        multiple
        clearable
        :readonly="typeValue == '2' ? true : false"
      />
      <div v-if="typeValue == '2'" class="spei">
        <van-cell-group>
          <div
            class="verticalLine"
            style="width:8em;text-align:left;padding: 1em 0 1em 0.5em;margin: 0;"
          >
            审核
          </div>
          <!-- <van-field
            :value="form.touSuShouLi | getValue"
            autosize
            type="textarea"
            label="投诉受理审核："
            label-width="7em"
            clearable
            :readonly="typeValue == '2'"
            class="typeStyle"
          /> -->
          <van-field
            :value="form.touSuFenLeiQiTa | getValueP(userList)"
            label="投诉处理人："
            label-width="6em"
            clearable
            :readonly="typeValue == '2'"
            class="typeStyle"
          />
        </van-cell-group>

        <van-cell-group>
          <div
            class="verticalLine"
            style="width:8em;text-align:left;padding: 1em 0 1em 0.5em;margin: 0;"
          >
            调查
          </div>
          <van-field
            :value="form.shiShiDiaoChaQing | getValue"
            autosize
            type="textarea"
            label="事实调查情况："
            label-width="7em"
            clearable
            :readonly="typeValue == '2'"
            class="typeStyle"
          />
          <ibps-uploader
            v-model="form.diaoChaQingKuangF"
            class="paddingNone"
            label="调查附件"
            download
            :have-padding="false"
            multiple
            clearable
            :readonly="typeValue == '2' ? true : false"
          />
          <van-field
            :value="form.touSuQueRen | getValue"
            label="是否有效投诉："
            label-width="7em"
            clearable
            :readonly="typeValue == '2'"
            class="typeStyle"
          />
          <van-field
            :value="form.chuLiCuoShi | getValue"
            autosize
            class="typeStyle"
            type="textarea"
            label="处理措施："
            label-width="5em"
            clearable
            :readonly="typeValue == '2'"
          />
        </van-cell-group>
        <van-cell-group>
          <div
            class="verticalLine"
            style="width:8em;text-align:left;padding: 1em 0 1em 0.5em;margin: 0;"
          >
            确认
          </div>
          <van-field
            :value="form.chuLiJieGuoQueRen | getValue"
            autosize
            class="typeStyle"
            type="textarea"
            label="处理结果确认："
            label-width="7em"
            clearable
            :readonly="typeValue == '2'"
          />
        </van-cell-group>
        <van-cell-group>
          <div
            class="verticalLine"
            style="width:8em;text-align:left;padding: 1em 0 1em 0.5em;margin: 0;"
          >
            通知
          </div>
          <van-field
            :value="form.chuLiJieGuoShiFou | getValue"
            autosize
            type="textarea"
            label="处理结果是否通知当事人："
            label-width="12em"
            clearable
            :readonly="typeValue == '2'"
            class="typeStyle"
          />
          <ibps-uploader
            v-model="form.touSuFangShiQiTa"
            class="paddingNone"
            label="通知附件:"
            download
            :have-padding="false"
            multiple
            clearable
            :readonly="typeValue == '2' ? true : false"
          />
          <van-field
            :value="form.touSuRenQianMing | getValue"
            autosize
            class="typeStyle"
            type="textarea"
            label="通知内容："
            label-width="5em"
            clearable
            :readonly="typeValue == '2'"
          />
        </van-cell-group>
      </div>

      <div class="padding flex flex-direction">
        <van-button
          v-if="id == ''"
          type="success"
          class="btn btn-back-color"
          @click="onSubmit"
          >提交</van-button
        >
        <van-button
          v-if="typeValue == '3'"
          type="success"
          class="btn btn-back-color"
          @click="getArgee()"
        >
          修改
        </van-button>
      </div>
    </div>
  </van-overlay>
</template>
<script>
import random from '@/mixins/random'
import bpmnStatus from '@/mixins/bpmnStatus'
import IbpsUploader from '@/business/platform/file/uploader'
import {
  getNextIdByAlias,
  findFormJsonByBo
} from '@/api/platform/form/transfer'
import { agree } from '@/api/platform/bpmn/bpmTask'
import test from './complaint.json'

export default {
  components: {
    IbpsUploader
  },
  filters: {
    getValueP(value, arr) {
      if (value && value !== '') {
        const obj = arr.find(i => i.userId == value)
        return obj.userName
      } else {
        return '/'
      }
    },
    getValue(value) {
      if (value && value !== '') {
        return value
      } else {
        return '/'
      }
    },
    getNotVa(value) {
      if (!value) {
        return '/'
      }
    }
  },
  mixins: [random, bpmnStatus],
  props: {
    showPop: {
      type: Boolean,
      default: false
    },
    typeValue: {
      type: String,
      default: '1'
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    const { useId, userList = [] } = this.$store.getters
    return {
      useId,
      userList,
      show: this.showPop,
      sheetShow: false,
      option2: '',
      option3: '',
      option4: '',
      content: '',

      buMenList: [],
      fuJianShangChuanArray: [],
      popupShow: false,

      type: '',
      form: {
        id: '',
        diDian: '',
        bianZhiBuMen: '',
        bianZhiRen: '',
        bianZhiShiJian: '',
        touSuRen: '',
        lianXiDianHua: '',
        touSuDanWei: '',
        touSuBuMenJiRenYu: '',
        touSuFenLei: '患者',
        touSuFangShi: '电话',
        touSuNeiRong: '',
        fuJian: '',
        touSuRiQi: '',
        touSuQueRen: '',
        touSuShouLi: '',
        touSuFenLeiQiTa: '',
        shiShiDiaoChaQing: '',
        diaoChaQingKuangF: '',
        chuLiCuoShi: '',
        chuLiJieGuoQueRen: '',
        chuLiJieGuoShiFou: '',
        touSuRenQianMing: '',
        touSuFangShiQiTa: '',
        qiTaFenLei: ''
      },
      list: [
        {
          text: '投诉'
        },
        {
          text: '检验项目'
        },
        {
          text: '危机值报告'
        },
        {
          text: '口头报告结果'
        },
        {
          text: '延迟报告'
        },
        {
          text: '其它'
        }
      ],
      touSuFangShiQiTaList: [],
      diaoChaQingKuangFList: [],
      touSuFenLeiList: test.touSuFenLeiList,
      touSuFangShiList: test.touSuFangShiList,
      timeShow: false,
      yangPinList: [],
      option: '',
      orgId: '',
      backShow: false,
      level: null,
      mainPosition: {
        id: ''
      },
      xuanzeTime: null
    }
  },
  computed: {
    rightText() {
      return this.checkMode
        ? this.$t('common.button.cancel')
        : this.$t('common.button.manage')
    },
    selectedIds() {
      return this.checkedIds.join(',')
    }
  },
  watch: {
    showPop: {
      handler: function(val, oldVal) {
        if (val === true) {
          this.form = {
            id: '',
            diDian: '',
            bianZhiBuMen: '',
            bianZhiRen: '',
            bianZhiShiJian: '',
            touSuRen: '',
            lianXiDianHua: '',
            touSuDanWei: '',
            touSuBuMenJiRenYu: '',
            touSuFenLei: '患者',
            touSuFangShi: '电话',
            touSuNeiRong: '',
            fuJian: '',
            touSuRiQi: '',
            touSuQueRen: '',
            touSuShouLi: '',
            touSuFenLeiQiTa: '',
            shiShiDiaoChaQing: '',
            diaoChaQingKuangF: '',
            chuLiCuoShi: '',
            chuLiJieGuoQueRen: '',
            chuLiJieGuoShiFou: '',
            touSuRenQianMing: '',
            touSuFangShiQiTa: '',
            qiTaFenLei: ''
          }
          this.level = this.$store.getters.level
          const info = this.$store.getters.userInfo
          const mid = JSON.parse(localStorage.getItem('mainPosition'))
          const mainPosition =
            mid || (info && info.mainPosition ? info.mainPosition : null)
          this.mainPosition = mainPosition

          this.form.touSuRen = info.user.name
          this.form.touSuDanWei = info.user.qq
          this.form.lianXiDianHua = info.user.mobile
          this.orgId = info.employee.positions
          if (this.id) {
            this.getDe(this.id)
            if (this.typeValue == 3) {
              this.getTaskId(this.id)
            }
          }
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    closePop() {
      this.$emit('updataSet', false)
    },
    toCheckMode() {
      if (this.$utils.isEmpty(this.listData)) {
        return
      }
      if (this.checkMode) {
        this.showA = true
        this.checkedIds = []
      }
      this.checkMode = !this.checkMode
    },
    actionSheetCallback(e) {
      this.form.gouTongLeiXing = e.text
      this.sheetShow = false
    },
    timeShowCallback(e) {
      const nowDate = new Date(e.getTime() + 8 * 60 * 60 * 1000)
      const time = nowDate
        .toJSON()
        .split('T')
        .join(' ')
        .substr(0, 16)
      this.form.gouTongRiQi = time
      this.timeShow = false
    },
    gouTongRiQiClick(e) {
      this.timeShow = true
    },
    // 获取上传状态
    select(file) {
      this.$uploades.selectUpload(file).then(res => {
        res.forEach(item => {
          this.fuJianShangChuanArray.push(item)
        })
      })
    },
    // 删除
    deleteMe(id) {
      this.fuJianShangChuanArray = this.fuJianShangChuanArray.filter(
        item => item.id !== id
      )
    },
    // 获取上传进度
    progress(e) {},
    // 上传成功
    success(file) {},
    // 上传失败
    fail(e) {},
    // 弹出框显示
    qianming(index) {
      this.popupShow = true
    },
    // 清除签名
    deqianming(index) {
      this.form.keHu = ''
    },
    // 保存签名
    save(val) {
      this.form.keHu = val
      this.popupShow = false
    },
    // 清除签名
    clear(val) {
      this.form.keHu = ''
    },
    /**
     * 关闭签名弹窗
     */
    close() {
      this.popupShow = false
    },

    // 获取样品编号
    getGtbh(callback) {
      const smsParams = {
        alias: 'gtbh'
      }
      const this_ = this
      getNextIdByAlias(smsParams).then(res => {
        if (res.state === 200) {
          const data = res.data
          this_.form.biaoDanBianHao = data
        }
      })
    },
    getDe(id) {
      const sql = `select a.*,b.name_ from t_tsclb a left join ibps_party_employee b on a.tou_su_fen_lei_qi = b.id_ where a.id_ =  '${id}'`
      this.$common.request('sql', sql).then(res => {
        if (res.state === 200) {
          const data = res.variables.data[0]
          this.form = {
            id: data.id_,
            diDian: data.di_dian_,
            bianZhiBuMen: data.bian_zhi_bu_men_,
            bianZhiRen: data.bian_zhi_ren_,
            bianZhiShiJian: data.bian_zhi_shi_jian,
            touSuRen: data.tou_su_ren_,
            lianXiDianHua: data.lian_xi_dian_hua_,
            touSuDanWei: data.tou_su_dan_wei_,
            touSuBuMenJiRenYu: data.tou_su_bu_men_ji_,
            touSuFenLei: data.tou_su_fen_lei_,
            touSuFangShi: data.tou_su_fang_shi_,
            touSuNeiRong: data.tou_su_nei_rong_,
            fuJian: data.fu_jian_,
            touSuRiQi: data.tou_su_ri_qi_,
            touSuQueRen: data.tou_su_que_ren_,
            touSuShouLi: data.tou_su_shou_li_sh,
            touSuFenLeiQiTa: data.tou_su_fen_lei_qi,
            shiShiDiaoChaQing: data.shi_shi_diao_cha_,
            diaoChaQingKuangF: data.diao_cha_qing_kua,
            chuLiCuoShi: data.chu_li_cuo_shi_,
            chuLiJieGuoQueRen: data.chu_li_jie_guo_qu,
            chuLiJieGuoShiFou: data.chu_li_jie_guo_sh,
            touSuRenQianMing: data.tou_su_ren_qian_m,
            touSuFangShiQiTa: data.tou_su_fang_shi_q,
            qiTaFenLei: data.qi_ta_fen_lei_
          }
        }
      })
    },
    onSubmit() {
      if (!this.getYanZheng()) {
        return
      }
      const tmpArray = []
      this.fuJianShangChuanArray.forEach(item => {
        tmpArray.push(item.id)
      })

      const info = this.$store.getters.userInfo
      const useId = info.user.id
      const para = {
        parameters: [
          {
            key: 'defId',
            value: '1133803612284125184'
          },
          {
            key: 'version',
            value: '0'
          },
          {
            key: 'data',
            value: ''
          }
        ]
      }
      // this.form.fuJian = tmpArray.join(',')
      this.form.bianZhiRen = useId
      this.form.bianZhiShiJian = this.$methCommon.time(16)
      this.form.shiFouGuoShen = '已登记'
      this.form.bianZhiBuMen = this.mainPosition===null ?  this.orgId : this.mainPosition.id
      // this.form.bianZhiBuMen = this.orgId
      this.form.diDian = this.level.second
      para.parameters[2].value = JSON.stringify(this.form)
      findFormJsonByBo(para)
        .then(res => {
          if (res.state === 200) {
            this.$toast({
              duration: 2000, // 持续展示 toast
              message: '提交成功！'
            })
            setTimeout(() => {
              this.closePop()
            }, 1000)
          }
        })
        .catch(() => {
          // this.$methCommon.getPrompt('请求出现错误，请稍后再试', 'error')
        })
    },
    // 修改
    getArgee() {
      if (!this.getYanZheng()) {
        return
      }
      // uni.showLoading({
      //   mask: true,
      //   title: '加载中'
      // })
      const info = this.$store.getters.userInfo
      const useId = info.user.id
      const tmpArray = []
      this.fuJianShangChuanArray.forEach(item => {
        tmpArray.push(item.id)
      })
      this.form.fuJian = tmpArray.join(',')
      this.form.touSuQueRen = ''
      this.form.bianZhiRen = useId
      this.form.bianZhiShiJian = this.$methCommon.time(16)
      this.form.shiFouGuoShen = '已登记'
      this.form.bianZhiBuMen = this.mainPosition===null ?  this.orgId : this.mainPosition.id
      this.form.diDian = this.level.second
      const editData = {
        data: JSON.stringify(this.form),
        opinion: '',
        taskId: this.taskId
      }
      agree(editData)
        .then(res => {
          if (res.state === 200) {
            // this.$methCommon.getPrompt('提交成功!')
            // uni.hideLoading()
            setTimeout(() => {
              this.closePop()
            }, 1000)
          } else {
            // this.$methCommon.getPrompt('提交异常', 'error')
            // uni.hideLoading()
          }
        })
        .catch(() => {
          // this.$methCommon.getPrompt('提交异常', 'error')
          // uni.hideLoading()
        })
    },
    getYanZheng() {
      const suList = [
        'touSuRen',
        'touSuDanWei',
        'lianXiDianHua',
        'touSuBuMenJiRenYu',
        'touSuNeiRong'
      ]
      const suListName = [
        '投诉者',
        '投诉单位',
        '联系电话',
        '投诉部门及人员',
        '投诉内容'
      ]
      for (const item in suList) {
        if (!this.form[suList[item]]) {
          this.$toast({
            duration: 2000, // 持续展示 toast
            message: '请输入' + suListName[item]
          })
          return false
        }
      }

      if (!this.$common.getRequest.checkPhone(this.form.lianXiDianHua)) {
        return false
      }

      return true
    },
    // 根据委托单id查询 taskId
    getTaskId(id) {
      const sql = `select TASK_ID_,PROC_INST_ID_ from ibps_bpm_tasks where NAME_ = '登记' and NODE_ID_ = 'Activity_0276m43' and PROC_DEF_KEY_ = 'Process_09j5fge' and EXEC_ID_ = (select PROC_INST_ID_ from act_ru_execution where ACT_ID_ = 'Activity_0276m43' and BUSINESS_KEY_ = '${id}') ORDER BY CREATE_TIME_ desc`
      this.$common.request('sql', sql).then(res => {
        if (res.state === 200) {
          if (res.variables.data.length > 0) {
            const result = res.variables.data[0]
            if (result.TASK_ID_) {
              this.taskId = result.TASK_ID_
              this.getProcInstId(result.PROC_INST_ID_)
            }
          }
        }
      })
    },
    // 根据委托单id查询 taskId
    getProcInstId(id) {
      const sql = `select OPTION_ from ibps_bpm_oper_log where PROC_INST_ID_ = '${id}'   order by create_time_ desc  limit 1`
      this.$common.request('sql', sql).then(res => {
        if (res.state === 200) {
          const result = res.variables.data[0]
          this.option = result.OPTION_
        }
      })
    },
    getShow() {
      this.$refs['picker'].show()
    },
    getPageA() {
      // const pages = getCurrentPages()
      // const prevPage = pages[pages.length - 2]
      // prevPage.$vm.getValue()
      // uni.navigateBack({
      // 	dalta: 1
      // })
    },
    uploadClick(item) {
      if (/^(pdf|png|jpg|jpeg|gif)$/.test(item.ext)) {
        // uni.navigateTo({
        // 	url: `/pages/fileView/fileView?id=${item.id}&ext=${item.ext}`
        // })
      } else {
        this.$uploades.download(item.id, item.name, this)
      }
    },
    // 退回原因
    getBack() {
      this.content = this.option
      this.backShow = true
      this.$dialog
        .alert({
          title: '退回原因',
          message: this.option,
          theme: 'round-button',
          confirmButtonColor: '#1989fa'
        })
        .then(() => {
          // on close
        })
    },
    cancel() {
      this.backShow = false
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-cell__title {
  width: 65%;

  .van-cell__label {
    overflow-wrap: break-word;
  }
}
.sectionBox {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  font-size: 14px;
  color: rgba(128, 138, 135, 0.9);

  .left {
    width: 90px;
  }
}
.sectionBox::before {
  content: '';
  width: 5px;
  height: 14px;
  border-radius: 2px;
  margin-right: 5px;
}
.btn-back-color {
  background-color: #1989fa !important;
  border: none;
}
.btn-sty {
  padding: 0 13px;
  border-radius: 5px;
}
.u-m-r-15 {
  margin-right: 8px !important;
}
.verticalLine {
  color: #000;
  font-size: 13px;
  margin-bottom: 20px;
}
.verticalLine::before {
  content: '';
  width: 5px;
  height: 14px;
  background-color: #2979ff;
  border-radius: 2px;
  margin-right: 5px;
}
.suspensionBtn {
  width: 80px;
  height: 80px;
  position: fixed;
  top: 75%;
  right: 2%;
  img {
    width: 100%;
    height: 100%;
  }
}
.backgroundSty {
  height: 100%;
  background-color: #f8f8f8;
}
.cu-form-group .title {
  min-width: 180px;
}
.padding {
  padding-bottom: 15px;
  padding-top: 5px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
}
.btn {
  width: 90%;
  padding: 15px;
  border-radius: 5px;
}

.fileBox {
  line-height: 50px;
  color: #888888;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dddddd;
  border-radius: 8px;
  padding: 5px;
  margin-top: 10px;
}

.u-update-content {
  font-size: 26px;
  // color: $u-content-color;
  line-height: 1.7;
  padding: 30px;
}
.verticalLine {
  display: flex;
  align-items: center;
  // justify-content: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}
.verticalLine::before {
  content: '';
  width: 5px;
  height: 14px;
  background-color: #2979ff;
  border-radius: 2px;
  margin-right: 5px;
}
.scrollView {
  overflow-y: scroll;
  height: 95%;
}
.scrollView::-webkit-scrollbar {
  display: none;
}
.typeStyle {
  padding-left: 0.5em;
}
.paddingNone {
  padding: 0;
}
::v-deep .paddingNone .ibps-uploader {
  padding-left: 0.5em;
}
::v-deep .typeStyle.van-cell::after {
  border-bottom: 0px solid #fff;
}
::v-deep .yonghu .van-cell--borderless {
  padding-left: 8px;
}
::v-deep .yonghu .van-cell .van-field__label {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 14px;
  color: rgb(51, 51, 51);
}
::v-deep .yonghu .van-cell .van-field__label::before {
  content: '';
  width: 5px;
  height: 14px;
  background-color: #2979ff;
  border-radius: 2px;
  margin-right: 5px;
}
.lineSty {
  margin-top: 3px;
  margin-bottom: 3px;
}
::v-deep .spei .van-cell-group {
  margin-bottom: 10px;
}
</style>