动态表单配置：表单项配置列表

epmet-oper-web/src/views/modules/dyform/formList.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="registerList">
+    <el-card shadow="never" class="aui-card--fill">
+      <div class="mod-demo__demo}">
+        <el-form :inline="true" ref="queryForm" :model="formQueryParams">
+          <el-form-item label="选择客户" prop="customerId">
+            <el-select v-model="formQueryParams.customerId" clearable placeholder="请选择">
+              <el-option
+                  v-for="item in customerList"
+                  :key="item.customerId"
+                  :label="item.customerName"
+                  :value="item.customerId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="表单名称" prop="formName">
+            <el-input
+                placeholder="请输入内容"
+                v-model="formQueryParams.formName"
+                clearable>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onSearchClicked">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onResetBtnClicked">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+
+    <el-card>
+      <el-table
+          :data="formList"
+          style="width: 100%;margin-bottom: 20px;"
+          row-key="id"
+          border
+          default-expand-all
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column
+            prop="customerName"
+            label="客户"
+            sortable
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="formCode"
+            label="表单编码"
+            sortable
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="formName"
+            label="表单名称">
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="onCurrentPageChanged"
+          :current-page="this.pageArgs.currentPage"
+          :page-size="this.pageArgs.pageSize"
+          :total="this.pageArgs.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex';
+import {Loading} from 'element-ui'; // 引入Loading服务
+
+let loading; // 加载动画
+export default {
+  data() {
+    return {
+      customerList: [],
+      formQueryParams: {
+        customerId: '',
+        formName: ''
+      },
+      formList: [],
+      pageArgs: {
+        pageSize: 20,
+        currentPage: 1,
+        total: 0
+      }
+    };
+  },
+  components: {},
+  activated() {
+    this.$nextTick(() => {
+      this.$refs.table.doLayout(); // 解决表格错位
+    });
+  },
+  mounted() {
+    // eslint-disable-next-line
+    this.loadCustomerList();
+    this.searchFormList();
+  },
+  computed: {
+    tableHeight() {
+      return this.clientHeight - 60 - 80 - 80 - 70;
+    },
+    ...mapGetters(['clientHeight', 'env'])
+  },
+  methods: {
+    /**
+     * 加载客户列表
+     */
+    loadCustomerList() {
+      this.$http.get('/oper/crm/customer/getvalidcustomerlist').then(({data: res}) => {
+        if (res.code === 0) {
+          this.customerList = res.data;
+          this.customerList.unshift({"customerId": "default", "customerName": "模板"})
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+
+    searchFormList() {
+      this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=${this.formQueryParams.formName}&pageNo=${this.pageArgs.currentPage}&pageSize=${this.pageArgs.pageSize}`)
+          .then(({data: httpdata, status: httpStatus}) => {
+            if (httpdata.code === 0) {
+              this.formList = httpdata.data.list;
+              this.pageArgs.total = httpdata.data.total;
+            } else {
+              this.$message({
+                type: 'error',
+                nessage: res.msg
+              })
+            }
+
+            console.log(this.pageArgs)
+          })
+    },
+
+    /**
+     * 搜索事件
+     */
+    onSearchClicked() {
+      this.searchFormList();
+    },
+
+    onResetBtnClicked() {
+      this.$refs['queryForm'].resetFields();
+    },
+
+    onCurrentPageChanged(currPage) {
+      this.pageArgs.currentPage = currPage;
+      this.searchFormList();
+    },
+
+    // 开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      });
+    },
+    // 结束加载动画
+    endLoading() {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    }
+  }
+};
+</script>
+<style lang="css">
+.aaa {
+  height: 100px;
+}
+
+/* .register .el-table .el-table__header-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}*/
+/*
+.register .el-table .el-table__fixed-body-wrapper {
+  height: calc(100% - 44px);
+  margin-top: 44px;
+  overflow-y: auto !important;
+} */
+</style>