CZC/operationSupport/src/views/assetManagement/shopManagement/index.vue

<template>
  <div class="content">
    <building-tree
      @buildingInformation="buildingInformation"
      :buildingType="2"
    ></building-tree>
    <div class="content-right">
      <div class="search">
        <el-input
          clearable
          placeholder="商铺号"
          class="search-input"
          v-trim
          v-model="mixins_query.roomNumber"
        ></el-input>
        <el-select
          v-model="mixins_query.useStatus"
          clearable
          placeholder="使用状态"
        >
          <el-option
            v-for="item in statusOptions"
            :label="item.label"
            :value="item.val"
            :key="item"
          >{{ item.label }}</el-option>
        </el-select>
        <el-button
          class="search-btn"
          type="primary"
          @click="mixins_search"
          :disabled="mixins_onQuery"
          :loading="mixins_onQuery"
          icon="el-icon-search"
        >查询
        </el-button>

        <div class="search-icon">
          <template>
            <el-dropdown
              type="primary"
              @command="addCommand"
            >
              <span class="zoniot_font zoniot-icon-tianjia2"></span>
              <el-dropdown-menu
                slot="dropdown"
                hide-on-click="false"
                class="device-search-dropdown"
              >
                <el-dropdown-item command="add">单个添加</el-dropdown-item>
                <el-dropdown-item command="batchAdd">
                  <div class="upload_div">
                    <xk-upload
                      class="upload_class"
                      @callback="mixins_search"
                      :params="{ importType: 'HOUSE' }"
                    >
                      <span
                        class="upload_text"
                        slot="content"
                      >批量添加</span>
                    </xk-upload>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item command="template">下载模板</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="删除"
          >
            <i
              class="zoniot_font zoniot-icon-shanchu2"
              @click="deluserbyidsFn"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="导出"
          >
            <i
              class="zoniot_font zoniot-icon-daochu2"
              @click="exportExcel()"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <zz-table
        :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
        :cols="cols"
        :loading="mixins_onQuery"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="scope"
          slot="useStatus"
        >
          <span v-if="scope.row.useStatus == 0">空置</span>
          <span v-if="scope.row.useStatus == 1">居住</span>
        </template>

        <template
          slot-scope="scope"
          slot="opt"
          class="opt"
        >
          <div class="opt">
            <el-tooltip
              effect="light"
              placement="bottom"
              content="编辑"
            >
              <i
                class="zoniot_font zoniot-icon-bianji"
                @click="addOrEdit('edit', scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              effect="light"
              placement="bottom"
              content="删除"
            >
              <i
                class="zoniot_font zoniot-icon-shanchu redText"
                @click="deleteRow(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              placement="bottom"
              content="查看"
            >
              <i
                class="zoniot_font zoniot-icon-xiangqing"
                @click="lookPage(scope.row)"
              ></i>
            </el-tooltip>
          </div>
        </template>
      </zz-table>
    </div>
    <!-- <save-edits v-else :params="activeData" @clerOwnerStatus="clerOwnerStatus" :isAdd="isAdd"></save-edits> -->
  </div>
</template>

<script>
import list from '@utils/list.js';
import saveEdits from './saveEdits.vue';

