cloud-web-corejs 1.0.0

package/src/views/user/file_view_ins/propertiesDialog.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-dialog
+    title="文件详情"
+    :append-to-body="true"
+    :modal-append-to-body="falseValue"
+    :close-on-click-modal="falseValue"
+    :visible.sync="showDialog"
+    :modal="falseValue"
+    custom-class="dialog-style list-dialog"
+    width="700px"
+    height="500px"
+    @close="dialogClose"
+    v-el-drag-dialog
+    v-el-dialog-center
+  >
+    <div id="containt">
+      <div class="detail-wrap">
+        <el-form ref="editForm" :model="attachmentDTO">
+          <div class="d-header clearfix">
+            <div class="fl">
+              <i class="el-icon-info"/>
+              文件详情
+            </div>
+            <div class="fr"></div>
+          </div>
+          <baseTabs>
+            <baseTabPane label="基本信息">
+              <template #default>
+                <table class="table-detail">
+                  <tbody>
+                  <tr>
+                    <th>文件路径</th>
+                    <td colspan="3">
+                      <el-breadcrumb separator-class="el-icon-arrow-right">
+                        <el-breadcrumb-item v-for="treeNode in treeNodeArr">{{
+                            treeNode.label
+                          }}
+                        </el-breadcrumb-item>
+                      </el-breadcrumb>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      文件名称
+                    </th>
+                    <td colspan="3">{{ attachmentDTO.name }}</td>
+                  </tr>
+                  <tr>
+                    <th>文件说明</th>
+                    <td colspan="3">{{attachmentDTO.note}}</td>
+                  </tr>
+                  <tr>
+                    <th>文件大小</th>
+                    <td>{{ formatFileSize(attachmentDTO.fileSize) }}</td>
+                  </tr>
+                  <tr>
+                    <th>单号</th>
+                    <td>{{ attachmentDTO.billSn }}</td>
+                  </tr>
+                  <tr>
+                    <th>单据说明</th>
+                    <td colspan="3">{{attachmentDTO.billInfo}}</td>
+                  </tr>
+                  <tr>
+                    <th>创建人</th>
+                    <td>{{ attachmentDTO.createBy }}</td>
+                    <th>创建时间</th>
+                    <td>{{ attachmentDTO.createDate }}</td>
+                  </tr>
+                  </tbody>
+                </table>
+              </template>
+            </baseTabPane>
+            <baseTabPane label="文件属性">
+              <template #default>
+                <vxe-grid
+                  ref="table-m1"
+                  class="vxe-tableNo"
+                  height="224px"
+                  :data="attachmentDTO.fileAttachAttributeDTOs"
+                  v-bind="vxeOption"
+                  @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                  @custom="$vxeTableUtil.customHandle"
+                ></vxe-grid>
+              </template>
+            </baseTabPane>
+          </baseTabs>
+        </el-form>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'propertiesDialog',
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    treeNodeArr:{
+      type:Array
+    }
+  },
+  components: {},
+  data() {
+    return {
+      showDialog: true,
+      falseValue: false,
+      vxeOption: {},
+      showContent: true,
+      attachmentDTO: {},
+      current_prefix: '',
+      filePrefix: '',
+    };
+  },
+  computed:{
+    pathNameArr(){
+      if(this.attachmentDTO.treePathName){
+        return ('全部文件'+this.attachmentDTO.treePathName.slice(0,-1)).split(',');
+      }
+    }
+  },
+  created() {
+    let attachmentDTO = Object.assign({}, this.$attrs.editAttachment);
+    this.attachmentDTO = attachmentDTO;
+    this.current_prefix = this.attachmentDTO && this.attachmentDTO.serverName ? ('/' + this.attachmentDTO
+        .serverName) :
+      '';
+  },
+  mounted() {
+    this.getData();
+    this.initTableM1();
+  },
+  methods: {
+    dialogClose() {
+      this.$emit('update:visiable', false);
+    },
+    reloadContent() {
+      this.getAttributes();
+    },
+    getData() {
+      this.getAttributes();
+    },
+    getAttributes() {
+      this.$http({
+        url: this.current_prefix + '/attachment/attribute/list',
+        method: 'post',
+        data: {
+          id: this.attachmentDTO.id
+        },
+        isLoading: true,
+        // modalStrictly: true,
+        success: res => {
+          this.$set(this.attachmentDTO, 'fileAttachAttributeDTOs', res.objx || []);
+        }
+      });
+    },
+    initTableM1() {
+      //明细
+      var that = this;
+      const tableRef = 'table-m1';
+      const tableOption = {
+        vue: this,
+        tableRef: tableRef,
+        tableName: 'file_view_ins_propertiesDialog_list-m1',
+        columns: [
+          {
+            type: 'checkbox',
+            fixed: 'left',
+            width: 48,
+            resizable: false
+          },
+          {
+            title: '属性名称',
+            field: 'attributeName',
+            width: 200
+          },
+          {
+            title: '属性值',
+            field: 'attributeValue',
+            width: 200
+          },
+          {
+            width: 50,
+            fixed: 'right',
+            title: '',
+            sortable: false
+          }
+        ]
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption = opts;
+      });
+    },
+    formatFileSize(fileSize) {
+      fileSize = fileSize || 0;
+      if (fileSize < 1024) {
+        return fileSize + 'B';
+      } else if (fileSize < (1024 * 1024)) {
+        var temp = fileSize / 1024;
+        temp = temp.toFixed(2);
+        return temp + 'KB';
+      } else if (fileSize < (1024 * 1024 * 1024)) {
+        var temp = fileSize / (1024 * 1024);
+        temp = temp.toFixed(2);
+        return temp + 'MB';
+      } else {
+        var temp = fileSize / (1024 * 1024 * 1024);
+        temp = temp.toFixed(2);
+        return temp + 'GB';
+      }
+    }
+  }
+};
+</script>

