提交

package.json

@@ -37,10 +37,12 @@
     "sortablejs": "^1.15.2",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vxe-table": "^4.7.59"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "@vue/compiler-sfc": "3.2.45",
     "sass": "1.56.1",
     "unplugin-auto-import": "0.11.4",

src/main.js

@@ -5,6 +5,11 @@ import Cookies from 'js-cookie'
 import ElementPlus from 'element-plus'
 import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 
+import VxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+
 import moment from 'moment'
 moment.locale('zh-cn')
 
@@ -82,6 +87,8 @@ app.use(router)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
+app.use(VxeTable)
+app.use(VxeUI)
 app.component('svg-icon', SvgIcon)
 
 directive(app)

src/views/business/outsourceBalanceAccounts/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="page-container column-container">
+    <!-- 功能按钮区 -->
+    <div class="list-btns-container">
+      <el-button type="success" icon="Plus" @click="handleBalance" v-hasPermi="['business:firstOutsource:add']">
+        结算
+      </el-button>
+      <el-button type="primary" icon="Plus" @click="handleCheckAll" v-hasPermi="['business:firstOutsource:add']">
+        全选
+      </el-button>
+      <el-button type="info" icon="Plus" @click="handleDisbalance" v-hasPermi="['business:firstOutsource:add']">
+        取消结算
+      </el-button>
+      <el-button type="warning" icon="Plus" @click="handleExport" v-hasPermi="['business:firstOutsource:add']">
+        导出
+      </el-button>
+    </div>
+    <!-- 渲染数据区 -->
+    <div class="el-table-container" style="flex-basis: 1;">
+      <div class="el-table-inner-container">
+        <vxe-table ref="tableRef" border height="100%" :row-config="{ isHover: true }" :data="tableData"
+          :checkbox-config="{ highlight: true }" :scroll-y="{ enabled: true }" show-overflow keep-source
+          :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" @checkbox-change="handleSelectChange">
+          <vxe-column type="checkbox" width="50" align="center"></vxe-column>
+          <vxe-column field="supplierName" title="外协商简称" align="center">
+          </vxe-column>
+          <vxe-column field="productDescription" title="产品描述" align="center">
+          </vxe-column>
+          <vxe-column field="processAlias" title="工序名称" align="center">
+          </vxe-column>
+          <vxe-column field="status" title="状态" align="center">
+          </vxe-column>
+          <vxe-column field="processPrice" title="工序单价" align="center" :edit-render="{}">
+            <template #edit="scope">
+              <el-input-number v-model="scope.row.processPrice" :control="false" :min="0" :precision="4" />
+            </template>
+          </vxe-column>
+          <vxe-column field="otherCut" title="其他扣款" align="center" :edit-render="{}">
+            <template #edit="scope">
+              <el-input-number v-model="scope.row.otherCut" :control="false" :min="0" :precision="4" />
+            </template>
+          </vxe-column>
+          <vxe-column field="differrence" title="补差额" align="center" :edit-render="{}">
+            <template #edit="scope">
+              <el-input-number v-model="scope.row.differrence" :control="false" :min="0" :precision="4" />
+            </template>
+          </vxe-column>
+          <vxe-column field="prodNum" title="投入数量" align="center">
+          </vxe-column>
+          <vxe-column field="outsourceNum" title="发出数量" align="center">
+          </vxe-column>
+          <vxe-column field="receiptNum" title="收回数量" align="center">
+          </vxe-column>
+          <vxe-column field="actuallyInput" title="实投料量" align="center">
+          </vxe-column>
+          <vxe-column field="prodNum" title="料损数量" align="center">
+          </vxe-column>
+          <vxe-column field="prodNum" title="扣料金额" align="center">
+          </vxe-column>
+        </vxe-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import region from '@/utils/region.js'
+const tableData = ref([])
+const tableRef = ref(null)
+const handleAdd = () => {
+  tableData.value.push(...region.map(e => ({ ...e })))
+}
+
+const changeCellEvent = (params) => {
+  const $table = tableRef.value
+  if ($table) {
+    $table.updateStatus(params)
+  }
+  console.log(tableData.value)
+}
+
+
+const handleBalance = () => {
+}
+
+const handleDisbalance = () => {
+}
+
+const handleCheckAll = () => {
+  const $table = tableRef.value
+  if ($table) {
+    $table.setAllCheckboxRow(true)
+  }
+}
+
+const handleExport = () => {
+  const $table = tableRef.value
+  if ($table) {
+    $table.exportData({
+      type: 'csv',
+      filename: 'table-export'
+    })
+  }
+}
+
+const handleSelectChange = (params) => {
+  console.log(params)
+}
+</script>

vite.config.js

@@ -65,6 +65,11 @@ export default defineConfig(({ mode, command }) => {
           }
         ]
       }
+    },
+    esbuild: {
+      jsxFactory: 'h',
+      jsxFragment: 'Fragment',
+      // jsxInject: `import { h } from 'vue';`,
     }
   }
 })