初步完成了"表单管理"和"表单项管理"

2 years ago · 768be46019
2 changed files with 178 additions and 3 deletions
--- a/epmet-oper-web/.env.development
+++ b/epmet-oper-web/.env.development
@ -1,6 +1,6 @@
 NODE_ENV=development
 # VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  https://epmet-preview.elinkservice.cn/api
+VUE_APP_API_SERVER =  http://localhost:8080/api
 # VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
 VUE_APP_NODE_ENV=dev
--- a/epmet-oper-web/src/views/modules/dyform/itemList.vue
+++ b/epmet-oper-web/src/views/modules/dyform/itemList.vue
@ -0,0 +1,175 @@
+<template>
+  <div>
+    <el-card shadow="never" class="aui-card--fill">
+      <el-form :inline="true" ref="queryForm" :model="formQueryParams" :rules="formQueryRules">
+        <el-form-item label="选择客户" prop="customerId">
+          <el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" @change="onCustomerSelChanged">
+            <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="formId">
+          <el-select v-model="formQueryParams.formId" clearable placeholder="请选择">
+            <el-option
+                v-for="item in formList"
+                :key="item.id"
+                :label="item.formName"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </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>
+    </el-card>
+
+    <el-card>
+      <el-table
+          :data="formItemList"
+          style="width: 100%;margin-bottom: 20px;"
+          row-key="id"
+          border
+          default-expand-all
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column
+            prop="formCode"
+            label="表单编码"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="itemGroupName"
+            label="所属分组"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="label"
+            label="表单项名称"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="optionSourceType"
+            label="选项来源类型">
+          <template slot-scope="scope">
+            {{ scope.row.optionSourceType == 'local' ? '直接定义' : 'api获取' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="optionSourceValue"
+            label="选项来源值">
+        </el-table-column>
+        <el-table-column
+            prop="tableName"
+            label="数据库表名">
+        </el-table-column>
+        <el-table-column
+            prop="columnName"
+            label="数据库列名">
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+<script>
+
+import {mapGetters} from 'vuex';
+import {Loading} from 'element-ui'; // 引入Loading服务
+
+let loading; // 加载动画
+
+export default {
+  data() {
+    return {
+      formQueryParams: {
+        customerId: '',
+        formId: '',
+      },
+      customerList: [],
+      formList: [],
+      formQueryRules: {
+        customerId: [{required: true, message: '请选择客户'}],
+        formId: [{required: true, message: '请选择表单'}]
+      },
+      formItemList: []
+    }
+  },
+  mounted() {
+    this.loadCustomerList();
+  },
+
+  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)
+        }
+      })
+    },
+
+    /**
+     * 加载表单列表
+     */
+    loadFormList() {
+      this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=&pageNo=1&pageSize=100`)
+          .then(({data: httpdata, status: httpStatus}) => {
+            if (httpdata.code === 0) {
+              this.formList = httpdata.data.list;
+            } else {
+              this.$message({
+                type: 'error',
+                nessage: res.msg
+              })
+            }
+          })
+    },
+
+    /**
+     * 加载表单项
+     */
+    loadItemList() {
+      this.$refs['queryForm'].validate(rst => {
+        if (!rst) {
+          return;
+        }
+
+        this.$http.get(`/oper/customize/icform/config/listItems?customerId=${this.formQueryParams.customerId}&formId=${this.formQueryParams.formId}`).then(({
+                                                                                                                                                              status: httpStatus,
+                                                                                                                                                              data: httpData
+                                                                                                                                                            }) => {
+          if (httpData.code !== 0) {
+            this.$message({
+              type: 'error',
+              message: httpData.msg
+            });
+            return;
+          }
+
+          this.formItemList = httpData.data;
+        })
+      })
+    },
+
+    onCustomerSelChanged(currCustomerId) {
+      this.formQueryParams.customerId = currCustomerId;
+      this.loadFormList();
+    },
+
+    onSearchClicked() {
+      this.loadItemList();
+    }
+  }
+}
+</script>