模版配置主题页面搭建与列表数据接入

src/api/supervise/pcsj.js

@@ -70,3 +70,10 @@ export function getPcsjXQ(id) {
 
   })
 }
+export function getYwlxList(query) {
+  return request({
+    url: '/apply/supervise/ywlx/list',
+    method: 'get',
+    params: query
+  })
+}

src/views/remote/template/index.vue

@@ -1,11 +1,150 @@
 <template>
-  <div>多喝水抠脚大汉时间跨度花洒金卡等哈手机卡等哈</div>
+  <!-- <div>多喝水抠脚大汉时间跨度花洒金卡等哈手机卡等哈</div> -->
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="100px"
+    >
+      <el-form-item label="业务类型">
+        <el-input
+          v-model="queryParams.ywlx"
+          placeholder="请输入业务类型"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="业务类型名称">
+        <el-input
+          v-model="queryParams.yelxmc"
+          placeholder="请输入业务类型名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          @click="addYwlx"
+          size="mini"
+          >新增</el-button
+        >
+      </el-col></el-row>
+    <el-table
+      v-loading="loading"
+      :data="ydlxList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="业务类型" align="center" prop="ywlx" />
+      <el-table-column label="业务类型名称" align="center" prop="yelxmc" />
+      <el-table-column label="排序" align="center" prop="sort" />
+      <el-table-column label="数据源" align="center" prop="sjy" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
 </template>
 
 <script>
+import { getYwlxList } from "@/api/supervise/pcsj";
 export default {
   data() {
-    return {};
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        ywlx: "", //业务类型
+        yelxmc: "", //业务类型名称
+      },
+      total: 0,
+      loading: false,
+      ydlxList: [],
+    };
+  },
+  methods: {
+    /** 查询监管批次数据列表 */
+    getList() {
+      this.loading = true;
+      getYwlxList(this.queryParams).then((response) => {
+        this.ydlxList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    handleQuery() {},
+    //重置
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        ywlx: "", //业务类型
+        yelxmc: "", //业务类型名称
+      };
+    },
+    handleSelectionChange() {},
+    handleView(row) {},
+    handleEdit(row) {},
+    handleDelete(row) {},
+    //新增业务类型数据
+    addYwlx(){
+
+    }
+  },
+  mounted() {
+    this.getList();
   },
 };
 </script>