|
@@ -0,0 +1,334 @@
|
|
|
|
+<!-- 列表页 -->
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <van-search v-model="searchValue" show-action @click="searchFromFn" :clearable="false" class="my-button">
|
|
|
|
+ <template #action>
|
|
|
|
+ <view style="display: flex;">
|
|
|
|
+ <div @click="addCompanyFn" style="margin-right: 10px;">新增</div>
|
|
|
|
+ <div @click="searchFromFn">筛选</div>
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
|
|
+ </van-search>
|
|
|
|
+ <view class="search_text">
|
|
|
|
+ <text>查询结果:{{ totalNum }} 条</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="botBox">
|
|
|
|
+ <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadFn">
|
|
|
|
+ <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
|
|
|
|
+ <view class="list_box" v-for="item in list" :key="item.id">
|
|
|
|
+ <view class="list_top">
|
|
|
|
+ <view>
|
|
|
|
+ <text class="item_title">
|
|
|
|
+ {{ item.signboardName ? item.signboardName : "-" }}
|
|
|
|
+ </text>
|
|
|
|
+ <text class="item_state">
|
|
|
|
+ ({{ item.state ? item.state : "-" }})
|
|
|
|
+ </text>
|
|
|
|
+ </view>
|
|
|
|
+ <div class="button_box" @click="detailsInfo(item)">详情</div>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list_btn">
|
|
|
|
+ 统一社会信用代码:{{ item.creditCode ? item.creditCode : "-" }}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list_btn">
|
|
|
|
+ 法人代表:{{ item.companyFr ? item.companyFr : "-" }}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list_btn">
|
|
|
|
+ 注册地址 :{{ item.signAddress ? item.signAddress : "-" }}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list_btn">
|
|
|
|
+ 实际经营地址 :{{ item.manageAddress ? item.manageAddress : "-" }}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </van-list>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 弹出层 -- 筛选 -->
|
|
|
|
+ <van-popup v-model:show="show" position="bottom" :close-on-click-overlay="false" style="padding: 15px 0;">
|
|
|
|
+ <AddressSelect title="" ref="addressSelectRef"></AddressSelect>
|
|
|
|
+ <!-- <van-cell-group inset> -->
|
|
|
|
+ <van-field v-model="searchForm.state" is-link readonly name="picker" label="经营状态" placeholder="请选择经营状态"
|
|
|
|
+ @click="statePricker = true" />
|
|
|
|
+ <van-popup v-model:show="statePricker" position="bottom" round>
|
|
|
|
+ <van-picker :columns="columns" @confirm="onConfirm" @cancel="cancel" show-toolbar />
|
|
|
|
+ </van-popup>
|
|
|
|
+ <van-field label="招牌名称" v-model="searchForm.signboardName" placeholder="请输入" />
|
|
|
|
+ <van-field label="统一社会信用代码" v-model="searchForm.creditCode" placeholder="请输入" />
|
|
|
|
+ <!-- </van-cell-group> -->
|
|
|
|
+ <view class="buttonStyle">
|
|
|
|
+ <van-button color="#1989fa" @click="closeFn" size="small"
|
|
|
|
+ style="width: 25%; border-radius: 8px;">取消</van-button>
|
|
|
|
+ <van-button color="#1989fa" @click="resetFn" size="small"
|
|
|
|
+ style="width: 25%; border-radius: 8px;">重置</van-button>
|
|
|
|
+ <van-button color="#1989fa" @click="submitFn" size="small"
|
|
|
|
+ style="width: 25%; border-radius: 8px;">查询</van-button>
|
|
|
|
+ </view>
|
|
|
|
+ </van-popup>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getCompanyBtSelectBatchCompanyList } from "@/api/company"
|
|
|
|
+import AddressSelect from '@/pages/components/addressSelect/index'
|
|
|
|
+export default {
|
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
|
+ components: { AddressSelect },
|
|
|
|
+ data() {
|
|
|
|
+ //这里存放数据
|
|
|
|
+ return {
|
|
|
|
+ searchValue: "",
|
|
|
|
+ loading: false,
|
|
|
|
+ finished: false,
|
|
|
|
+ list: [],
|
|
|
|
+ current: 0,
|
|
|
|
+ size: 10,
|
|
|
|
+ totalNum: 0,
|
|
|
|
+ show: false,
|
|
|
|
+ searchForm: {
|
|
|
|
+ state: "",
|
|
|
|
+ signboardName: "", //招牌名称
|
|
|
|
+ creditCode: "", //统一社会信用代码
|
|
|
|
+ districtId: "",
|
|
|
|
+ streetId: "",
|
|
|
|
+ communityId: "",
|
|
|
|
+ gridId: "",
|
|
|
|
+ gardenId: "",
|
|
|
|
+ buildingId: "",
|
|
|
|
+ unitId: "",
|
|
|
|
+ room: ""
|
|
|
|
+ },
|
|
|
|
+ statePricker: false, //经营状态选择器
|
|
|
|
+ columns: ["变更", "在业", "存续", "开业", "注销"],
|
|
|
|
+ timeShow: false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ //监听属性 类似于data概念
|
|
|
|
+ computed: {
|
|
|
|
+ companySearch() {
|
|
|
|
+ return this.$store.state.template.companySearch
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ //监控data中的数据变化
|
|
|
|
+ watch: {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //方法集合
|
|
|
|
+ methods: {
|
|
|
|
+ // 获取查询的数据
|
|
|
|
+ getSearch() {
|
|
|
|
+ for (let key in this.companySearch) {
|
|
|
|
+ if (this.companySearch[key] && Object.hasOwnProperty.call(this.searchForm, key)) {
|
|
|
|
+ this.searchForm[key] = this.companySearch[key]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 查询条件数量
|
|
|
|
+ countNum(val) {
|
|
|
|
+ const arr = ['districtId', 'streetId', 'communityId', 'gridId', 'companyName', 'state', 'registerCapitalMin', 'registerCapitalMax', 'registerTimeMin', 'registerTimeMax', 'logoutTimeMin', 'logoutTimeMax', 'gardenId', 'buildingId', 'unitId', 'room', 'address', 'signboardName', 'creditCode', 'key']
|
|
|
|
+ let number = 0
|
|
|
|
+ for (let key in val) {
|
|
|
|
+ if (Object.prototype.hasOwnProperty.call(val, key) && arr.includes(key) && val[key] || (key.slice(-2) == "Id" && val[key])) {
|
|
|
|
+ number = number + 1
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.searchValue = `${number}个查询条件`
|
|
|
|
+ },
|
|
|
|
+ // 企业新增
|
|
|
|
+ addCompanyFn() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: "/subPages/pages/companyManage/search/com/addCompany",
|
|
|
|
+ })
|
|
|
|
+ console.log("点击新增")
|
|
|
|
+ },
|
|
|
|
+ // 筛选
|
|
|
|
+ searchFromFn() {
|
|
|
|
+ this.show = true;
|
|
|
|
+ this.getSearch()
|
|
|
|
+ let obj = {}
|
|
|
|
+ for (let key in this.companySearch) {
|
|
|
|
+ if (key.slice(-2) == "Id" || key == "room" || key.slice(-4) == "Name") {
|
|
|
|
+ obj[key] = this.companySearch[key]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ this.$refs.addressSelectRef.getFrom(obj)
|
|
|
|
+ },100)
|
|
|
|
+ },
|
|
|
|
+ // 搜索
|
|
|
|
+ // onSearch() {
|
|
|
|
+ // getCompanyBtSelectBatchCompanyList({
|
|
|
|
+ // current: this.current,
|
|
|
|
+ // size: this.size,
|
|
|
|
+ // ...this.companySearch
|
|
|
|
+ // }).then(res => {
|
|
|
|
+ // console.log(res, "获取的数据")
|
|
|
|
+ // this.list = res.data.records
|
|
|
|
+ // this.totalNum = res.data.total
|
|
|
|
+ // })
|
|
|
|
+ // },
|
|
|
|
+ // 点击清空按钮触发
|
|
|
|
+ resetFn() {
|
|
|
|
+ console.log("点击清空按钮")
|
|
|
|
+ },
|
|
|
|
+ // 获取列表数据
|
|
|
|
+ getList() {
|
|
|
|
+ //
|
|
|
|
+ },
|
|
|
|
+ loadFn() {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ this.current += 1;
|
|
|
|
+ getCompanyBtSelectBatchCompanyList({
|
|
|
|
+ current: this.current,
|
|
|
|
+ size: this.size,
|
|
|
|
+ ...this.companySearch
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.list = this.list.concat(res.data.records)
|
|
|
|
+ this.loading = false;
|
|
|
|
+ if (res.data.records.length < this.size) {
|
|
|
|
+ this.finished = true
|
|
|
|
+ }
|
|
|
|
+ this.totalNum = res.data.total
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 企业详情页
|
|
|
|
+ detailsInfo(item) {
|
|
|
|
+ console.log(item, "企业详情")
|
|
|
|
+ },
|
|
|
|
+ onConfirm(value) {
|
|
|
|
+ this.searchForm.state = value
|
|
|
|
+ this.statePricker = false
|
|
|
|
+ },
|
|
|
|
+ cancel() {
|
|
|
|
+ this.statePricker = false
|
|
|
|
+ },
|
|
|
|
+ // 查询 - 重置 事件按钮
|
|
|
|
+ resetFn() {
|
|
|
|
+ this.searchForm = {
|
|
|
|
+ state: "",
|
|
|
|
+ registerCapitalMin: "",
|
|
|
|
+ registerCapitalMax: "",
|
|
|
|
+ text: "",
|
|
|
|
+ registerTimeMin: "",
|
|
|
|
+ registerTimeMax: ""
|
|
|
|
+ }
|
|
|
|
+ this.$refs.addressSelectRef.form={}
|
|
|
|
+ },
|
|
|
|
+ submitFn() {
|
|
|
|
+ this.show = false
|
|
|
|
+ this.$store.commit('template/changeCompanySearch', {...this.searchForm,...this.$refs.addressSelectRef.form});
|
|
|
|
+ this.countNum({...this.searchForm,...this.$refs.addressSelectRef.form})
|
|
|
|
+ this.current = 0
|
|
|
|
+ this.list = []
|
|
|
|
+ this.loadFn()
|
|
|
|
+ },
|
|
|
|
+ closeFn() {
|
|
|
|
+ this.show = false
|
|
|
|
+ this.resetFn()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
|
+ created() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
|
+ mounted() {
|
|
|
|
+ this.countNum(this.$store.state.template.companySearch)
|
|
|
|
+ this.getSearch()
|
|
|
|
+ },
|
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
|
+ destroyed() { }, //生命周期 - 销毁完成
|
|
|
|
+ activated() {
|
|
|
|
+
|
|
|
|
+ }, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
+// @import url(); 引入公共css类
|
|
|
|
+.my-button {
|
|
|
|
+ ::v-deep .van-field__control {
|
|
|
|
+ color: red;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.search_text {
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ padding: 0 16px;
|
|
|
|
+ width: 100%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.botBox {
|
|
|
|
+ height: calc(95vh - 60px);
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+
|
|
|
|
+ // 循环的盒子样式
|
|
|
|
+ .list_box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+
|
|
|
|
+ .list_top {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .item_title {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ margin-right: 10px
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .item_state {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .button_box {
|
|
|
|
+ width: 60px;
|
|
|
|
+ border: 1px solid rgb(27, 110, 243);
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: rgb(27, 110, 243);
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list_concent {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin: 5px 0;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list_btn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin: 5px 0;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.buttonStyle {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ padding: 0 16px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+}
|
|
|
|
+</style>
|