export default {
  mixins: [list],
  name: 'shopManagement',
  data () {
    return {
      statusOptions: [
        { label: '空置', val: 0 },
        { label: '居住', val: 1 }
      ],
      cols: [
        {
          label: '所属社区',
          prop: 'communityName',
          width: 120
        },
        {
          label: '楼栋名称',
          prop: 'buildingName'
        },
        {
          label: '单元',
          prop: 'unitName'
        },
        {
          label: '商铺号',
          prop: 'roomNumber'
        },
        {
          label: '建筑面积',
          prop: 'buildingArea',
          format (val) {
            if (!!val) {
              return val + '㎡';
            } else {
              return '--';
            }
          }
        },
        {
          label: '使用面积',
          prop: 'useArea',
          format (val) {
            if (!!val) {
              return val + '㎡';
            } else {
              return '--';
            }
          }
        },
        {
          label: '房屋类型',
          prop: 'buildingTypeDict',
        },
        {
          label: '商业类型',
          prop: 'residenceType',
          format (val) {
            if (val == '1') {
              return '高档住宅'
            } else if (val == '2') {
              return '普通住宅'
            } else if (val == '3') {
              return '公寓'
            } else if (val == '4') {
              return '别墅'
            } else if (val == '5') {
              return '复式'
            } else if (val == '6') {
              return '办公'
            } else if (val == '7') {
              return '酒店'
            } else if (val == '8') {
              return '厂房'
            } else if (val == '9') {
              return '商城'
            } else if (val == '10') {
              return '综合体'
            } else if (val == '11') {
              return '仓库'
            } else if (val == '12') {
              return '广告位'
            } else {
              return '-'
            }
          }
        },
        {
          label: '租售状态',
          prop: 'salesStatus',
          format (val) {
            if (val == '1') {
              return '可租可售'
            } else if (val == '2') {
              return '只租'
            } else if (val == '3') {
              return '只售'
            } else {
              return '-'
            }
          }
        },
        {
          label: '使用状态',
          slot: 'useStatus'
        },
        {
          label: '操作',
          slot: 'opt',
          width: 150
        }
      ],
      showaddDialog: '',
      selectRow: [],
      mixins_post: 'post',
      isAdd: true,
      activeData: {}
    };
  },
  components: {
    saveEdits
  },
  methods: {
    lookPage (row) {
      this.$router.push({
        path: '/shopManagement/details',
        query: {
          id: row.id
        }
      });
    },
    addCommand (command) {
      if (command === 'add') {
        this.addOrEdit('add');
      }
      if (command === 'template') {
        this.__exportExcel('/czc-community/excel/download/template', { importType: 'HOUSE' });
        return;
      }
    },
    clerOwnerStatus () {
      this.showaddDialog = '';
      this.activeData = {};
      this.isAdd = true;
      this.mixins_search();
    },
    addOrEdit (todo, data = {}) {
      new Promise((resolve) => {
        let title = '新增商铺';
        if (todo !== 'add') {
          title = '修改商铺';
        }
        this.$store.dispatch('addPopup', {
          url: '/assetManagement/shopManagement/saveEdits.vue',
          width: '850px',
          height: '500px',
          props: {
            data,
            todo,
            productOptions: this.productOptions,
            callback: resolve
          },
          title: title
        });
      }).then(() => {
        this.mixins_search();
      });

      // addPopup;
      // if (todo == 'edit') {
      //     this.activeData = row;
      //     this.isAdd = false;
      // }
      // this.showaddDialog = todo;
    },
    deleteRow (row) {
      const { communityName, buildingName, unitName, roomNumber } = row;
      let title = `您确定要删除“${communityName}${buildingName}${unitName}${roomNumber}”号房间`;
      this.$msgBox(title)
        .then(() => {
          this.$http
            .post('/czc-community/assets/house/delete', [row.id])
            .then(({ status, msg }) => {
              if (0 === status) {
                this.$message.success(msg);
                this.mixins_search();
              } else {
                this.$message.error(msg);
              }
            })
            .catch(() => { });
        })
        .catch(() => { });
    },
    selectionChange (val) {
      this.selectRow = val;
    },
    deluserbyidsFn () {
      //获取选中列表的ids
      let ids = [];
      if (!this.selectRow.length) {
        this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
        return;
      }
      this.selectRow.forEach((v) => {
        ids.push(v.id);
      });
      this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
        .then(() => {
          this.$http.post('/czc-community/assets/house/delete', ids).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => { });
    },
    buildingInformation (data) {
      if (!!data.type && data.type == 'community') {
        this.mixins_query = { communityId: data.value, buildingType: 2 };
      } else {
        this.mixins_query.communityId = data.communityId;
        this.mixins_query.id = data.roomId;
        this.mixins_query.buildingId = data.buildingId;
        this.mixins_query.unitName = data.unitId;
      }

      this.mixins_search();
    },
    //导出
    exportExcel () {
      this.__exportExcel('/czc-community/assets/house/export/excel', this.mixins_query);
    },
    communityNameList () {
      this.$http.get('/czc-community/assets/community/list', {}).then((res) => {
        this.$store.commit('setCommunityArray', res.data);
      });
    }
  },
  created () {
    this.mixins_dataUrl = '/czc-community/assets/house/page'; // 分页查询接口
    this.mixins_query = {
      buildingType: 2
    };

    this.communityNameList();
    this.mixins_search('search');
  }
};
</script>
<style lang="scss" scoped>
.content {
    .content-right {
        width: calc(100% - 280px);
        float: right;
    }
}
</style>