Warehouse_management_ui/src/views/basicdata/checkCompany/AddOrUpdate.vue

<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><span style="font-weight: 700">查企业</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="font-weight: 700">查企业详情页</span></el-breadcrumb-item>
        </el-breadcrumb>
        <el-button style="margin-left: 10px" size="mini" icon="el-icon-arrow-left" @click="goBack">返回列表
        </el-button>
      </div>
      <div style="display: flex;">
        <!-- <el-autocomplete size="small" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入企业名称"
          @select="handleSelect">
          <el-button slot="append" icon="el-icon-search" type="primary">检索</el-button>
        </el-autocomplete> -->
        <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" @select="handleSelect"
          :trigger-on-focus="false" placeholder="请输入搜索内容">
          <!-- 2.x版本自定义模板 -->
          <template slot-scope="{ item }">
            <div v-if="item.isLoading" class="loading-tip">
              <i class="el-icon-loading"></i> 搜索中...
            </div>
            <div v-else-if="item.isEmpty" class="empty-tip">
              <i class="el-icon-warning"></i> 无匹配结果
            </div>
            <div v-else class="result-item">
              {{ item.value }}
            </div>
          </template>
          <el-button slot="append" icon="el-icon-search" type="primary" @click="search">检索</el-button>
        </el-autocomplete>
      </div>
      <div style="width: 254px;">
      </div>
    </div>
    <br />
    <div>
      <el-card class="box-card">
        <div style="display: flex;">
          <div>
            <el-row>
              <span style="font-size: 24px;">青岛途宝软件开发有限公司</span>
            </el-row>
            <el-row>
              <span>
                <el-tag size="small" v-for="tag in tags" :key="tag.name">
                  {{ tag.name }}
                </el-tag>
              </span>
            </el-row>
          </div>
        </div>
        <div style="background-color: #f6faff;padding: 16px 0px;line-height: 22px;font-size: 14px;margin:10px 0;">
          <el-row>
            <el-col :span="8" style="border-right: 1px solid #e6e6e6;padding-left: 16px;">
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">法定代表人：</span>
                  <span style="color: #333;">刘梦</span>
                </div>
              </el-row>
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">注册资本：</span>
                  <span style="color: #333;">300 万人民币</span>
                </div>
              </el-row>
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">成立日期：</span>
                  <span style="color: #333;">2020-01-17</span>
                </div>
              </el-row>
            </el-col>
            <el-col :span="8" style="border-right: 1px solid #e6e6e6;padding-left: 16px;">
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">统一社会信用代码：</span>
                  <span style="color: #333;">91370213MA3RE74912</span>
                </div>
              </el-row>
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">邮箱：</span>
                  <span style="color: #333;">15065420766@163.com</span>
                </div>
              </el-row>
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">电话：</span>
                  <span style="color: #333;">150********</span>
                </div>
              </el-row>
            </el-col>
            <el-col :span="8" style="padding-left: 16px;">
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">所属行业：</span>
                  <span style="color: #333;">其他未列明零售业（F5299）</span>
                </div>
              </el-row>
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">企业规模：</span>
                  <span style="color: #333;">小微</span>
                </div>
              </el-row>
              <el-row style="margin:4px 0px;">
                <div>
                  <span style="color: #666;">企业员工：</span>
                  <span style="color: #333;">7人</span>
                </div>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="padding: 16px 16px 0 16px;">
            <div>
              <span style="color: #666;">简介：</span>
              <span style="color: #333;">青岛途宝软件开发有限公司成立于2020-01-17，法定代表人为刘梦，注册资本为300
                万人民币，统一社会信用代码为91370213MA3RE74912，当前处于存续状态。企业注册地址位于山东省青岛市崂山区海尔路182-6号财富大厦1703，所属行业为其他未列明零售业，经营范围包括：软件开发；系统集成；技术研发、技术咨询、技术推广、技术转让、技术服务；批发：计算机设备及配件、电子产品、数码产品。（依法须经批准的项目，经相关部门批准后方可开展经营活动）</span>
            </div>
          </el-row>
        </div>
        <div>
          <div style="font-size: 18px;font-weight: 600;padding:10px 10px 6px 0;">工商信息</div>
          <table border="1">
            <tr>
              <td style="background-color: #f6faff;width: 150px;">统一社会信用代码</td>
              <td>91370213MA3RE74912</td>
              <td style="background-color: #f6faff;width: 150px;">企业名称</td>
              <td colspan="4">青岛途宝软件开发有限公司</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;" rowspan="2">法定代表人</td>
              <td style="width:20%;" rowspan="2">刘梦</td>
              <td style="background-color: #f6faff;width: 150px;">经营状态</td>
              <td style="width:20%;">存续</td>
              <td style="background-color: #f6faff;width: 150px;">成立日期</td>
              <td style="width:20%;">2020-01-17</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">注册资本</td>
              <td>300 万人民币</td>
              <td style="background-color: #f6faff;width: 150px;">实缴资本</td>
              <td>-</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">组织机构代码</td>
              <td>MA3RE7491</td>
              <td style="background-color: #f6faff;width: 150px;">工商注册号</td>
              <td>370213230529508</td>
              <td style="background-color: #f6faff;width: 150px;">实缴资本</td>
              <td>-</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">进出口企业代码</td>
              <td>-</td>
              <td style="background-color: #f6faff;width: 150px;">海关注册编码</td>
              <td>-</td>
              <td style="background-color: #f6faff;width: 150px;">实缴资本</td>
              <td>-</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">所属行业</td>
              <td>批发和零售业 > 零售业 > 货摊、无店铺及其他零售业 > 其他未列明零售业（F5299）</td>
              <td style="background-color: #f6faff;width: 150px;">所属地区</td>
              <td>山东省青岛市崂山区</td>
              <td style="background-color: #f6faff;width: 150px;">登记机关</td>
              <td>青岛市崂山区市场监督管理局</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">企业规模</td>
              <td>小微</td>
              <td style="background-color: #f6faff;width: 150px;">员工数量</td>
              <td>7人</td>
              <td style="background-color: #f6faff;width: 150px;">社保人数</td>
              <td>7</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">营业期限</td>
              <td>2020-01-17 至 无固定期限</td>
              <td style="background-color: #f6faff;width: 150px;">企业类型</td>
              <td colspan="3">有限责任公司（自然人投资或控股）</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">核准日期</td>
              <td>2021-08-26</td>
              <td style="background-color: #f6faff;width: 150px;">英文名</td>
              <td colspan="3">-</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">注册地址</td>
              <td colspan="5">批发和零售业 > 零售业 > 货摊、无店铺及其他零售业 > 其他未列明零售业（F5299）</td>
            </tr>
            <tr>
              <td style="background-color: #f6faff;width: 150px;">经营范围</td>
              <td colspan="5">软件开发；系统集成；技术研发、技术咨询、技术推广、技术转让、技术服务；批发：计算机设备及配件、电子产品、数码产品。（依法须经批准的项目，经相关部门批准后方可开展经营活动）</td>
            </tr>
          </table>
          <div style="margin: 10px 0;color: #666;">
            <span style="margin-right: 10px;">
              更新时间：2024-12-31
            </span>
            <span>
              来源：国家信用信息公示系统
            </span>
          </div>
        </div>
        <div>
          <div style="font-size: 18px;font-weight: 600;padding:10px 10px 6px 0;">股东信息</div>
          <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{ background: '#f6faff', color: '#333', 'font-family': 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif', 'font-weight': '400', 'font-size': '15px' }"
            :cell-style="{ color: '#333', 'font-family': 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif', 'font-weight': '400' }">
            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
            <el-table-column prop="name1" label="股东名称" header-align="center">
            </el-table-column>
            <el-table-column prop="name2" label="认缴出资额" header-align="center">
            </el-table-column>
            <el-table-column prop="name3" label="直接持股比例" header-align="center">
            </el-table-column>
            <el-table-column prop="name4" label="认缴出资日期" header-align="center">
            </el-table-column>
            <el-table-column prop="name5" label="实缴出资额" header-align="center">
            </el-table-column>
            <el-table-column prop="name6" label="综合持股比例" header-align="center">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <div style="font-size: 18px;font-weight: 600;padding:10px 10px 6px 0;">主要人员</div>
          <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{ background: '#f6faff', color: '#333', 'font-family': 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif', 'font-weight': '400', 'font-size': '15px' }"
            :cell-style="{ color: '#333', 'font-family': 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif', 'font-weight': '400' }">
            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
            <el-table-column prop="name1" label="姓名" header-align="center">
            </el-table-column>
            <el-table-column prop="name2" label="职务" header-align="center">
            </el-table-column>
            <el-table-column prop="name3" label="直接持股比例" header-align="center">
            </el-table-column>
            <el-table-column prop="name4" label="综合持股比例" header-align="center">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <div style="font-size: 18px;font-weight: 600;padding:10px 10px 6px 0;">变更记录</div>
          <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{ background: '#f6faff', color: '#333', 'font-family': 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif', 'font-weight': '400', 'font-size': '15px' }"
            :cell-style="{ color: '#333', 'font-family': 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif', 'font-weight': '400' }">
            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
            <el-table-column prop="name1" label="变更日期" header-align="center">
            </el-table-column>
            <el-table-column prop="name2" label="变更事项" header-align="center">
            </el-table-column>
            <el-table-column prop="name3" label="变更前" header-align="center">
            </el-table-column>
            <el-table-column prop="name4" label="变更后" header-align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { advSearch, getBasicInfo } from '@/api/basicdata/checkCompany'
import { debounce } from 'lodash';
export default {
  name: 'inStock',
  props: {
    chiId: {
      type: Number,
      required: null
    }
  },
  data() {
    return {
      tags: [
        { name: '标签一' },
        { name: '标签二' },
        { name: '标签三' },
        { name: '标签四' },
        { name: '标签五' }
      ],
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      restaurants: [],
      //检索名称
      state: '',
      loading: false,
      timeout: null,
      tableData: [{
        name1: '名字'
      }]
    }
  },
  async created() {
    this.querySearchAsync = debounce((queryString, cb) => {
      this.handleSearch(queryString).then(data => cb(data));
    }, 500);
  },
  mounted() {
  },

  methods: {
    goBack() {
      this.$emit('changeShow', 'true')
    },
    search(){
      console.log(this.state)
    },
    // async querySearchAsync(queryString, cb) {
    //   console.log(queryString, cb, 'querySearchAsync')
    //   _.debounce(batchLog, 250, { 'maxWait': 1000 });
    //   if (queryString) {
    //     var results = await this.loadAll()
    //     cb(results)
    //   } else {
    //     cb([])
    //   }
    // },
    async handleSearch(query) {
      if (query) {
        this.loading = true;
        const res = await this.loadAll()
        this.loading = false;
        return res.length > 0
          ? res.map(d => ({ value: d.name, ...d }))
          : [{ isEmpty: true }];
      } else {
        return [{ isEmpty: true }];
      }

    },
    loadAll() {
      return [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
        { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
        { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
        { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
        { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
        { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
        { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
        { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
        { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
        { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
        { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
        { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
        { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
        { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "枪会山", "address": "上海市普陀区棕榈路" },
        { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
        { "value": "钱记", "address": "上海市长宁区天山西路" },
        { "value": "壹杯加", "address": "上海市长宁区通协路" },
        { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
        { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
        { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
        { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
        { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
        { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
        { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
        { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
        { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
        { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
        { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
        { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
        { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
        { "value": "浏阳蒸菜", "address": "天山西路430号" },
        { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
        { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
        { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
        { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
        { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
        { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
      ];
    },
    handleSelect(item) {
      item.value
      console.log(item, 'handleSelect');
    }

  }
}
</script>
<style lang="scss" scoped>
.el-autocomplete ::v-deep .el-input-group__append {
  background-color: #409EFF;
  color: #fff
}

.el-tag {
  margin: 6px 6px 0 0;
}

table {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #e2ebf7;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #e2ebf7;
  color: #333;
  padding: 13px 10px;
}
</style>