epmet-oper-lingshan/epmet-oper-web/src/views/modules/thirdparty/thirdparty.vue

<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="mod-/oper/customize__homecomponent}">
        <div class="btn_box">
          <el-button style="margin-right:20px"
                     size="small"
                     type="primary"
                     @click="handleAdd('add')">认证</el-button>
          <el-button style="margin-left:20px"
                     type="primary"
                     size="small"
                     @click="handleDownDoc">下载接口文档</el-button>
        </div>

        <el-table :data="tableData"
                  ref="ref_customertable"
                  border
                  style="width: 100%;">
          <el-table-column label="序号"
                           type="index"
                           header-align="left"
                           align="left"
                           width="50"></el-table-column>
          <el-table-column label="应用名称"
                           header-align="center"
                           align="center"
                           width="180"
                           prop="name"></el-table-column>
          <el-table-column label="应用介绍"
                           header-align="center"
                           align="center"
                           prop="remark"></el-table-column>
          <el-table-column label="第三方公司名称"
                           header-align="center"
                           align="center"
                           width="160"
                           prop="companyName">
          </el-table-column>
          <el-table-column label="联系人"
                           header-align="center"
                           align="center"
                           width="100"
                           prop="contacts">
          </el-table-column>
          <el-table-column label="联系电话"
                           header-align="center"
                           align="center"
                           prop="mobile"
                           width="150"></el-table-column>

          <el-table-column :label="$t('handle')"
                           fixed="right"
                           header-align="center"
                           align="center"
                           width="200">
            <template slot-scope="scope">
              <el-button type="text"
                         size="small"
                         @click="handleEdit('edit',scope.row)">查看</el-button>
              <el-button type="text"
                         v-if="scope.row.status!=3&&scope.row.status!=2"
                         size="small"
                         @click="handleEdit('check',scope.row)">审核</el-button>
              <el-button type="text"
                         size="small"
                         @click="handlePublish(scope.row)"
                         v-if="scope.row.status==2&&scope.row.status!=3">发布</el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="pageNo"
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="pageSizeChangeHandle"
                       @current-change="pageCurrentChangeHandle"></el-pagination>
      </div>

    </el-card>

    <el-dialog v-if="showAdd"
               :visible.sync="showAdd"
               width="850"
               :before-close="dialogCancle">
      <add-form ref="ref_edit"
                :btnType="btnType"
                :detailsId="detailsId"
                @dialogOk="dialogOk"
                @dialogCancle="dialogCancle"></add-form>
    </el-dialog>
    <el-dialog v-if="showDetail"
               title="详情"
               :visible.sync="showDetail"
               width="850"
               :before-close="dialogCancle">
      <add-form ref="ref_edit"
                :btnType="btnType"
                :detailsId="detailsId"
                @dialogOk="dialogOk"
                @dialogCancle="dialogCancle"></add-form>
    </el-dialog>
    <el-dialog :title=" $t('add')"
               :visible.sync="showPublish"
               width="850"
               :before-close="dialogCancle">
      <publish-form ref="ref_publish"
                    @dialogCancle="dialogCancle"
                    @refreshDataList="loadTable"
                    :id='detailsId'
                    :appUrl="appUrl"
                    :appName="appName"></publish-form>
    </el-dialog>

  </div>
</template>

<script>
import addForm from './addForm'
// import detailForm from './detailForm'
// import FootbarList from '../../productConfig/footbar/FootbarList'
import publishForm from "./publishForm.vue"
import { requestPost, requestGet } from "@/js/dai/request";
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      tableData: [],
      appUrl: "",
      appName: "",
      statusList: [
        {
          value: '0',
          label: '未创建'
        },
        {
          value: '1',
          label: '已创建'
        }
      ],
      selOrgId: '',
      casOptions: [],
      agencyIdArray: [],
      iscascaderShow: 0,
      optionProps: {
        multiple: false,
        // value: 'orgId',
        // label: 'orgName',
        // children: 'subAgencyList',
        checkStrictly: true,

        lazy: true,
        lazyLoad: this.lzayLoadAgency
      },

      pageNo: 1,
      pageSize: 10,
      total: 0,
      showAdd: false,
      showDetail: false,
      showPublish: false,
      detailsId: ""
    }
  },
  components: {
    addForm,
    publishForm
    // detailForm
  },
  activated () {
    this.$nextTick(() => {
      this.$refs['ref_customertable'].doLayout() // 解决表格错位
    })

  },
  async mounted () {

    await this.loadTable()

  },
  methods: {

    lzayLoadAgency (node, resolve) {
      this.getAgency(node, resolve)
      // setTimeout(() => {
      //   this.getAgency(node, resolve)
      // }, 200)
    },

    handleDownDoc: debounce(function () {
      window.open('http://172.20.46.177/oss/20230209/637e6347f1aa484aa3d8c2778e8fee9a.docx')
    }, 2000, { 'leading': true, 'trailing': false }),
    async getAgency (node, resolve) {

      const url = '/third/dataSync/ytorglist'
      // const url = 'http://yapi.elinkservice.cn/mock/102/third/dataSync/ytorglist'

      let params = {
        orgId: node.data ? node.data.value : '0',

      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        const nodes = data.map(item => ({
          value: item.orgId, //
          label: item.orgName,
          // leaf: node.level >= 2 // 5层级
          leaf: !item.haveChild // 5层级
        }))
        resolve(nodes)

      } else {
        this.$message.error(msg)
      }

    },

    async loadTable () {

      const url = "/gov/access/thirdAppManage/page"
      // const url = "http://yapi.elinkservice.cn/mock/102/third/dataSync/page-user"
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.tableData = data.list
        this.total = data.total
      } else {
        this.$message.error(msg)
      }

    },
    handleAdd (add) {
      this.showAdd = true
      this.btnType = add
    },
    dialogCancle () {
      this.showAdd = false
      this.showDetail = false
      this.showPublish = false
    },
    dialogOk () {
      this.showAdd = false
      this.showDetail = false
      this.loadTable()
    },

    // 发布按钮
    handlePublish (row) {
      this.showPublish = true
      this.detailsId = row.id
      this.appUrl = row.link
      this.appName = row.name
      console.log(row);
      this.$nextTick(() => {
        this.$refs.ref_publish.init()
      })
    },
    handleEdit (add, row) {
      this.showDetail = true
      this.btnType = add
      this.detailsId = row.id
    },
    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.loadTable()
    },
    pageSizeChangeHandle (val) {
      this.pageSize = val
      this.loadTable()
    },

  },
  computed: {
  },
}
</script>

<style scoped>
.item-width-1 {
  width: 200px;
}
.item-width-2 {
  width: 400px;
}
.btn_box {
  margin-bottom: 16px;
}
</style>