centaline-data-driven 1.1.54 → 1.1.55

package/src/centaline/dynamicForm/src/dynamicFormListTable.vue

@@ -1,376 +1,376 @@
-<template>
-  <div class="ct-form-list" v-focus="foucus" :class="{'tableDisabled':model.tableDisabled}">
-    <div class="list-title">
-      <h5>{{model.title}}</h5>
-    </div>
-    <div class="list-button max-btn-add">
-      <el-button v-if="model.create" type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow">
-        新增
-      </el-button>
-    </div>
-
-    <div id="listTable">
-      <el-row>
-        <el-col :span="24">
-          <el-table size="mini" class="max-table--border" :data="model.tableData" :key="itemKey" border style="width: 100%" highlight-current-row :show-summary="model.showSummary" :summary-method="getSummaries">
-            <!--数据列-->
-            <el-table-column v-for="(v,i) in model.rows[0].field" :key="i" :prop="v.id" :label="v.label" v-if="v.show !== false" header-align="center">
-              <template slot="header" slot-scope="scope">
-                <div class="cell" :class="{'ct-table-required':v.required&&model.rows[0].edit&& model.rows[0].delete&&!model.tableDisabled}">
-                  {{v.label}}
-                </div>
-              </template>
-              <template slot-scope="scope">
-                <span v-if="scope.row.isSet">
-                  <!--<component v-if ref="Fields" :is="v.is" :vmodel="scope.row[v.id]" :api="model.OptApi"></component>-->
-                  <component ref="Fields" :is="v.is" :vmodel="model.currentRow.data[v.id]" :api="model.OptApi"
-                             @change="changeHandler(model.currentRow.data[v.id], model.currentRow.data.$sourceIndex)"
-                             @input="inputHandler(model.currentRow.data[v.id], model.currentRow.data.$sourceIndex)"></component>
-                </span>
-                <!--<span v-else>{{scope.row[v.id].labelValue}}</span>-->
-                <span v-else-if="v.is=='ct-sensitiveeye'">
-                  <component v-if ref="Fields" :is="v.is" :vmodel="scope.row[v.id]" :vrowmodel="scope.row" :api="model.OptApi"></component>
-                </span>
-                <ct-span v-else :vmodel="scope.row[v.id]" :rowNum="scope.row.$sourceIndex" ref="FieldsLabel"></ct-span>
-              </template>
-            </el-table-column>
-
-            <!--操作列-->
-            <el-table-column label="操作" v-if="model.rows[0].edit || model.rows[0].delete || model.buttons.length > 0" header-align="center">
-              <template slot-scope="scope">
-                <span v-if="scope.row.edit || scope.row.isSet" class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="saveRow(scope.row,scope.$index,true)">
-                  {{scope.row.isSet?'保存':"修改"}}
-                </span>
-                <span v-if="scope.row.delete && !scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="deleteRow(scope.$index, scope.row.$sourceIndex)">
-                  删除
-                </span>
-                <span v-else-if="scope.row.isSet" class="el-tag  el-tag--mini" style="cursor: pointer;" @click="saveRow(scope.row,scope.$index,false)">
-                  取消
-                </span>
-                <span v-for="(v,i) in model.buttons" v-if="!scope.row.isSet" class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="buttonClick(scope.row, v)">
-                  {{v.label}}
-                </span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-col>
-      </el-row>
-    </div>
-
-  </div>
-</template>
-<script>
-  //Form内表格
-  var ctSpan = {//临时的span组件对象，用于vue双向绑定，强制更新
-    props: {
-      vmodel: Object,
-      rowNum: Number,
-    },
-    data: function () {
-      return {
-      }
-    },
-    methods: {
-      getClass() {
-        if (this.vmodel.is === "ct-inputNumber") {
-          return 'ct-table-inputnumber';
-        }
-      }
-    },
-    template: '<div :class="getClass()">{{vmodel.labelValue}}{{vmodel.unitName}}</div>'
-  }
-
-  export default {
-    name: 'ct-form-list-table',
-    components: {
-      'ct-span': ctSpan
-    },
-    props: {
-      vmodel: Object,
-      api: String
-    },
-    data() {
-      return {
-        model: null,
-        foucus: false,
-        itemKey: Math.random()
-      }
-    },
-    created() {
-      let self = this;
-      this.model = this.vmodel;
-      this.model.OptApi = this.api;
-
-      this.$nextTick(function () {
-        self.model.refField = this.$refs.Fields;
-        self.model.refFieldsLabel = this.$refs.FieldsLabel;
-      });
-    },
-    methods: {
-      //添加账号
-      addRow() {
-        var app = this;
-        if (app.model.dialogEdit) {
-          app.model.addRow(() => {
-            app.$forceUpdate();
-          });
-        }
-        else {
-          for (let i of app.model.tableData) {
-            if (i.isSet) return app.$message.warning("请先保存当前编辑项");
-          }
-          let newRow = app.model.getCloneRowData(0);
-          newRow.isSet = true;
-          app.model.currentRow.isSet = false;
-          app.model.tableData.push(newRow);
-          app.model.currentRow.data = app.model.getCloneRowData(0);
-          app.model.currentRow.isNew = true;
-          app.model.currentRow.index = app.model.tableData.length - 1;
-        }
-      },
-      //修改
-      saveRow(row, index, isCancel) {
-        let app = this;
-        if (app.model.dialogEdit) {
-          this.editRow(row.$sourceIndex);
-          return;
-        }
-
-        //点击修改 判断是否已经保存所有操作
-        for (let i of app.model.tableData) {
-          if (i.isSet && app.model.currentRow.index !== index) {
-            app.$message.warning("请先保存当前编辑项");
-            return false;
-          }
-        }
-        //是否是取消操作
-        if (!isCancel) {
-          if (app.model.currentRow.isNew) app.model.tableData.splice(index, 1);
-          return row.isSet = !row.isSet;
-          app.model.currentRow.isSet = false;
-        }
-        //提交数据
-        if (row.isSet) {//保存
-          if (app.fieldsValidExcute()) {
-            if (!app.model.isDuplicated(app.model.currentRow.data, app.model.currentRow.isNew ? -1 : app.model.currentRow.data.$sourceIndex)) {
-              let data = app.model.currentRow.data;
-              for (let k in data) {
-                if (k !== '$sourceIndex') {
-                  row[k].value = data[k].value;
-                  row[k].value1 = data[k].value1;
-                  row[k].text = data[k].text;
-                }
-              };
-              if (app.model.currentRow.isNew) {
-                app.model.addSourceRow(row);
-              }
-
-              row.isSet = false;
-              app.model.currentRow.isSet = false;
-              app.itemKey = Math.random();
-              this.model.change = this.model.formListChange;
-              app.$emit('change');
-            }
-          }
-        }
-        else {//修改
-          app.model.currentRow.data = app.model.getCloneRowData(row.$sourceIndex);
-          app.model.currentRow.isNew = false;
-          app.model.currentRow.index = index;
-          app.model.currentRow.isSet = true;
-          row.isSet = true;
-        }
-      },
-      //删除
-      deleteRow(index, sourceIndex) {
-        var self = this;
-        //判断是否已经保存所有操作
-        for (let i of self.model.tableData) {
-          if (i.isSet && self.model.currentRow.index !== index) {
-            self.$message.warning("请先保存当前编辑项");
-            return false;
-          }
-        }
-
-        this.model.deleteRow(sourceIndex, () => {
-          self.model.tableData.splice(index, 1);
-          self.$forceUpdate();
-
-          self.model.change = self.model.formListChange;
-          self.$emit('change');
-        });
-      },
-      editRow(index) {
-        var self = this;
-        this.model.editRow(index, () => {
-          self.$forceUpdate();
-          self.$refs.FieldsLabel.forEach((fd) => {
-            if (fd.rowNum === index) {
-              fd.$forceUpdate();
-            }
-          });
-        });
-      },
-      fieldsValidExcute() {
-        var self = this;
-        var rtnBool = true;
-        self.$refs.Fields.forEach((f) => {
-          if (typeof f.validExcute !== 'undefined') {
-            if (!f.validExcute()) {
-              rtnBool = false;
-            }
-          }
-        });
-        return rtnBool;
-      },
-      validExcute() {
-        var self = this;
-        var rtnBool = true;
-        for (let i of self.model.tableData) {
-          if (i.isSet) {
-            self.$message.warning("请先保存表格编辑项");
-            rtnBool = false;
-          }
-        };
-
-        if (rtnBool && self.model.required && this.model.tableData.length === 0) {
-          self.$message.warning(this.model.label + " 表格不能为空");
-          rtnBool = false;
-        }
-        self.foucus = true;
-
-        return rtnBool;
-      },
-      changeHandler(field, index) {
-        var self = this;
-        this.model.change = field.change;
-        this.model.currentRowIndex = index;
-        this.model.currentEventField = field;
-        self.$emit('change');
-
-        //如果有汇总列，触发重新计算汇总
-        this.recalculationSummary();
-      },
-      inputHandler(field, index) {
-        var self = this;
-        this.model.input = field.input;//当前小组件事件作为大组件事件
-        this.model.currentRowIndex = index;
-        this.model.currentEventField = field;
-
-        self.$emit('input');
-
-        //如果有汇总列，触发重新计算汇总
-        this.recalculationSummary();
-      },
-      //如果有汇总列，触发重新计算汇总
-      recalculationSummary() {
-        if (this.model.showSummary) {
-          this.model.tableData.push({});
-          this.model.tableData.pop();
-        }
-      },
-      buttonClick(row, button) {
-        var submitData = {};
-        button.submitFormField.forEach((v) => {
-          submitData[v] = row[v].value;
-        });
-        this.model.currentRowIndex = row.$sourceIndex;
-
-        this.$emit('tableButtonClick', button, submitData);
-      },
-      //汇总行 计算
-      getSummaries(param) {
-        const self = this;
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = this.model.totalColTitle;
-            return;
-          }
-
-          if (self.model.totalCols.indexOf(column.property) > -1) {
-            const values = data.map(item => {
-              let value = 0;
-              if (item.isSet) {
-                value = self.model.currentRow.data[column.property].value;
-              }
-              else {
-                value = item[column.property].value;
-              }
-              return Number(value);
-            });
-
-            if (!values.every(value => isNaN(value))) {
-              sums[index] = values.reduce((prev, curr) => {
-                const value = Number(curr);
-                if (!isNaN(value)) {
-                  return Number(prev + curr);
-                } else {
-                  return Number(prev);
-                }
-              }, 0);
-              //sums[index] += ' 元';
-              if (data[0][column.property].decimals && data[0][column.property].decimals > 0) {
-                sums[index] = sums[index].toFixed(data[0][column.property].decimals);
-              }
-            } else {
-              sums[index] = 'N/A';
-            }
-          }
-        });
-
-        return sums;
-      }
-    }
-  }
-</script>
-
-<style>
-  .el-table-add-row {
-    margin-top: 10px;
-    width: 100%;
-    height: 34px;
-    border: 1px dashed #c1c1cd;
-    border-radius: 3px;
-    cursor: pointer;
-    justify-content: center;
-    display: flex;
-    line-height: 34px;
-  }
-
-  .ct-form-list .list-title {
-    padding-bottom: 5px;
-    text-align: left;
-    display: inline-table;
-    width: 45%;
-  }
-
-  .ct-form-list .list-button {
-    padding-bottom: 5px;
-    text-align: right;
-    width: 45%;
-    display: inline-table;
-    float: right;
-  }
-
-  .ct-table-inputnumber {
-    text-align: right;
-  }
-
-  .ct-form-list .el-table__footer-wrapper .el-table__footer .has-gutter div {
-    text-align: right;
-  }
-
-  .ct-form-list .el-table__footer-wrapper .el-table__footer .has-gutter tr td:first-child div {
-    text-align: left;
-  }
-
-  .ct-table-required {
-    color: red;
-  }
-  .tableDisabled {
-    pointer-events: none;
-    opacity:0.4;
-  }
-</style>
+<template>
+  <div class="ct-form-list" v-focus="foucus" :class="{'tableDisabled':model.tableDisabled}">
+    <div class="list-title">
+      <h5>{{model.title}}</h5>
+    </div>
+    <div class="list-button max-btn-add">
+      <el-button v-if="model.create" type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow">
+        新增
+      </el-button>
+    </div>
+
+    <div id="listTable">
+      <el-row>
+        <el-col :span="24">
+          <el-table size="mini" class="max-table--border" :data="model.tableData" :key="itemKey" border style="width: 100%" highlight-current-row :show-summary="model.showSummary" :summary-method="getSummaries">
+            <!--数据列-->
+            <el-table-column v-for="(v,i) in model.rows[0].field" :key="i" :prop="v.id" :label="v.label" v-if="v.show !== false" header-align="center">
+              <template slot="header" slot-scope="scope">
+                <div class="cell" :class="{'ct-table-required':v.required&&model.rows[0].edit&& model.rows[0].delete&&!model.tableDisabled}">
+                  {{v.label}}
+                </div>
+              </template>
+              <template slot-scope="scope">
+                <span v-if="scope.row.isSet">
+                  <!--<component v-if ref="Fields" :is="v.is" :vmodel="scope.row[v.id]" :api="model.OptApi"></component>-->
+                  <component ref="Fields" :is="v.is" :vmodel="model.currentRow.data[v.id]" :api="model.OptApi"
+                             @change="changeHandler(model.currentRow.data[v.id], model.currentRow.data.$sourceIndex)"
+                             @input="inputHandler(model.currentRow.data[v.id], model.currentRow.data.$sourceIndex)"></component>
+                </span>
+                <!--<span v-else>{{scope.row[v.id].labelValue}}</span>-->
+                <span v-else-if="v.is=='ct-sensitiveeye'">
+                  <component v-if ref="Fields" :is="v.is" :vmodel="scope.row[v.id]" :vrowmodel="scope.row" :api="model.OptApi"></component>
+                </span>
+                <ct-span v-else :vmodel="scope.row[v.id]" :rowNum="scope.row.$sourceIndex" ref="FieldsLabel"></ct-span>
+              </template>
+            </el-table-column>
+
+            <!--操作列-->
+            <el-table-column label="操作" v-if="model.rows[0].edit || model.rows[0].delete || model.buttons.length > 0" header-align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.edit || scope.row.isSet" class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="saveRow(scope.row,scope.$index,true)">
+                  {{scope.row.isSet?'保存':"修改"}}
+                </span>
+                <span v-if="scope.row.delete && !scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="deleteRow(scope.$index, scope.row.$sourceIndex)">
+                  删除
+                </span>
+                <span v-else-if="scope.row.isSet" class="el-tag  el-tag--mini" style="cursor: pointer;" @click="saveRow(scope.row,scope.$index,false)">
+                  取消
+                </span>
+                <span v-for="(v,i) in model.buttons" v-if="!scope.row.isSet" class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="buttonClick(scope.row, v)">
+                  {{v.label}}
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+
+  </div>
+</template>
+<script>
+  //Form内表格
+  var ctSpan = {//临时的span组件对象，用于vue双向绑定，强制更新
+    props: {
+      vmodel: Object,
+      rowNum: Number,
+    },
+    data: function () {
+      return {
+      }
+    },
+    methods: {
+      getClass() {
+        if (this.vmodel.is === "ct-inputNumber") {
+          return 'ct-table-inputnumber';
+        }
+      }
+    },
+    template: '<div :class="getClass()">{{vmodel.labelValue}}{{vmodel.unitName}}</div>'
+  }
+
+  export default {
+    name: 'ct-form-list-table',
+    components: {
+      'ct-span': ctSpan
+    },
+    props: {
+      vmodel: Object,
+      api: String
+    },
+    data() {
+      return {
+        model: null,
+        foucus: false,
+        itemKey: Math.random()
+      }
+    },
+    created() {
+      let self = this;
+      this.model = this.vmodel;
+      this.model.OptApi = this.api;
+
+      this.$nextTick(function () {
+        self.model.refField = this.$refs.Fields;
+        self.model.refFieldsLabel = this.$refs.FieldsLabel;
+      });
+    },
+    methods: {
+      //添加账号
+      addRow() {
+        var app = this;
+        if (app.model.dialogEdit) {
+          app.model.addRow(() => {
+            app.$forceUpdate();
+          });
+        }
+        else {
+          for (let i of app.model.tableData) {
+            if (i.isSet) return app.$message.warning("请先保存当前编辑项");
+          }
+          let newRow = app.model.getCloneRowData(0);
+          newRow.isSet = true;
+          app.model.currentRow.isSet = false;
+          app.model.tableData.push(newRow);
+          app.model.currentRow.data = app.model.getCloneRowData(0);
+          app.model.currentRow.isNew = true;
+          app.model.currentRow.index = app.model.tableData.length - 1;
+        }
+      },
+      //修改
+      saveRow(row, index, isCancel) {
+        let app = this;
+        if (app.model.dialogEdit) {
+          this.editRow(row.$sourceIndex);
+          return;
+        }
+
+        //点击修改 判断是否已经保存所有操作
+        for (let i of app.model.tableData) {
+          if (i.isSet && app.model.currentRow.index !== index) {
+            app.$message.warning("请先保存当前编辑项");
+            return false;
+          }
+        }
+        //是否是取消操作
+        if (!isCancel) {
+          if (app.model.currentRow.isNew) app.model.tableData.splice(index, 1);
+          return row.isSet = !row.isSet;
+          app.model.currentRow.isSet = false;
+        }
+        //提交数据
+        if (row.isSet) {//保存
+          if (app.fieldsValidExcute()) {
+            if (!app.model.isDuplicated(app.model.currentRow.data, app.model.currentRow.isNew ? -1 : app.model.currentRow.data.$sourceIndex)) {
+              let data = app.model.currentRow.data;
+              for (let k in data) {
+                if (k !== '$sourceIndex') {
+                  row[k].value = data[k].value;
+                  row[k].value1 = data[k].value1;
+                  row[k].text = data[k].text;
+                }
+              };
+              if (app.model.currentRow.isNew) {
+                app.model.addSourceRow(row);
+              }
+
+              row.isSet = false;
+              app.model.currentRow.isSet = false;
+              app.itemKey = Math.random();
+              this.model.change = this.model.formListChange;
+              app.$emit('change');
+            }
+          }
+        }
+        else {//修改
+          app.model.currentRow.data = app.model.getCloneRowData(row.$sourceIndex);
+          app.model.currentRow.isNew = false;
+          app.model.currentRow.index = index;
+          app.model.currentRow.isSet = true;
+          row.isSet = true;
+        }
+      },
+      //删除
+      deleteRow(index, sourceIndex) {
+        var self = this;
+        //判断是否已经保存所有操作
+        for (let i of self.model.tableData) {
+          if (i.isSet && self.model.currentRow.index !== index) {
+            self.$message.warning("请先保存当前编辑项");
+            return false;
+          }
+        }
+
+        this.model.deleteRow(sourceIndex, () => {
+          self.model.tableData.splice(index, 1);
+          self.$forceUpdate();
+
+          self.model.change = self.model.formListChange;
+          self.$emit('change');
+        });
+      },
+      editRow(index) {
+        var self = this;
+        this.model.editRow(index, () => {
+          self.$forceUpdate();
+          self.$refs.FieldsLabel.forEach((fd) => {
+            if (fd.rowNum === index) {
+              fd.$forceUpdate();
+            }
+          });
+        });
+      },
+      fieldsValidExcute() {
+        var self = this;
+        var rtnBool = true;
+        self.$refs.Fields.forEach((f) => {
+          if (typeof f.validExcute !== 'undefined') {
+            if (!f.validExcute()) {
+              rtnBool = false;
+            }
+          }
+        });
+        return rtnBool;
+      },
+      validExcute() {
+        var self = this;
+        var rtnBool = true;
+        for (let i of self.model.tableData) {
+          if (i.isSet) {
+            self.$message.warning("请先保存表格编辑项");
+            rtnBool = false;
+          }
+        };
+
+        if (rtnBool && self.model.required && this.model.tableData.length === 0) {
+          self.$message.warning(this.model.label + " 表格不能为空");
+          rtnBool = false;
+        }
+        self.foucus = true;
+
+        return rtnBool;
+      },
+      changeHandler(field, index) {
+        var self = this;
+        this.model.change = field.change;
+        this.model.currentRowIndex = index;
+        this.model.currentEventField = field;
+        self.$emit('change');
+
+        //如果有汇总列，触发重新计算汇总
+        this.recalculationSummary();
+      },
+      inputHandler(field, index) {
+        var self = this;
+        this.model.input = field.input;//当前小组件事件作为大组件事件
+        this.model.currentRowIndex = index;
+        this.model.currentEventField = field;
+
+        self.$emit('input');
+
+        //如果有汇总列，触发重新计算汇总
+        this.recalculationSummary();
+      },
+      //如果有汇总列，触发重新计算汇总
+      recalculationSummary() {
+        if (this.model.showSummary) {
+          this.model.tableData.push({});
+          this.model.tableData.pop();
+        }
+      },
+      buttonClick(row, button) {
+        var submitData = {};
+        button.submitFormField.forEach((v) => {
+          submitData[v] = row[v].value;
+        });
+        this.model.currentRowIndex = row.$sourceIndex;
+
+        this.$emit('tableButtonClick', button, submitData);
+      },
+      //汇总行 计算
+      getSummaries(param) {
+        const self = this;
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = this.model.totalColTitle;
+            return;
+          }
+
+          if (self.model.totalCols.indexOf(column.property) > -1) {
+            const values = data.map(item => {
+              let value = 0;
+              if (item.isSet) {
+                value = self.model.currentRow.data[column.property].value;
+              }
+              else {
+                value = item[column.property].value;
+              }
+              return Number(value);
+            });
+
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!isNaN(value)) {
+                  return Number(prev + curr);
+                } else {
+                  return Number(prev);
+                }
+              }, 0);
+              //sums[index] += ' 元';
+              if (data[0][column.property].decimals && data[0][column.property].decimals > 0) {
+                sums[index] = sums[index].toFixed(data[0][column.property].decimals);
+              }
+            } else {
+              sums[index] = 'N/A';
+            }
+          }
+        });
+
+        return sums;
+      }
+    }
+  }
+</script>
+
+<style>
+  .el-table-add-row {
+    margin-top: 10px;
+    width: 100%;
+    height: 34px;
+    border: 1px dashed #c1c1cd;
+    border-radius: 3px;
+    cursor: pointer;
+    justify-content: center;
+    display: flex;
+    line-height: 34px;
+  }
+
+  .ct-form-list .list-title {
+    padding-bottom: 5px;
+    text-align: left;
+    display: inline-table;
+    width: 45%;
+  }
+
+  .ct-form-list .list-button {
+    padding-bottom: 5px;
+    text-align: right;
+    width: 45%;
+    display: inline-table;
+    float: right;
+  }
+
+  .ct-table-inputnumber {
+    text-align: right;
+  }
+
+  .ct-form-list .el-table__footer-wrapper .el-table__footer .has-gutter div {
+    text-align: right;
+  }
+
+  .ct-form-list .el-table__footer-wrapper .el-table__footer .has-gutter tr td:first-child div {
+    text-align: left;
+  }
+
+  .ct-table-required {
+    color: red;
+  }
+  .tableDisabled {
+    pointer-events: none;
+    opacity:0.4;
+  }
+</style>