ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/selfStatistics/hospitalDetail/index.vue

@@ -0,0 +1,533 @@
+<template>
+  <div class="table-Data">
+    <el-form :inline="true" :model="query" ref="topForm" class="form-inline-hospital" size="small">
+      <el-form-item>
+        <!--  区域   -->
+        <el-cascader
+          v-model="query.address"
+          placeholder="医院地区"
+          :options="provinceList"
+          :props="props"
+          style="width: 220px"
+          @active-item-change="handleItemChange"
+          @change="addressChange"
+          @blur="forceUpdate">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          v-model="query.hospitalType"
+          clearable
+          placeholder="医院类别"
+          class="filter-item"
+          style="width: 160px"
+          @change="changeHospital"
+          @clear="changeHospital">
+          <el-option
+            v-for="item in dict.hos_category"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <!--    医院等级   -->
+      <el-form-item>
+        <el-select
+          v-model="query.level"
+          clearable
+          @change="changeHospital"
+          @clear="changeHospital"
+          placeholder="医院等级（级）"
+          class="filter-item"
+          style="width: 160px">
+          <el-option
+            v-for="item in dict.hos_rank"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="hospitalTypeList">
+        <el-select
+          v-model="query.hospitalIdList"
+          clearable
+          filterable
+          multiple
+          @change="changeHospital"
+          @clear="changeHospital"
+          placeholder="医院名称"
+          class="filter-item"
+          style="width: 160px">
+          <el-option
+            v-for="item in hospitalNames"
+            :key="item.scenceId"
+            :label="item.hospitalName"
+            :value="item.scenceId" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="targetStatus">
+        <el-select
+          v-model="query.targetStatus"
+          clearable
+          @change="crud.toQuery"
+          placeholder="是否中标"
+          class="filter-item"
+          style="width: 160px">
+          <el-option
+            v-for="item in isArray"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="chargeStatus">
+        <el-select
+          v-model="query.chargeStatus"
+          clearable
+          @change="crud.toQuery"
+          placeholder="是否收费"
+          class="filter-item"
+          style="width: 160px">
+          <el-option
+            v-for="item in dict.charge_status"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="monitorStatus" v-if="clickStatus == 1">
+        <el-select
+          v-model="query.monitorStatus"
+          clearable
+          @change="crud.toQuery"
+          placeholder="是否被监测"
+          class="filter-item"
+          style="width: 160px">
+          <el-option
+            v-for="item in dict.monitor_status"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="myMachineStatus" v-if="clickStatus == 2">
+        <el-select
+          v-model="query.myMachineStatus"
+          clearable
+          @change="crud.toQuery"
+          placeholder="是否配备自助机"
+          class="filter-item"
+          style="width: 160px">
+          <el-option
+            v-for="item in isArray"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="softwareType" v-if="clickStatus != 1">
+        <el-select
+          v-model="query.softwareType"
+          clearable
+          @change="crud.toQuery"
+          placeholder="软件类型"
+          class="filter-item"
+          style="width: 160px">
+          <el-option v-for="item in softData" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+      <el-button @click="crud.toQuery" class="filter-item" size="small">查询 </el-button>
+      <el-button @click="resetQueryClick" class="filter-item" size="small">重置 </el-button>
+      <el-button @click="explore" :loading="downloadLoading" class="filter-item" size="small"
+        >导出
+      </el-button>
+    </el-form>
+    <!-- 表格 -->
+    <el-table
+      :data="crud.data"
+      ref="offlineTable"
+      v-loading="crud.loading"
+      @sort-change="sortChange"
+      :disable-auto-sort="true">
+      <el-table-column label="序号" width="60px">
+        <template slot-scope="scope">
+          <span>{{ (crud.page.page - 1) * crud.page.size + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in headerTable"
+        :key="index.key"
+        :label="item.label"
+        :prop="item.prop"
+        :min-width="item.width"
+        :sortable="item.sort"
+        :sort-method="
+          (a, b) => {
+            return a[item.prop] - b[item.prop];
+          }
+        ">
+        <template slot-scope="scope">
+          <div v-if="item.prop == 'hospitalType'">
+            {{ hosCategory(scope.row.hospitalType) || omitData }}
+          </div>
+          <div v-else-if="item.prop == 'level'">
+            {{ hosRank(scope.row.level) || omitData }}
+          </div>
+          <div v-else-if="item.prop == 'chargeStatus'">
+            {{ hosCharge(scope.row.chargeStatus) || omitData }}
+          </div>
+          <div v-else-if="item.prop == 'targetStatus'">
+            {{ hosCharge(scope.row.targetStatus) || omitData }}
+          </div>
+
+          <div v-else-if="item.prop == 'activityRate'">
+            {{ dealData(scope.row.activityRate) }}
+          </div>
+
+          <div v-else>{{ scope.row[item.prop] || omitData }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination />
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, header, crud } from '@crud/crud';
+import pagination from '@crud/Pagination';
+import { queryHospital } from '@/api/selfStatistics/index.js';
+import institutionMonitor from '@/api/institutionMonitor/index';
+import { downloadFile } from '@/utils/index';
+import { download } from '@/api/data';
+export default {
+  name: 'cloudSet',
+  components: {
+    pagination,
+  },
+  dicts: ['cloud_code', 'hos_category', 'hos_rank', 'monitor_status', 'charge_status'],
+  cruds() {
+    return CRUD({
+      title: '医院管理',
+      url: '',
+      sort: [],
+      query: {},
+    });
+  },
+  props: {
+    data: {
+      type: Object,
+    },
+  },
+  watch: {
+    data(newVal, old) {
+      console.log(newVal);
+    },
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      omitData: '-',
+      provinceList: [],
+      // 区域
+      props: {
+        value: 'value',
+        children: 'cities',
+        label: 'label',
+        checkStrictly: true,
+      },
+      clickStatus: null,
+      hospitalNames: [],
+      softData: ['影联'],
+      headerTable: [
+        { label: '医院名称', prop: 'hospitalName', width: '150px' },
+        { label: '医院类别', prop: 'hospitalType', width: '120px' },
+        { label: '医院等级（级）', prop: 'level', width: '120px' },
+        { label: '是否中标', prop: 'targetStatus', width: '120px' },
+        { label: '是否收费', prop: 'chargeStatus', width: '120px' },
+        { label: '配备自助机数量', prop: 'myMachineTotal', width: '160px', sort: true },
+        {
+          label: '监测自助机数量',
+          prop: 'realMachine',
+          width: '160px',
+          sort: true,
+        },
+        {
+          label: '监测系统数量',
+          prop: 'monitorMachineTotal',
+          width: '160px',
+          sort: true,
+        },
+        { label: '影联系统数量', prop: 'ylyxMachineTotal', width: '140px', sort: true },
+        { label: '非影联系统数量', prop: 'qtMachineTotal', width: '160px', sort: true },
+        { label: '近7天活跃度', prop: 'activityRate', width: '140px', sort: true },
+      ],
+      sortString: {
+        myMachineTotal: 1,
+        ylyxMachineTotal: 3,
+        qtMachineTotal: 4,
+        activityRate: 5,
+        monitorMachineTotal: 2,
+        activityMachineTotal: 6,
+        auditedDataTotal: 7,
+        printTimes: 8,
+        printTimeOfDailyAverage: 9,
+        realMachine: 10,
+      },
+      currentDetail: {},
+      downloadLoading: false,
+      isArray: [
+        {
+          value: 0,
+          label: '否',
+        },
+        {
+          value: 1,
+          label: '是',
+        },
+      ],
+      dialogText: '',
+    };
+  },
+  created() {
+    this.tableInit();
+    this.getPosition(null, () => {});
+    this.queryHospital();
+  },
+  activated() {
+    this.tableInit();
+  },
+  methods: {
+    dealData(value) {
+      if (value == -1 || value === undefined) {
+        return '-';
+      } else if (value === 0) {
+        return value;
+      } else {
+        return value + '%';
+      }
+    },
+    //导出按钮
+    explore() {
+      this.downloadLoading = true;
+      // let hospitalId=this.currentDetail.hospitalId
+      // let hospitalName=this.currentDetail.hospitalName,
+      let data = {
+        ...this.query,
+        downLoadType: this.clickStatus,
+      };
+      download('machine/downLoadTotalTableDate', data)
+        .then(result => {
+          this.downloadLoading = false;
+        })
+        .catch(e => {
+          let isCn = false;
+          downloadFile(e, this.dialogText, 'xlsx', isCn);
+          this.downloadLoading = false;
+        });
+    },
+    sortChange(column) {
+      if (column.order == 'ascending') {
+        this.query = {
+          ...this.query,
+          sortType: this.sortString[column.prop],
+          sort: 1,
+        };
+        this.crud.toQuery();
+      } else if (column.order == 'descending') {
+        this.query = {
+          ...this.query,
+          sortType: this.sortString[column.prop],
+          sort: 2,
+        };
+        this.crud.toQuery();
+      }
+    },
+    // 返回医院类别对应的名称
+    hosCategory(category) {
+      return this.dict.label.hos_category[category];
+    },
+    // 返回医院等级(级)对应的名称
+    hosRank(rank) {
+      return this.dict.label.hos_rank[rank];
+    },
+    hosCharge(status) {
+      return this.dict.label.charge_status[status];
+    },
+    hosMonitor(status) {
+      return this.dict.label.monitor_status[status];
+    },
+    forceUpdate() {
+      this.$forceUpdate(); // 强制刷新
+    },
+    //改变选择的医院
+    changeHospital() {
+      this.forceUpdate();
+      this.queryHospital();
+      this.crud.toQuery();
+    },
+    //重置
+    resetQueryClick() {
+      Object.keys(this.query).map(key => {
+        this.query[key] = '';
+      });
+      this.query.address = ['1114'];
+      this.crud.toQuery();
+    },
+    // 查询医院名称
+    queryHospital() {
+      let params = JSON.parse(JSON.stringify(this.query));
+      params.county = params.district;
+      // 删除时间 医院名称
+      delete params.consultationTimeList;
+      delete params.address;
+      delete params.startTime;
+      delete params.endTime;
+      delete params.hospitalIdList;
+      params.deleted = 0;
+      queryHospital(params).then(res => {
+        this.hospitalNames = [];
+        res.forEach(k => {
+          let obj = {
+            scenceId: k.scenceId,
+            hospitalName: k.hospitalName,
+          };
+          this.hospitalNames.push(obj);
+        });
+      });
+    },
+    // 一级二级改变的时候调取下一级数据
+    handleItemChange(val) {
+      this.getPosition(val);
+    },
+    addressChange() {
+      if (this.query.address.length > 0) {
+        this.query.province = this.query.address[0];
+        this.query.city = this.query.address[1];
+        this.query.district = this.query.address[2];
+      }
+      this.crud.toQuery();
+      this.queryHospital();
+    },
+    // 地区联动获取数据
+    getPosition(val, cb) {
+      let vm = this; //查询省市县
+      let params = { parent: 1 };
+      if (!val) {
+        //初始化加载 获取所有省份数据
+        params = { parent: 1 };
+      } else if (val.length === 1) {
+        //加载二级  获取市级数据
+        params = { parent: val[0] };
+      } else {
+        //加载3级   获取县级数据
+        params = { parent: val[1] };
+      }
+      institutionMonitor
+        .queryNation(params)
+        .then(res => {
+          if (!val) {
+            //初始化加载   查询省份数据
+            vm.provinceList = res.content.map(e => {
+              return {
+                value: e.saleid,
+                label: e.province,
+                cities: [],
+              };
+            });
+          } else if (val.length === 1) {
+            //加载二级    查询该省下市级数据
+            vm.provinceList.map(item => {
+              if (item.value === val[0]) {
+                item.cities = res.content.map(e => {
+                  return {
+                    value: e.saleid,
+                    label: e.city || e.county,
+                    cities: [],
+                  };
+                });
+              }
+            });
+          } else {
+            //加载3级   查询该省市下县级数据
+            vm.provinceList.map(item => {
+              if (item.value === val[0]) {
+                item.cities.map(value => {
+                  if (value.value === val[1]) {
+                    value.cities = res.content.map(e => {
+                      return { value: e.saleid, label: e.county };
+                    });
+                  }
+                });
+              }
+            });
+          }
+          cb && cb(res);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    toQuery(query, status, dialogText) {
+      this.$refs.offlineTable.clearSort();
+
+      this.clickStatus = status;
+      this.dialogText = dialogText;
+      this.query = {
+        ...query,
+        sortType: '',
+      };
+      delete this.query.consultationTimeList;
+      delete this.query.startTime;
+      delete this.query.endTime;
+      this.query.address = query.address;
+      this.crud.url = this.returnUrl(status);
+      this.crud.toQuery();
+    },
+    clickToQuery() {
+      this.crud.url = this.returnUrl();
+      this.crud.toQuery();
+    },
+    returnUrl(status) {
+      let url = '';
+      switch (status) {
+        case 1:
+          url = 'machine/getTotalTableDate';
+          break;
+        case 2:
+          url = 'machine/getMonitorMachineTableDate';
+          break;
+        case 3:
+          url = 'machine/getActivityTotalTableDate';
+          break;
+      }
+      return url;
+    },
+    [CRUD.HOOK.beforeRefresh](crud) {
+      crud.query = {
+        ...this.query,
+      };
+    },
+    tableInit() {
+      this.$nextTick(() => {
+        // myTable是表格的ref属性值
+        if (this.$refs.offlineTable && this.$refs.offlineTable.doLayout) {
+          this.$refs.offlineTable.doLayout();
+        }
+      });
+    },
+  },
+};
+</script>
+<style>
+.cm-s-monokai.CodeMirror {
+  height: calc(100vh - 380px);
+}
+</style>
+<style scoped lang="scss">
+.table-Data {
+  max-height: 60vh;
+  overflow: auto;
+  margin-top: 10px;
+  padding: 0 !important;
+}
+</style>