Typhoneye/src/pages/BL/BL-zhuce.vue

<template>
  <div class="flex flex-col">
    <div class="mt-2" style="position: relative">
      <div class="w-full">
        <p class="title-p title-one">山西省急性缺血性脑卒中数据汇总表</p>
        <p class="title-p title-two">2021年7月-12月收治急性脑梗死患者相关数据</p>
      </div>
      <!-- <div class="flex items-center justify-center mr-2" style="position: absolute; right: 2px; top: 12px">
        <a href="tel:13485387689" id="tel-a" style="display: none"> </a>
      </div> -->
    </div>
    <div class="p-4">
      <u-form :model="form" ref="uForm" label-width="150">
        <u-form-item label="市/县" class="flex">
          <u-input v-model="form.county" @click="show = true" placeholder="请选择市/县" />
        </u-form-item>
        <u-form-item label="医院名称"><u-input v-model="form.intro" /></u-form-item>
        <u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item>
        <u-form-item label="水果">
          <u-checkbox-group>
            <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">
              {{ item.name }}
            </u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="味道">
          <u-radio-group v-model="radio">
            <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="开关"><u-switch slot="right" v-model="switchVal"></u-switch></u-form-item>
      </u-form>
    </div>
    <u-select
      v-model="show"
      value-name="id"
      label-name="name"
      child-name="child"
      mode="mutil-column-auto"
      :list="list"
      @confirm="chooseArea"
    ></u-select>
  </div>
</template>
<script>
import Mixin from './mixin';
import { mapState } from 'vuex';
export default {
  mixins: [Mixin],
  data() {
    return {
      form: {
        county: '',
        countyId: '',
        intro: '',
        sex: '',
      },
      show: false,
      list: [],
      isSearch: false,
      hosList: [],
      checkboxList: [
        {
          name: '苹果',
          checked: false,
          disabled: false,
        },
        {
          name: '雪梨',
          checked: false,
          disabled: false,
        },
        {
          name: '柠檬',
          checked: false,
          disabled: false,
        },
      ],
      radioList: [
        {
          name: '鲜甜',
          disabled: false,
        },
        {
          name: '麻辣',
          disabled: false,
        },
      ],
      radio: '',
      switchVal: false,
    };
  },
  computed: mapState('user', ['user']),
  created() {
    this.getList();
    // this.getPosition();
    this.getArea();
    this.getHosName();
  },
  methods: {
    // 选择了地区
    chooseArea(e) {
      let str = '';
      let ids = '';
      for (let i = 0; i < e.length; i++) {
        str += e[i].label + (i < e.length - 1 ? '>' : '');
        ids += e[i].value + (i < e.length - 1 ? ',' : '');
      }
      this.form.county = str;
      this.form.countyId = ids;
    },
    async getHosName() {
      try {
        const params = {};
        const res = await this.$u.api.hospitalNameEcho(params);
        if (res) {
          console.log('res: ', res);
        }
      } catch (error) {}
    },
    async searchHosList(name) {
      try {
        if (this.isSearch) {
          return;
        }
        this.isSearch = true;
        this.hosList = [];
        const params = {
          area: this.form.countyId,
          name,
        };
        const res = await this.$u.api.queryHospitalList(params);
        if (res) {
          console.log(res);
          res.forEach(item => {
            this.data.push(item.name);
          });
        } else {
          this.$t.ui.showToast('医院搜索失败,请手动输入');
        }
      } catch (error) {
        this.$t.ui.showToast('医院搜索失败,请手动输入');
      }
      this.isSearch = false;
    },
    // 查询地区数组
    async getArea() {
      try {
        const params = { id: '140000' };
        const res = await this.$u.api.searchArea(params);
        if (res) {
          this.list = [...res];
        } else {
          this.$t.ui.showToast(msg);
        }
      } catch (error) {
        this.$t.ui.showToast('网络异常,请检查您的网络!');
      }
    },
    // 查询职位
    async getPosition() {
      try {
        const params = { param: {} };
        const res = await this.$u.api.searchPosition(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          let list = [];
          for (var i = 0; i < data.length; i++) {
            list.push(data[i].name);
          }
          console.log('职位list: ', list);
        } else {
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style scoped>
.title-one {
  font-size: 18px;
  font-weight: bold;
}
.title-two {
  font-size: 12px;
  color: #666;
}
.title-p {
  margin-bottom: 2px;
  text-align: center;
}
</style>