package/src/views/user/form/form_ins_list/edit.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="detail-wrap">
+    <el-form ref="editForm" :model="formInsList">
+      <div class="d-header clearfix">
+        <div class="fl">
+          <i class="el-icon-info"/>
+          查看表单实例列表字段定义
+        </div>
+        <div class="fr">
+          <el-button type="primary" plain class="button-sty" @click="$baseReload()" icon="el-icon-refresh-right">重置
+          </el-button>
+          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">保存</el-button>
+        </div>
+      </div>
+      <baseTabs>
+        <baseTabPane label="基本信息">
+          <template #default>
+            <table class="table-detail">
+              <tbody>
+              <tr>
+                <th>模板编码</th>
+                <td>
+                  {{ formInsList.formCode }}
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  脚本
+                  <!--                  <scriptDescriptionButton path="static/readme/ExportTemplate.txt"></scriptDescriptionButton>-->
+                  <scriptTestButton :script.sync="formInsList.script"></scriptTestButton>
+                </th>
+                <td colspan="7">
+                  <el-form-item prop="script" :rules="[{ required: false, trigger: 'blur' }]">
+                    <code-editor mode="java" :readonly="!1" v-model="formInsList.script"
+                                 v-if="showCodeEditor"></code-editor>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <th>创建人</th>
+                <td>{{ formInsList.createBy }}</td>
+                <th>创建时间</th>
+                <td>{{ formInsList.createDate }}</td>
+                <th>更新人</th>
+                <td>{{ formInsList.modifyBy }}</td>
+                <th>更新时间</th>
+                <td>{{ formInsList.modifyDate }}</td>
+              </tr>
+              </tbody>
+            </table>
+          </template>
+        </baseTabPane>
+        <baseTabPane label="列表信息">
+          <template #button>
+            <el-button class="button-sty" @click="addItem0()" icon="el-icon-plus">自定义新增</el-button>
+            <el-button class="button-sty" @click="addItem0(true)" icon="el-icon-plus">表单列新增</el-button>
+          </template>
+          <template #default>
+            <vxe-grid
+              ref="table-m0"
+              :data="formInsList.formInsListField0DTOs"
+              v-bind="vxeOption0"
+              @resizable-change="$vxeTableUtil.onColumnWitchChange"
+              @custom="$vxeTableUtil.customHandle"
+            ></vxe-grid>
+          </template>
+        </baseTabPane>
+        <baseTabPane label="查询信息">
+          <template #button>
+            <el-button class="button-sty" @click="addItem1()" icon="el-icon-plus">自定义新增</el-button>
+            <el-button class="button-sty" @click="addItem1(true)" icon="el-icon-plus">表单列新增</el-button>
+          </template>
+          <template #default>
+            <vxe-grid
+              ref="table-m1"
+              :data="formInsList.formInsListField1DTOs"
+              v-bind="vxeOption1"
+              @resizable-change="$vxeTableUtil.onColumnWitchChange"
+              @custom="$vxeTableUtil.customHandle"
+            ></vxe-grid>
+          </template>
+        </baseTabPane>
+      </baseTabs>
+    </el-form>
+    <formTemplateFieldDialog v-if="showFormTemplateFieldDialog" :visiable.sync="showFormTemplateFieldDialog"
+                             :formCode="formCode"
+                             @confirm="confirmFormTemplateFieldDialog"/>
+  </div>
+</template>
+
+<script>
+import formTypeDialog from "../../../../views/user/form/form_type/dialog";
+import formTemplateFieldDialog from "../../../../views/user/form/form_template_field/dialog";
+
+
+export default {
+  name: 'form_ins_listEdit',
+  props: {
+    formCode: String
+  },
+  components: {
+    formTemplateFieldDialog
+  },
+  data() {
+    return {
+      isEdit: false,
+      tabIndex: 'first',
+      dataId: '',
+      formInsList: {
+        formCode: null,
+        script: null,
+        formInsListField0DTOs: [],
+        formInsListField1DTOs: [],
+        formInsListFieldDTOs: []
+      },
+      showCodeEditor: false,
+      vxeOption0: {},
+      vxeOption1: {},
+      showFormTemplateFieldDialog: false,
+      operateType: 0
+    };
+  },
+  created() {
+    // if (this._dataId) this.dataId = this._dataId;
+  },
+  mounted() {
+    this.getData();
+    this.initTable0();
+    this.initTable1();
+  },
+  methods: {
+    getData() {
+      this.isEdit = true;
+      this.$commonHttp({
+        url: USER_PREFIX + `/form_ins_list/getByFormCode`,
+        method: `post`,
+        data: {
+          stringOne: this.formCode
+        },
+        isLoading: true,
+        modalStrictly: true,
+        success: res => {
+          let formInsList = res.objx || {
+            formCode: this.formCode,
+            script: null
+          };
+          formInsList.formInsListField0DTOs = [];
+          formInsList.formInsListField1DTOs = [];
+          formInsList.formInsListFieldDTOs = [];
+          this.formInsList = formInsList;
+          this.getFields();
+          this.showCodeEditor = true;
+        }
+      });
+    },
+    getFields() {
+      this.$http({
+        url: USER_PREFIX + `/form_ins_list/getFields`,
+        method: `post`,
+        data: {
+          stringOne: this.formCode
+        },
+        isLoading: true,
+        modalStrictly: true,
+        success: res => {
+          let formInsListFieldDTOs = res.objx || [];
+          let formInsListField0DTOs = formInsListFieldDTOs.filter(formInsListFieldDTO => formInsListFieldDTO.fieldType == 0);
+          let formInsListField1DTOs = formInsListFieldDTOs.filter(formInsListFieldDTO => formInsListFieldDTO.fieldType == 1);
+
+          let formInsList = this.formInsList;
+          formInsList.formInsListField0DTOs = formInsListField0DTOs;
+          formInsList.formInsListField1DTOs = formInsListField1DTOs;
+          formInsList.formInsListFieldDTOs = formInsListField0DTOs.concat(formInsListField1DTOs);
+        }
+      });
+    },
+    saveData() {
+      this.$refs.editForm.$baseValidate(valid => {
+        if (valid) {
+          this.$baseConfirm('您确定要保存吗？').then(() => {
+            let formInsList = this.$baseLodash.cloneDeep(this.formInsList);
+            formInsList.formInsListFieldDTOs = formInsList.formInsListField0DTOs.concat(formInsList.formInsListField1DTOs);
+            delete formInsList.formInsListField0DTOs;
+            delete formInsList.formInsListField1DTOs;
+            var url = USER_PREFIX + `/form_ins_list/save`;
+            this.$http({
+              url: url,
+              method: `post`,
+              data: formInsList,
+              isLoading: true,
+              success: res => {
+                this.$message({
+                  message: res.content,
+                  type: 'success',
+                  duration: 500,
+                  onClose: t => {
+                    this.$baseReload();
+                  }
+                });
+              }
+            });
+          });
+        }
+      });
+    },
+    openFormTemplateFieldDialog(fieldType) {
+      this.operateType = fieldType;
+      this.showFormTemplateFieldDialog = true;
+    },
+    confirmFormTemplateFieldDialog(rows) {
+      if (rows.length) {
+        let tableData;
+        let operateType = this.operateType;
+        if (operateType === 0) {
+          tableData = this.formInsList.formInsListField0DTOs;
+        } else if (operateType === 1) {
+          tableData = this.formInsList.formInsListField1DTOs;
+        }
+        let fieldNames = tableData.map(item => item.fieldName);
+        let items = rows.filter(row => !fieldNames.includes(row.fieldName)).map(row => {
+          return {
+            fieldName: row.fieldName,
+            fieldDesc: row.fieldDesc,
+            fieldType: operateType
+          }
+        });
+        tableData.push(...items);
+      }
+    },
+    addItem0(flag) {
+      if (flag === true) {
+        this.operateType = 0;
+        this.showFormTemplateFieldDialog = true;
+      } else {
+        this.formInsList.formInsListField0DTOs.push({
+          formCode: this.formInsList.formCode,
+          fieldType: 0,
+          fieldName: null,
+          fieldDesc: null
+        })
+      }
+    },
+    addItem1(flag) {
+      if (flag === true) {
+        this.operateType = 1;
+        this.showFormTemplateFieldDialog = true;
+      } else {
+        this.formInsList.formInsListField1DTOs.push({
+          formCode: this.formInsList.formCode,
+          fieldType: 1,
+          fieldName: null,
+          fieldDesc: null
+        })
+      }
+    },
+    initTable0() {
+      const tableOption = {
+        vue: this,
+        tableRef: 'table-m0',
+        tableName: 'form-formInsList-edit-m0',
+        columns: [
+          {type: 'checkbox', fixed: 'left', width: 48, resizable: false},
+          {
+            title: '字段描述',
+            field: 'fieldDesc',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.fieldDesc'}
+                                rules={[{required: true, trigger: ['blur', 'change']}]}>
+                    <el-input v-model={row.fieldDesc} clearable/>
+                  </el-form-item>
+                ];
+              }
+            }
+          },
+          {
+            title: '字段名',
+            field: 'fieldName',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.fieldName'}
+                                rules={[{required: true, trigger: ['blur', 'change']}]}>
+                    <el-input v-model={row.fieldName} clearable/>
+                  </el-form-item>
+                ];
+              }
+            }
+          },
+          {
+            title: '排序',
+            field: 'orders',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.orders'}
+                                rules={[{required: false, trigger: ['blur', 'change']}]}>
+                    <base-input-number v-model={row.orders} scale={0} />
+                  </el-form-item>
+                ];
+              }
+            }
+          },
+          {
+            width: 47,
+            fixed: 'right',
+            title: '',
+            sortable: false,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={() => {
+                      this.formInsList.formInsListField0DTOs.splice(rowIndex, 1);
+                    }}
+                  >
+                    <el-tooltip enterable={false} effect="dark" content="删除" placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-delete"/>
+                    </el-tooltip>
+                  </a>
+                ];
+              }
+            }
+          }
+        ]
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption0 = opts;
+      });
+    },
+    initTable1() {
+      const tableOption = {
+        vue: this,
+        tableRef: 'table-m1',
+        tableName: 'form-formInsList-edit-m1',
+        columns: [
+          {type: 'checkbox', fixed: 'left', width: 48, resizable: false},
+          {
+            title: '字段描述',
+            field: 'fieldDesc',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <el-form-item prop={'formInsListField1DTOs.' + rowIndex + '.fieldDesc'}
+                                rules={[{required: true, trigger: ['blur', 'change']}]}>
+                    <el-input v-model={row.fieldDesc} clearable/>
+                  </el-form-item>
+                ];
+              }
+            }
+          },
+          {
+            title: '字段名',
+            field: 'fieldName',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <el-form-item prop={'formInsListField1DTOs.' + rowIndex + '.fieldName'}
+                                rules={[{required: true, trigger: ['blur', 'change']}]}>
+                    <el-input v-model={row.fieldName} clearable/>
+                  </el-form-item>
+                ];
+              }
+            }
+          },
+          {
+            title: '排序',
+            field: 'orders',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.orders'}
+                                rules={[{required: false, trigger: ['blur', 'change']}]}>
+                    <base-input-number v-model={row.orders} scale={0} />
+                  </el-form-item>
+                ];
+              }
+            }
+          },
+          {
+            width: 47,
+            fixed: 'right',
+            title: '',
+            sortable: false,
+            slots: {
+              default: ({row, rowIndex, $table}) => {
+                return [
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={() => {
+                      this.formInsList.formInsListField1DTOs.splice(rowIndex, 1);
+                    }}
+                  >
+                    <el-tooltip enterable={false} effect="dark" content="删除" placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-delete"/>
+                    </el-tooltip>
+                  </a>
+                ];
+              }
+            }
+          }
+        ]
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption1 = opts;
+      });
+    },
+  }
+};
+</script>