vue2-client 1.8.133 → 1.8.136

package/src/base-client/components/common/XReport/XReportTrGroup.vue

@@ -1,330 +1,357 @@
-<template>
-  <tr>
-    <!--  预览页展示  -->
-    <template v-if="display">
-      <template v-if="!inputColumns">
-        <td
-          v-for="(cell, cellIndex) in columns"
-          v-if="!cell.dontShowRow"
-          :key="cellIndex"
-          :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
-          :style="cell.style ? cell.style : undefined"
-          :colspan="cell.colSpan ? cell.colSpan : undefined">
-          <template v-if="cell.type === 'column'">
-            {{ cell.text }}
-          </template>
-          <template v-else-if="cell.type === 'placeHolderColumn'">
-            <!--       占位             -->
-          </template>
-          <template v-else-if="cell.type === 'value'">
-            {{ cell.value }}
-          </template>
-          <template v-else-if="cell.type === 'input'">
-            {{ configData[cell.dataIndex] }}
-          </template>
-          <template v-else-if="cell.type === 'inputs'">
-            {{ showSubRowValue(cell) }}
-          </template>
-        </td>
-      </template>
-      <template v-else>
-        <td
-          v-for="(cell, cellIndex) in columns"
-          :key="cellIndex"
-          :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
-          :colspan="cell.colSpan ? cell.colSpan : undefined"
-          :style="cell.style ? cell.style : undefined"
-          :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-          <template v-if="cell.type === 'column'">
-            {{ cell.text }}
-          </template>
-          <template v-else-if="cell.type === 'value'">
-            {{ cell.value }}
-          </template>
-          <template v-else-if="cell.type === 'increment'">
-            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
-          </template>
-          <template v-else-if="cell.type === 'input'">
-            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
-          </template>
-          <template v-else-if="cell.type === 'inputs'">
-            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
-          </template>
-        </td>
-      </template>
-    </template>
-    <!--  不是动态行  -->
-    <template v-else-if="!inputColumns">
-      <td
-        v-for="(cell, cellIndex) in columns"
-        :key="cellIndex"
-        :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
-        :colspan="cell.colSpan ? cell.colSpan : undefined"
-        :style="cell.style ? cell.style : undefined"
-        :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-        <template v-if="cell.type === 'column'">
-          {{ cell.text }}
-        </template>
-        <template v-else-if="cell.type === 'placeHolderColumn'">
-          <!--       占位             -->
-        </template>
-        <template v-else-if="cell.type === 'value'">
-          {{ cell.value }}
-        </template>
-        <template v-else-if="cell.type === 'input'">
-          <a-input v-model="configData[cell.dataIndex]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-        </template>
-        <template v-else-if="cell.type === 'inputs'">
-          <div class="inputsDiv">
-            <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(cell.format)" :key="index">
-              <span class="inputsDivItemLabel">{{ displayFormatStartText(cell.format) }}</span>
-              <a-input v-model="configData[cell.dataIndex][index]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-              <span class="inputsDivItemLabel">{{ displayFormatText(cell.format, index) }}</span>
-            </div>
-          </div>
-        </template>
-      </td>
-    </template>
-    <!--  动态行插入按钮  -->
-    <template v-else-if="inputColumnsButton">
-      <td :colspan="maxColSpan" class="tdWithBorder">
-        <a-button-group>
-          <a-button @click="addData(configData[columns[0].dataIndex], columns)"><a-icon type="plus"/></a-button>
-          <a-button @click="removeData(configData[columns[0].dataIndex])"><a-icon type="minus"/></a-button>
-        </a-button-group>
-      </td>
-    </template >
-    <!--  普通行  -->
-    <template v-else>
-      <td
-        v-for="(cell, cellIndex) in columns"
-        :key="cellIndex"
-        :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
-        :colspan="cell.colSpan ? cell.colSpan : undefined"
-        :style="cell.style ? cell.style : undefined"
-        :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-        <template v-if="cell.type === 'column'">
-          {{ cell.text }}
-        </template>
-        <template v-else-if="cell.type === 'value'">
-          {{ cell.value }}
-        </template>
-        <template v-else-if="cell.type === 'increment'">
-          {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
-        </template>
-        <template v-else-if="cell.type === 'input'">
-          <a-input v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-        </template>
-        <template v-else-if="cell.type === 'inputs'">
-          <a-input v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-        </template>
-      </td>
-    </template>
-  </tr>
-</template>
-
-<script>
-
-export default {
-  name: 'XReportTrGroup',
-  props: {
-    // 每一行的配置
-    columns: {
-      type: Array,
-      required: true
-    },
-    config: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    // 原始配置
-    configData: {
-      type: Object,
-      required: true
-    },
-    // 是否为动态行
-    inputColumns: {
-      type: Boolean,
-      default: false
-    },
-    // 是否为动态行按钮
-    inputColumnsButton: {
-      type: Boolean,
-      default: false
-    },
-    // 动态行的Index
-    inputColumnsDefinitionIndex: {
-      type: Number,
-      default: undefined
-    },
-    // 是否为展示行
-    display: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      maxColSpan: 12
-      // tableConfig: {}
-    }
-  },
-  methods: {
-    removeData (dataItem) {
-      if (dataItem.length === 0) {
-        this.$message.warn('已经没有更多了')
-        return
-      }
-      dataItem.pop()
-    },
-    // 添加一行
-    addData (dataItem, row) {
-      // 获取定义
-      const defs = row[0].definition
-
-      // 获取外层对象名
-      const dataName = row[0].dataIndex
-      const temp = {}
-
-      defs.forEach(def => {
-        // 找到数组中最后一个数据的值
-        let lastDataNo = 0
-        if (this.configData[dataName][this.configData[dataName].length - 1]) {
-          lastDataNo = this.configData[dataName][this.configData[dataName].length - 1][def.dataIndex]
-        }
-
-        // 如果没有值，检查是否声明了初始值
-        if (lastDataNo === 0 && def.initialValue) {
-          lastDataNo = def.initialValue
-        }
-
-        // 检查是否有步长
-        let step = 1
-        if (def.step) {
-          step = def.step
-        }
-
-        // 如果单元格类型为increment，则进行自增
-        if (def.type === 'increment') {
-          temp[def.dataIndex] = lastDataNo + step
-        }
-      })
-      dataItem.push(temp)
-    },
-    // 根据format计算需要多少个输入框
-    calcFormatInputNum (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          count++
-        }
-      }
-      return count
-    },
-    // 根据format计算输入框之后的文字显示
-    displayFormatText (formatStr, num) {
-      let start = 0
-      let count = 0
-      num++
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '}') {
-          start = i
-          count++
-        }
-        if (count === num) {
-          for (let j = start + 1; j < formatStr.length; j++) {
-            if (formatStr[j] === '{') {
-              return formatStr.slice(start + 1, j)
-            }
-            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
-              return formatStr[j]
-            }
-          }
-        }
-      }
-    },
-    // 根据format计算输入框之前的文字显示
-    displayFormatStartText (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          break
-        } else {
-          count++
-        }
-      }
-      return formatStr.slice(0, count)
-    },
-    // 拼接被自动拆分的单元格内容
-    showSubRowValue (cell) {
-      const dataName = cell.dataIndex
-      const formatArr = []
-      const dataArr = []
-
-      // 从config中取出所有数据，根据dataIndex的开头内容进行拼接
-      this.config.columns.forEach(row => row.forEach(cell => {
-        if (cell.dataIndex && cell.dataIndex.startsWith(dataName)) {
-          formatArr.push(cell.format)
-          dataArr.push(this.configData[cell.dataIndex])
-        }
-      }))
-
-      const text = []
-      const data = []
-
-      formatArr.forEach(word => {
-        const temp = word.split('{}')
-        temp.forEach(char => {
-          if (char !== '') {
-            text.push(char)
-          }
-        })
-      })
-
-      dataArr.forEach(item => {
-        item.forEach(num => {
-          data.push(num)
-        })
-      })
-
-      let result = ''
-      for (let i = 0; i < data.length; i++) {
-        result += data[i]
-        result += text[i]
-      }
-
-      return result
-    },
-  },
-}
-
-</script>
-
-<style scoped lang="less">
-.inputsDiv {
-  display: flex;
-  justify-content: space-between;
-  .inputsDivItem {
-    display: flex;
-    align-items: center;
-    padding: 0 4px;
-    white-space: nowrap;
-    .inputsDivItemLabel {
-      padding: 0 4px;
-    }
-  }
-}
-
-.tdNoBorder {
-  border-left: 1px solid #000;
-  border-right: 1px solid #000;
-  padding: 8px;
-}
-
-.tdWithBorder {
-  border: 1px solid #000;
-  padding: 8px;
-}
-</style>
+<template>
+  <tr>
+    <!--  预览页展示  -->
+    <template v-if="display">
+      <template v-if="!inputColumns">
+        <td
+          v-for="(cell, cellIndex) in columns"
+          v-if="!cell.dontShowRow"
+          :key="cellIndex"
+          :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+          :style="cell.style ? cell.style : undefined"
+          :colspan="cell.colSpan ? cell.colSpan : undefined">
+          <template v-if="cell.type === 'column'">
+            {{ cell.text }}
+          </template>
+          <template v-else-if="cell.type === 'placeHolderColumn'">
+            <!--       占位             -->
+          </template>
+          <template v-else-if="cell.type === 'value'">
+            {{ cell.value }}
+          </template>
+          <template v-else-if="cell.type === 'input'">
+            {{ configData[cell.dataIndex] }}
+          </template>
+          <template v-else-if="cell.type === 'inputs'">
+            {{ showSubRowValue(cell) }}
+          </template>
+          <template v-else-if="cell.type === 'images'">
+            <template v-for="(img,imgIndex) in configData.images[cell.dataIndex]">
+              <span :key="imgIndex" style="margin-right: 5%">{{img.name}}</span>
+            </template>
+          </template>
+        </td>
+      </template>
+      <template v-else>
+        <td
+          v-for="(cell, cellIndex) in columns"
+          :key="cellIndex"
+          :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+          :colspan="cell.colSpan ? cell.colSpan : undefined"
+          :style="cell.style ? cell.style : undefined"
+          :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
+          <template v-if="cell.type === 'column'">
+            {{ cell.text }}
+          </template>
+          <template v-else-if="cell.type === 'value'">
+            {{ cell.value }}
+          </template>
+          <template v-else-if="cell.type === 'increment'">
+            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
+          </template>
+          <template v-else-if="cell.type === 'input'">
+            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
+          </template>
+          <template v-else-if="cell.type === 'inputs'">
+            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
+          </template>
+        </td>
+      </template>
+    </template>
+    <!--  不是动态行  -->
+    <template v-else-if="!inputColumns">
+      <td
+        v-for="(cell, cellIndex) in columns"
+        :key="cellIndex"
+        :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+        :colspan="cell.colSpan ? cell.colSpan : undefined"
+        :style="cell.style ? cell.style : undefined"
+        :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
+        <template v-if="cell.type === 'column'">
+          {{ cell.text }}
+        </template>
+        <template v-else-if="cell.type === 'placeHolderColumn'">
+          <!--       占位             -->
+        </template>
+        <template v-else-if="cell.type === 'value'">
+          {{ cell.value }}
+        </template>
+        <template v-else-if="cell.type === 'input'">
+          <a-input v-model="configData[cell.dataIndex]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
+        </template>
+        <template v-else-if="cell.type === 'inputs'">
+          <div class="inputsDiv">
+            <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(cell.format)" :key="index">
+              <span class="inputsDivItemLabel">{{ displayFormatStartText(cell.format) }}</span>
+              <a-input v-model="configData[cell.dataIndex][index]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
+              <span class="inputsDivItemLabel">{{ displayFormatText(cell.format, index) }}</span>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="cell.type === 'images'">
+          <div style="display: flex">
+            <upload
+              :model="{type: 'image', accept: ['*'], resUploadStock: 1, pathKey: 'cs'}"
+              service-name="af-system"
+              :images="configData.images[cell.dataIndex]"
+              :outer-container-index="cell.dataIndex"
+              @setFiles="setImages"
+              :upload-style="'simple'"
+            />
+          </div>
+        </template>
+      </td>
+    </template>
+    <!--  动态行插入按钮  -->
+    <template v-else-if="inputColumnsButton">
+      <td :colspan="maxColSpan" class="tdWithBorder">
+        <a-button-group>
+          <a-button @click="addData(configData[columns[0].dataIndex], columns)"><a-icon type="plus"/></a-button>
+          <a-button @click="removeData(configData[columns[0].dataIndex])"><a-icon type="minus"/></a-button>
+        </a-button-group>
+      </td>
+    </template >
+    <!--  其他行  -->
+    <template v-else>
+      <td
+        v-for="(cell, cellIndex) in columns"
+        :key="cellIndex"
+        :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+        :colspan="cell.colSpan ? cell.colSpan : undefined"
+        :style="cell.style ? cell.style : undefined"
+        :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
+        <template v-if="cell.type === 'column'">
+          {{ cell.text }}
+        </template>
+        <template v-else-if="cell.type === 'value'">
+          {{ cell.value }}
+        </template>
+        <template v-else-if="cell.type === 'increment'">
+          {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
+        </template>
+        <template v-else-if="cell.type === 'input'">
+          <a-input v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
+        </template>
+        <template v-else-if="cell.type === 'inputs'">
+          <a-input v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]" :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
+        </template>
+      </td>
+    </template>
+  </tr>
+</template>
+
+<script>
+import Upload from '@vue2-client/base-client/components/common/Upload'
+
+export default {
+  name: 'XReportTrGroup',
+  components: {
+    Upload
+  },
+  props: {
+    // 每一行的配置
+    columns: {
+      type: Array,
+      required: true
+    },
+    config: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 原始配置
+    configData: {
+      type: Object,
+      required: true
+    },
+    // 是否为动态行
+    inputColumns: {
+      type: Boolean,
+      default: false
+    },
+    // 是否为动态行按钮
+    inputColumnsButton: {
+      type: Boolean,
+      default: false
+    },
+    // 动态行的Index
+    inputColumnsDefinitionIndex: {
+      type: Number,
+      default: undefined
+    },
+    // 是否为展示行
+    display: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      maxColSpan: 12
+      // tableConfig: {}
+    }
+  },
+  methods: {
+    setImages (imageIds, dataIndex) {
+      console.warn('接收', imageIds)
+      this.configData.images[dataIndex] = imageIds
+    },
+    removeData (dataItem) {
+      if (dataItem.length === 0) {
+        this.$message.warn('已经没有更多了')
+        return
+      }
+      dataItem.pop()
+    },
+    // 添加一行
+    addData (dataItem, row) {
+      // 获取定义
+      const defs = row[0].definition
+
+      // 获取外层对象名
+      const dataName = row[0].dataIndex
+      const temp = {}
+
+      defs.forEach(def => {
+        // 找到数组中最后一个数据的值
+        let lastDataNo = 0
+        if (this.configData[dataName][this.configData[dataName].length - 1]) {
+          lastDataNo = this.configData[dataName][this.configData[dataName].length - 1][def.dataIndex]
+        }
+
+        // 如果没有值，检查是否声明了初始值
+        if (lastDataNo === 0 && def.initialValue) {
+          lastDataNo = def.initialValue
+        }
+
+        // 检查是否有步长
+        let step = 1
+        if (def.step) {
+          step = def.step
+        }
+
+        // 如果单元格类型为increment，则进行自增
+        if (def.type === 'increment') {
+          temp[def.dataIndex] = lastDataNo + step
+        }
+      })
+      dataItem.push(temp)
+    },
+    // 根据format计算需要多少个输入框
+    calcFormatInputNum (formatStr) {
+      let count = 0
+      for (let i = 0; i < formatStr.length; i++) {
+        if (formatStr[i] === '{') {
+          count++
+        }
+      }
+      return count
+    },
+    // 根据format计算输入框之后的文字显示
+    displayFormatText (formatStr, num) {
+      let start = 0
+      let count = 0
+      num++
+      for (let i = 0; i < formatStr.length; i++) {
+        if (formatStr[i] === '}') {
+          start = i
+          count++
+        }
+        if (count === num) {
+          for (let j = start + 1; j < formatStr.length; j++) {
+            if (formatStr[j] === '{') {
+              return formatStr.slice(start + 1, j)
+            }
+            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
+              return formatStr[j]
+            }
+          }
+        }
+      }
+    },
+    // 根据format计算输入框之前的文字显示
+    displayFormatStartText (formatStr) {
+      let count = 0
+      for (let i = 0; i < formatStr.length; i++) {
+        if (formatStr[i] === '{') {
+          break
+        } else {
+          count++
+        }
+      }
+      return formatStr.slice(0, count)
+    },
+    // 拼接被自动拆分的单元格内容
+    showSubRowValue (cell) {
+      const dataName = cell.dataIndex
+      const formatArr = []
+      const dataArr = []
+
+      // 从config中取出所有数据，根据dataIndex的开头内容进行拼接
+      this.config.columns.forEach(row => row.forEach(cell => {
+        if (cell.dataIndex && cell.dataIndex.startsWith(dataName)) {
+          formatArr.push(cell.format)
+          dataArr.push(this.configData[cell.dataIndex])
+        }
+      }))
+
+      const text = []
+      const data = []
+
+      formatArr.forEach(word => {
+        const temp = word.split('{}')
+        temp.forEach(char => {
+          if (char !== '') {
+            text.push(char)
+          }
+        })
+      })
+
+      dataArr.forEach(item => {
+        item.forEach(num => {
+          data.push(num)
+        })
+      })
+
+      let result = ''
+      for (let i = 0; i < data.length; i++) {
+        result += data[i]
+        result += text[i]
+      }
+
+      return result
+    },
+  },
+  beforeMount () {
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+.inputsDiv {
+  display: flex;
+  justify-content: space-between;
+  .inputsDivItem {
+    display: flex;
+    align-items: center;
+    padding: 0 4px;
+    white-space: nowrap;
+    .inputsDivItemLabel {
+      padding: 0 4px;
+    }
+  }
+}
+
+.tdNoBorder {
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  padding: 8px;
+}
+
+.tdWithBorder {
+  border: 1px solid #000;
+  padding: 8px;
+}
+</style>