wxjt-asset-web/src/views/statics/lease.vue

<template>
  <div>
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader
          :icon="$route.meta.icon"
          :text="$route.meta.title"
        >
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <el-date-picker
                  size="small"
                  style="padding-bottom: 0;padding-top: 0;"
                  v-model="daterange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  @change="daterangePick">
                </el-date-picker>

                <Button
                  style="margin-left: 6px;"
                  type="primary"
                  @click="getData"
                >查询</Button
                >
              </template>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <xy-table ref="xyTable"
              :is-page="false"
              :table-item="table"
              :list="list"
              :span-method="spanMethod"
              :auths="auths_auth_mixin"></xy-table>
  </div>
</template>

<script>
import LxHeader from '@/components/LxHeader';
import headerContent from '@/components/LxHeader/XyContent.vue'
import { authMixin } from '@/mixin/authMixin';
import { index } from "@/api/system/baseForm"

export default {
  mixins: [authMixin],
  components: {
    headerContent,
    LxHeader
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      daterange: "",
      select: {
        table_name: 'leases',
        page: 1,
        page_size: 999,
        filter: [
          {
            key: "zulinkaishiqixian",
            op: "range",
            value: ""
          },
          {
            key: "zulinjieshuqixian",
            op: "range",
            value: ""
          }
        ]
      },
      table: [
        {
          prop: "area",
          label: "区域",
          customFn: row => {
            if (row.land_id) {
              return (
                <span>{ this.areas.get(row.land_id_lands_id_relation?.area) }</span>
              )
            } else {
              return (
                <span>{ this.areas.get(row.house_id_houses_id_relation?.area) }</span>
              )
            }
          }
        },
        {
          prop: "asset",
          label: "资产名称",
          customFn: row => {
            if (row.land_id) {
              return (
                <span>【土地】{ row.land_id_lands_id_relation?.name }</span>
              )
            } else {
              return (
                <span>【房产】{ row.house_id_houses_id_relation?.name }</span>
              )
            }
          }
        },
        {
          prop: "zulinshijian",
          label: "租赁时间",
          customFn: row => {
            return (
              <span>{ row.zulinkaishiqixian } ~ { row.zulinjieshuqixian }</span>
            )
          }
        },
        {
          prop: "shijimianji",
          label: "实际面积",
          customFn: row => {
            if (row.land_id) {
              return (
                <span>{ row.land_id_lands_id_relation?.shijimianji }</span>
              )
            } else {
              return (
                <span>{ row.house_id_houses_id_relation?.shijimianji }</span>
              )
            }
          }
        },
        {
          prop: "zulinmianji",
          label: "租赁面积",
        },
        {
          prop: "rate",
          label: "出租率",
          width: 220,
          customFn: row => {
            function getRate(a,b) {
              if (!parseFloat(a) || !parseFloat(b)) {
                return 0.00
              }
              return ((parseFloat(a) / parseFloat(b)) * 100)
            }
            if (row.land_id) {
              return (
                <el-progress percentage={getRate(row.zulinmianji, row.land_id_lands_id_relation?.shijimianji)}></el-progress>
                // <span>{ getRate(row.zulinmianji, row.land_id_lands_id_relation?.shijimianji) }</span>
              )
            } else {
              return (
                <el-progress percentage={getRate(row.zulinmianji, row.house_id_houses_id_relation?.shijimianji)}></el-progress>
              // <span>{ getRate(row.zulinmianji, row.house_id_houses_id_relation?.shijimianji) }</span>
              )
            }
          }
        }
      ],
      list: [],
      spanArr: [],
      pos: 0,
      spanArr1: [],
      pos1: 0,
      areas: new Map([
        [1,"宜兴市"],
        [2,"惠山区"],
        [3,"新吴区"],
        [4,"梁溪区"],
        [5,"江阴市"],
        [6,"滨湖区"],
        [7,"锡山区"]
      ])
    }
  },
  methods: {
    index,
    async getData () {
      this.spanArr = [];
      this.spanArr1 = [];
      this.pos = 0;
      this.pos1 = 0;
      const res = await index(this.select);
      let temp = res.data;

      for (let i in temp) {
        if (Number(i) === 0) {
          this.spanArr.push(1);
          this.pos = 0;
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          if(temp[i].land_id ? (temp[i].land_id === temp[i - 1].land_id) : (temp[i].house_id === temp[i - 1].house_id)){
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0)
          }else{
            this.spanArr.push(1);
            this.pos = i;
          }
          if(temp[i].land_id ? (temp[i].land_id_lands_id_relation?.area === temp[i - 1].land_id_lands_id_relation?.area) : (temp[i].house_id_houses_id_relation?.area === temp[i - 1].house_id_houses_id_relation?.area)){
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0)
          }else{
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }

      this.list = temp;
      this.$nextTick(() => {
        this.$refs.xyTable.doLayout();
      })
    },
    daterangePick (e) {
      if (e && e[0] && e[1]) {
        this.select.filter[0].value = `${this.$moment(e[0]).format('YYYY-MM-DD')},2999-01-01`;
        this.select.filter[1].value = `${this.$moment(0).format('YYYY-MM-DD')},${this.$moment(e[1]).format('YYYY-MM-DD')}`;
      } else {
        this.select.filter[0].value = "";
        this.select.filter[1].value = "";
      }

    },

    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property === "asset") {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (column.property === "area") {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  },
  computed: {},
  created() {
    this.getData();
  }
}
</script>

<style scoped lang="scss">
</style>