@xfu0401/form-generator 1.1.24 → 1.1.25

package/src/components/formGenerator/formComponents/pcComponents/assistComs/formTableExport.vue

@@ -1,323 +0,0 @@
-<template>
-  <div>
-    <div style="margin-bottom:15px;text-align:right">
-      <template v-if="!$attrs.onlyShow">
-        <el-button type="primary" size="small" @click="handleAdd(data.length)">添加</el-button>
-        <el-button type="primary" size="small" @click="handleReset">重置</el-button>
-        <ImportExcel btnText="导入" style="margin:0 10px" @confirm="handleImport" />
-      </template>
-      <ExportExcel btnText="导出" :name="$attrs.__config__.label" :data="exportData" />
-    </div>
-    <el-table
-      class="Fg-table-export"
-      :loading="loading"
-      :data="data"
-      v-bind="$attrs"
-      border
-      :show-summary="showSummary"
-      :summary-method="getSummaries"
-      :style="{height:(height||'auto') + 'px'}"
-      :header-cell-style="{background:$attrs.color}"
-    >
-      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
-      <template v-for="(item, key) in head">
-        <el-table-column v-if="!item.hide" v-bind="item" :key="key">
-          <template slot-scope="scope">
-            <span v-if="$attrs.onlyShow" :style="isNumber(scope.row[item.prop]) ? 'color: blue;' : ''">
-                {{scope.row[item.prop]}}
-            </span>
-            <template v-else>
-              <el-date-picker
-                  v-if="item.render === 'date'"
-                  v-model="scope.row[item.prop]"
-                  type="date"
-                  style="width: 100%;"
-                  format="yyyy-MM-dd"
-                  value-format="yyyy-MM-dd"
-                  clearable
-                  placeholder="选择日期">
-              </el-date-picker>
-              <el-date-picker
-                  v-else-if="item.render === 'datetime'"
-                  v-model="scope.row[item.prop]"
-                  style="width: 100%;"
-                  type="datetime"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  clearable
-                  placeholder="选择日期时间">
-              </el-date-picker>
-              <el-input v-else-if="item.render === 'number'" type="number" v-model="scope.row[item.prop]" maxlength="200" clearable></el-input>
-              <el-input v-else v-model="scope.row[item.prop]" maxlength="200" clearable></el-input>
-            </template>
-          </template>
-        </el-table-column>
-      </template>
-      <el-table-column label="操作" align="center" width="120" v-if="!$attrs.onlyShow">
-        <template slot-scope="scope">
-          <el-button type="text" @click="handleAdd(scope.$index+1)">添加</el-button>
-          <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { deepClone } from "@/components/formGenerator/utils";
-import ImportExcel from "@/components/fileComs/ImportExcel.vue";
-import ExportExcel from "@/components/fileComs/ExportExcel.vue";
-import { MessageBox } from "element-ui";
-
-export default {
-  name: "form-table-export",
-  components: {
-    ImportExcel,
-    ExportExcel,
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    // 表格相关数据
-    dataObj: {
-      type: Object,
-      default: () => [],
-    },
-    height: {
-      type: [String, Number],
-      default: "",
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      data: this.value || []
-    };
-  },
-  watch: {
-    value(newValue, oldValue) {
-      this.data = this.value || [];
-    },
-  },
-  computed: {
-    // 表格头部数据
-    head() {
-      return this.dataObj.head || [];
-    },
-    // 提取表格头部数据的prop形成的对象
-    headObj() {
-      let obj = {};
-      this.head.forEach((item) => {
-        if (item.prop) {
-          obj[item.prop] = "";
-        }
-      });
-      return obj;
-    },
-    showSummary() {
-      return this.head.filter(it => {
-        return it.total
-      }).length > 0
-    },
-    // 将表头和表格数据做处理转换为导出组件可以识别的格式
-    exportData() {
-      const headArr = this.head.map((item) => item.label);
-      const dataArr = this.data.map((cell) => {
-        let cellArr = [];
-        this.head.forEach((item) => {
-          cellArr.push(cell[item.prop]);
-        });
-        return cellArr;
-      });
-      return [headArr, ...dataArr];
-    },
-  },
-  methods: {
-    // 新增
-    handleAdd(index) {
-      this.data.splice(index, 0, deepClone(this.headObj));
-      this.handleEmit();
-    },
-    handleDelete(index) {
-      this.data.splice(index, 1);
-      this.handleEmit();
-    },
-    // 重置
-    handleReset() {
-      MessageBox.confirm("重置后将会清空所有数据，是否继续？", {
-        confirmButtonText: "继续",
-      }).then(() => {
-        this.data = [];
-        this.handleEmit();
-      });
-    },
-    // 导入
-    handleImport(data) {
-      // 使用 flatMap 将嵌套数组扁平化
-      const flatArray = data.flatMap((item) => item);
-      const arr = [];
-      flatArray.forEach((cell) => {
-        let obj = {};
-        this.head.forEach((item) => {
-          if (cell[item.label]) {
-            obj[item.prop] = cell[item.label];
-          }
-        });
-        if (Object.keys(obj).length) arr.push(obj);
-      });
-      this.data = arr.concat(this.data);
-      this.handleEmit();
-    },
-    handleEmit() {
-      this.$emit("input", this.data);
-    },
-    getSummaries(param) {
-      const { columns, data } = param;
-      const sums = [];
-      // 获取合计列
-      const totalColumn = []
-      this.head.forEach(it => {
-        if (it.total) totalColumn.push({ prop: it.prop, money: it.money })
-      })
-      // 横向合计
-      let calculateTotal = 0
-      columns.forEach((column, index) => {
-        if (index === 0) {
-          sums[index] = '合计';
-          return;
-        }
-        const totalFilter = totalColumn.filter(it => {
-          return it.prop === column.property
-        })
-        if (totalFilter.length === 0) {
-          return;
-        }
-        const values = data.map(item => Number(item[column.property]));
-        if (!values.every(value => isNaN(value))) {
-          const newSums = values.reduce((prev, curr) => {
-            const value = Number(curr);
-            if (!isNaN(value)) {
-              return prev + curr;
-            } else {
-              return prev;
-            }
-          }, 0);
-          if (totalFilter[0].money) {
-            const rs = Number(parseFloat(newSums).toFixed(2))
-            calculateTotal += rs
-            sums[index] = '小写：' + rs + '\n大写：' + this.convertCurrencyToChinese(rs);
-          } else {
-            sums[index] = Number(parseFloat(newSums).toFixed(2))
-            calculateTotal += Number(parseFloat(newSums).toFixed(2))
-          }
-        } else {
-          // sums[index] = 'N/A';
-        }
-      });
-      // 特殊要求，指定字段设置值
-      this.$form.setFormData({'jexx': calculateTotal})
-      this.$form.setFormData({'jedx': this.convertCurrencyToChinese(calculateTotal)})
-      return sums;
-    },
-    convertCurrencyToChinese(num) {
-      if (isNaN(num)) return '金额错误';
-
-      const CN_NUM = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
-      const CN_UNIT = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟'];
-      const CN_DECIMAL_UNIT = ['角', '分'];
-
-      let result = '';
-      let isNegative = false;
-
-      // 判断是否为负数
-      if (num < 0) {
-        isNegative = true;
-        num = Math.abs(num);
-      }
-
-      // 分割整数与小数部分
-      let [integerStr, decimalStr] = String(num).split('.');
-      integerStr = integerStr || '0';
-      decimalStr = (decimalStr || '').padEnd(2, '0').slice(0, 2); // 补足两位小数
-      const integerNum = parseInt(integerStr, 10);
-
-      // 添加“负”前缀
-      if (isNegative && integerNum !== 0) {
-        result += '负';
-      }
-
-      // 处理整数部分
-      if (integerNum > 0) {
-        let lastIsZero = false;
-        for (let i = 0; i < integerStr.length; i++) {
-          const digit = integerStr.charAt(i) * 1;
-          const unitPos = integerStr.length - i - 1;
-
-          if (digit !== 0) {
-            if (lastIsZero) result += CN_NUM[0];
-            result += CN_NUM[digit] + CN_UNIT[unitPos];
-            lastIsZero = false;
-          } else {
-            lastIsZero = true;
-          }
-        }
-        result += '元';
-      } else {
-        result += '零元';
-      }
-
-      // 处理小数部分（必须包含角和分）
-      const jiao = decimalStr.charAt(0);
-      const fen = decimalStr.charAt(1);
-
-      let hasDecimal = false;
-
-      if (jiao !== '0') {
-        result += CN_NUM[jiao * 1] + CN_DECIMAL_UNIT[0];
-        hasDecimal = true;
-      } else {
-        result += '零角';
-        hasDecimal = true;
-      }
-
-      if (fen !== '0') {
-        result += CN_NUM[fen * 1] + CN_DECIMAL_UNIT[1];
-      } else {
-        result += '零分';
-      }
-
-      // 如果全部小数都是0，则改为“整”
-      if (jiao === '0' && fen === '0') {
-        result = result.replace('零角零分', '') + '整';
-      }
-
-      return result;
-    },
-    isNumber(value) {
-      // 判断是否为有效数字
-      if (value === null || value === undefined || value === '') {
-        return false
-      }
-      const num = Number(value)
-      return !isNaN(num) && isFinite(num)
-    }
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-table-export {
-  width: 100%;
-  .el-table__body-wrapper {
-    height: calc(100% - 58px);
-    overflow-y: auto;
-  }
-}
-</style>
-<style scoped>
-::v-deep .el-table__footer .cell {
-    white-space: pre-line;
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/assistComs/formTag.vue

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <el-tag
-      v-show="show"
-      :class="`Fg-tag--${$attrs.round?'round':''}`"
-      v-bind="$attrs"
-      :style="newStyle"
-      @close="show=!show"
-    >{{ $attrs.__config__.defaultValue }}</el-tag>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-tag",
-  data() {
-    return {
-      show: true,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-tag--round {
-  border-radius: 999px;
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/assistComs/formText.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="Fg-text" v-bind="$attrs" :style="newStyle">
-    <span>{{ value }}</span>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-text",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-  },
-  computed: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-text {
-  width: 100%;
-  word-break: break-all;
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/assistComs/formTree.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="Fg-tree" :style="newStyle" :loading="loading">
-    <el-tree
-      v-if="!loading"
-      :data="resData"
-      :props="props"
-      v-bind="$attrs"
-      :defaultExpandAll="defaultExpandAll"
-    >
-      <span slot-scope="{ node,data }" :class="data[props.className]">
-        <i v-if="data[props.icon]" :class="data[props.icon]" style="margin-right:5px"></i>
-        <span>{{ node.label }}</span>
-      </span>
-    </el-tree>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-tree",
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  watch: {
-    defaultExpandAll(newValue) {
-      this.loading = true;
-      this.$nextTick(() => {
-        this.loading = false;
-      });
-    },
-  },
-  methods: {},
-  computed: {},
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/formGenerator/formComponents/pcComponents/components/emptyTips.vue

@@ -1,24 +0,0 @@
-<template>
-  <i class="Fg-tips-content">拖动到此处</i>
-</template>
-
-<script>
-export default {
-  name: "EmptyTips"
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-
-.Fg-tips-content {
-  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  color: $gray-7;
-  font-size: 14px;
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/components/esignDialog.vue

@@ -1,86 +0,0 @@
-<template>
-  <!-- 做使用el-dialog做签字的弹框 -->
-  <el-dialog
-    title="签字"
-    :visible.sync="dialogVisible"
-    v-if="dialogVisible"
-    width="800px"
-    append-to-body
-  >
-    <!-- <el-form :inline="true">
-      <el-form-item label="画笔粗细">
-        <el-select v-model="lineWidth" style="width:100px">
-          <el-option v-for="item in lineOpts" :key="item" :label="item" :value="item"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="画笔颜色">
-        <el-color-picker v-model="lineColor" />
-      </el-form-item>
-      <el-form-item label="背景颜色">
-        <el-color-picker v-model="bgColor" />
-      </el-form-item>
-      <el-form-item label="是否剪裁">
-        <el-switch v-model="isCrop" />
-      </el-form-item>
-    </el-form>-->
-    <!-- 使用这个签名组件 -->
-    <vue-esign class="hu-esign" ref="esignRef" :isCrop="isCrop" v-bind="$attrs" />
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
-      <el-button @click="handleReset" type="warning">清空画板</el-button>
-      <el-button @click="dialogVisible = false">取消</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import VueEsign from "vue-esign";
-export default {
-  components: {
-    VueEsign,
-  },
-  data() {
-    return {
-      dialogVisible: false, // 弹框是否开启
-      lineWidth: 4,
-      lineColor: "#000000",
-      bgColor: "",
-      isCrop: false,
-    };
-  },
-  computed: {
-    lineOpts() {
-      return new Array(10).fill(1).map((v, i) => ++i);
-    },
-  },
-  methods: {
-    open() {
-      this.dialogVisible = true;
-    },
-    handleReset() {
-      // 清空画布
-      this.$refs.esignRef.reset();
-    },
-    handleGenerate() {
-      this.$refs.esignRef
-        .generate()
-        .then((res) => {
-          // 得到了签字生成的base64图片
-          this.$message.success("生成成功");
-          this.$emit("update", res);
-          this.dialogVisible = false;
-        })
-        .catch(() => {
-          //  没有签名，点击生成图片时调用
-          this.$message.error("未签名！");
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.hu-esign {
-  border: 1px dashed #c2c1c1;
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/components/filesShow.vue

@@ -1,151 +0,0 @@
-<template>
-  <!-- 附件回显 -->
-  <ul class="an-upload-list-info el-upload-list el-upload-list--text" v-show="value.length">
-    <li class="el-upload-list__item is-success Fg-file-item" v-for="(item, index) in list" :key="item.id">
-      <template v-if="!onlyShow">
-        <span class="el-upload-list__item-name" :class="!onlyShow ? '' : 'noMargin'" style="color: #278df7" @click.stop="openFile(item)">
-          <i class="el-icon-document"></i>
-          {{ item.name }}
-        </span>
-        <i v-if="!onlyShow" class="el-icon-close" style="display: block; font-weight: 600" @click="deleteFile(index, item)"></i>
-      </template>
-      <template v-else>
-        <el-popover
-            v-model="item.visible"
-            placement="top-start"
-            width="200">
-          <p>若浏览器不支持打开，会转为下载文件</p>
-          <div style="text-align: right; margin: 0">
-            <el-button type="success" size="mini" icon="el-icon-view" @click="previewFile(item)">预览</el-button>
-            <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadFile(item)">下载</el-button>
-          </div>
-          <span slot="reference" class="el-upload-list__item-name" :class="'noMargin'" style="color: #278df7">
-          <i class="el-icon-document"></i>
-          {{ item.name }}
-        </span>
-        </el-popover>
-      </template>
-    </li>
-  </ul>
-</template>
-<script>
-import { downloadFile } from "@/api/data";
-export default {
-  props: {
-    value: {
-      type: Array,
-      default: [],
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-    // 	下载的文件字段名
-    dName: {
-      type: String,
-      default: "",
-    },
-    // 文件下载地址
-    download: {
-      type: String,
-      default: "",
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      list: this.value,
-    };
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        if (newValue) {
-          this.list = JSON.parse(JSON.stringify(newValue));
-        }
-      },
-    },
-  },
-  methods: {
-    openFile(item) {
-      if (!item.url) {
-        return;
-      }
-      // 文件下载
-      let formDate = new FormData();
-      formDate.append(this.dName, item.id);
-      formDate.append('filename', item.name);
-      downloadFile(
-        this.download,
-        formDate,
-        () => {},
-        (msg) => {
-          this.$message.error(msg);
-        }
-      );
-    },
-    downloadFile(item) {
-      this.hideOther(item)
-      this.openFile(item)
-    },
-    previewFile(item) {
-      this.hideOther(item)
-      let url = item.url
-      const isOffice = /\.(docx?|xlsx?|pptx?)$/i.test(url)
-      const isPdf = /\.pdf$/i.test(url)
-      const isZip = /\.(zip|rar|txt)$/i.test(url)
-      if (isOffice) {
-        url = 'https://view.officeapps.live.com/op/view.aspx?src=' + url
-        window.open(url, '_blank')
-      } else if(isZip) {
-        this.openFile(item)
-      } else {
-        window.open(url, '_blank')
-      }
-    },
-    hideOther(item) {
-      this.list.forEach(it => {
-        if (it.id !== item.id) {
-          this.$set(it, 'visible', false)
-        }
-      })
-    },
-    // 附件删除
-    deleteFile(i) {
-      if (this.readonly) return;
-      const newFiles = this.value.filter((item, index) => index !== i);
-      this.$emit("update:value", newFiles);
-      this.$emit("change", newFiles);
-    }
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-file-item {
-  color: #409eff;
-  width: 100% !important;
-  position: relative;
-  .el-icon-close {
-    position: absolute;
-    top: 13px;
-    right: 5px;
-    cursor: pointer;
-    opacity: 0.75;
-    color: #606266;
-  }
-}
-.noMargin {
-  margin-right: 0;
-}
-.an-upload-list-info .el-upload-list__item:first-child {
-  margin-top: 0;
-}
-</style>
-