PropertyList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="物业名称">
              <a-input placeholder="请输入物业名称" v-model="queryParam.dataTable"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="入驻时间">
              <a-input placeholder="请选择入驻时间" v-model="queryParam.dataId"></a-input>
            </a-form-item>
          </a-col>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
               </a-col>
            </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('t_property_settled')">导出</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <span slot="empowerDate" slot-scope="text, record">
          <span>{{record.empowerBeginDate}}至{{record.empowerEndDate}}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <!-- 字符串超长截取省略号显示 -->
        <span slot="url" slot-scope="text">
          <j-ellipsis :value="text" :length="25"/>
        </span>
        <!-- 字符串超长截取省略号显示-->
        <span slot="component" slot-scope="text">
          <j-ellipsis :value="text"/>
        </span>
      </a-table>

    </div>
    <!-- table区域-end -->

    <property-settled-modal ref="modalForm" @ok="modalFormOk"></property-settled-modal>

    <a-modal
      :title="modalTitle + '入驻物业集团'"
      width="60%"
      :visible="visible"
      :closable="false"
      :maskClosable="false"
    >
      <template slot="footer">
        <a-button @click="close">关闭</a-button>
        <a-button type="primary" @click="onSubmit">确认</a-button>
      </template>

      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >

        <a-card title="物业集团基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="物业集团名称" prop="propertyName">
                <a-input
                  v-model="form.propertyName"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="统一信用代码" prop="propertyCode">
                <a-input
                  v-model="form.propertyCode"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="法人代表" prop="legalName">
                <a-input
                  v-model="form.legalName"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册资本" prop="registCapital">
                <a-input-number id="inputNumber" v-model="form.registCapital" :min="1" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人" prop="contactName">
                <a-input
                  v-model="form.contactName"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人电话" prop="contactPhone">
                <a-input
                  v-model="form.contactPhone"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册地址" prop="registAdress">
                <a-input
                  v-model="form.registAdress"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="详细地址" prop="adressInfo" :labelCol="{ span: 3 }">
                <a-input
                  v-model="form.adressInfo"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="21" :offset="3">
              <a-form-model-item label="" :labelCol="{ span: 3 }">
                <div>
                  <div id="container" style="width:100%;height:100%"></div>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="集团LOGO" prop="logoUrl" :labelCol="{ span: 3 }">
                <j-image-upload bizPath="scott/pic" v-model="form.logoUrl"></j-image-upload>
                <span>只能上传jpg/png格式文件，文件不能超过50kb</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="集团介绍" prop="groupInfo" :labelCol="{ span: 3 }">
                <a-textarea
                  v-model="form.groupInfo"
                  placeholder="请输入"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>

        <a-card title="授权信息">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="授权日期" prop="empowerType" :labelCol="{ span: 3 }">
                <a-radio-group v-model="form.empowerType">
                  <a-radio value="1">永久</a-radio>
                  <a-radio value="2">授权日期</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="21" :offset="3" v-if="form.empowerType === '2'">
              <a-form-model-item label="" prop="empowerDate">
                <a-range-picker v-model="form.empowerDate" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="授权物业数量" prop="empowerPropertyNum" :labelCol="{ span: 3 }">
                <a-input-number id="inputNumber" v-model="form.empowerPropertyNum" :min="1" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="收费标准" prop="chargingStandardId" :labelCol="{ span: 3 }">
                <a-select style="width: 120px" v-model="form.chargingStandardId">
                  <a-select-option value="lucy">Lucy</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>

        <a-card title="合同附件">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="合同附件" prop="contractUrl" :labelCol="{ span: 3 }">
                <j-upload v-model="form.contractUrl"></j-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
  import { getPropertyListApi, getSystemSubmenu, getSystemSubmenuBatch } from '@/api/api'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import PropertySettledModal from './modules/PropertySettledModal'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JUpload from '@/components/jeecg/JUpload'
  import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'

  const columns = [
    {
      title: '物业名称',
      dataIndex: 'propertyName',
      key: 'propertyName'
    },
    {
      title: '统一社会信用代码',
      dataIndex: 'creditCode',
      key: 'creditCode'
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      key: 'contactName'
    },
    {
      title: '电话',
      dataIndex: 'contactPhone',
      key: 'contactPhone'
    },
    {
      title: '授权时间',
      dataIndex: 'empowerDate',
      key: 'empowerDate'
    },
    {
      title: '授权物业数量',
      dataIndex: 'ontrialCommunityNum',
      key: 'ontrialCommunityNum'
    },
    {
      title: '审核状态',
      dataIndex: 'auditStatus',
      key: 'auditStatus',
      customRender: function(text) {
        return filterDictTextByCache('auditStatus', text);
      }
    },
    {
      title: '到期提示',
      dataIndex: 'ontrialEndDate',
      key: 'ontrialEndDate'
    },
    {
      title: '冻结/解冻',
      dataIndex: 'refuseDesc',
      key: 'refuseDesc'
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
      align: 'center',
      width: 150
    }
  ]

  export default {
    name: 'PermissionListAsync',
    mixins: [JeecgListMixin],
    components: {
      PropertySettledModal,
      JEllipsis,
      JUpload,
      JImageUpload
    },
    data() {
      return {
        // 表头
        columns: columns,
        loading: false,
        pagination: {},
        url: {
          list: "/property/propertySettled/list",
          delete: '/sys/permission/delete',
          deleteBatch: '/sys/permission/deleteBatch'
        },

        modalTitle: '新增',
        visible: false,
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
        other: '',
        form: {
          propertyName: '',
          propertyCode: '',
          legalName: '',
          registCapital: undefined,
          contactName: '',
          contactPhone: '',
          registAdress: '',
          adressInfo: '',
          logoUrl: [],
          groupInfo: '',
          empowerType: '1',
          empowerDate: [],
          empowerPropertyNum: undefined,
          chargingStandardId: '',
          contractUrl: []
        },
        rules: {
          propertyName: [{ required: true, message: '请输入物业集团名称', trigger: 'blur' }],
          propertyCode: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }],
          legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
          registCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
          contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          contactPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
          registAdress: [{ required: true, message: '请选择注册地址', trigger: 'change' }],
          adressInfo: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
          logoUrl: [{ required: true, message: '请上传集团LOGO', trigger: 'change' }],
          empowerPropertyNum: [{ required: true, message: '请输入授权物业数量', trigger: 'blur' }],
          chargingStandardId: [{ required: true, message: '请选择收费标准', trigger: 'change' }],
          contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }]
        },
        uploadDisabled: false
      }
    },
    methods: {
      loadData() {
        this.loading = true
        getPropertyListApi({
          pageNo: 1,
          pageSize: 10
        }).then((res) => {
          if (res.success) {
            const pagination = { ...this.pagination };
            pagination.total = res.result.total
            this.dataSource = res.result.records
          }
        }).finally(()=>{
          this.loading = false
        })
      },
      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      close() {
        this.visible = false
      },
      handleSelectChange() {},
      handleSubmit() {},

      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>