Jelajahi Sumber

合同材料

ZaiZai 10 bulan lalu
induk
melakukan
45e19af4ce

+ 1 - 1
package.json

@@ -21,7 +21,7 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.5.0",
         "element-plus": "2.7.0",
-        "hc-vue3-ui": "^3.8.6",
+        "hc-vue3-ui": "^3.8.8",
         "js-base64": "^3.7.7",
         "js-fast-way": "^0.4.9",
         "js-md5": "^0.8.3",

+ 11 - 0
src/styles/app/element.scss

@@ -208,3 +208,14 @@
     color: #a9abb2;
     cursor: not-allowed;
 }
+
+//树只显示子级的复选框
+.el-tree.hc-tree-node.tree-data-check .el-tree-node__content,
+.el-tree.hc-tree-node-v2.tree-data-check .el-tree-node__content {
+    .is-leaf + .el-checkbox {
+        display: inline-flex;
+    }
+    .el-checkbox {
+        display: none;
+    }
+}

+ 0 - 1
src/styles/app/tree.scss

@@ -186,5 +186,4 @@
             }
         }
     }
-
 }

+ 158 - 9
src/views/debit-pay/material/adjustment.vue

@@ -1,14 +1,56 @@
 <template>
-    <hc-card>
+    <hc-card class="hc-debit-pay-material-adjustment">
         <template #header>
             <div class="w-40">
-                <el-input v-model="searchForm.encoding" placeholder="材料编码" />
+                <el-input v-model="searchForm.key1" placeholder="材料编码" />
             </div>
             <div class="ml-3 w-60">
-                <hc-search-input v-model="searchForm.name" placeholder="请输入材料名称" @search="searchClick" />
+                <hc-search-input v-model="searchForm.key2" placeholder="请输入材料名称" @search="getTableData" />
             </div>
         </template>
-        调差系数
+        <hc-body :split="rowBindingShow" padding="0">
+            <hc-card-item>
+                <hc-table :column="tableColumn" :datas="tableData" :is-index="false" :loading="tableLoading">
+                    <template #action="{ row }">
+                        <template v-if="row.rowBindingData">
+                            <el-link type="success" @click="confirmBinding(row)">确认绑定</el-link>
+                            <el-link type="danger" @click="cancelBinding(row)">取消绑定</el-link>
+                        </template>
+                        <template v-else>
+                            <el-link type="warning" @click="rowBinding(row)">绑定清单</el-link>
+                            <el-link type="primary" @click="rowEditClick(row)">编辑</el-link>
+                        </template>
+                    </template>
+                </hc-table>
+            </hc-card-item>
+            <template #right>
+                <hc-card-item scrollbar>
+                    <hc-data-tree ui="tree-data-check" tree-key="id" :h-props="treeProps" :datas="treeLoadNode" show-checkbox check-strictly @check="treeNodeCheck">
+                        <template #default="{ node, data }">
+                            <div class="level">{{ data.label }}</div>
+                            <div v-if="node.isLeaf" class="submit-input w-100px">
+                                <el-input v-model="data.param" size="small" placeholder="请输入调差参数" />
+                            </div>
+                        </template>
+                    </hc-data-tree>
+                </hc-card-item>
+            </template>
+        </hc-body>
+        <!-- 调差系数编辑 -->
+        <hc-new-dialog :show="isFormModal" title="调差系数编辑" is-footer-center is-table widths="50rem" @close="modalClose">
+            <hc-table :column="tableColumn1" :datas="tableData2" :is-index="false">
+                <template #key4="{ row }">
+                    <hc-table-input v-model="row.key4" />
+                </template>
+                <template #action="{ row }">
+                    <el-link type="danger" @click="dischargeBinding(row)">解除绑定关系</el-link>
+                </template>
+            </hc-table>
+            <template #footer>
+                <el-button hc-btn @click="modalClose">取消</el-button>
+                <el-button :loading="saveLoaing" hc-btn type="primary" @click="modalSave">提交</el-button>
+            </template>
+        </hc-new-dialog>
     </hc-card>
 </template>
 
@@ -17,16 +59,123 @@ import { onActivated, ref } from 'vue'
 
 //渲染完成
 onActivated(() => {
-
+    getTableData()
 })
 
 //搜索表单
-const searchForm = ref({ current: 1, size: 20, total: 0 })
-const searchClick = () => {
+const searchForm = ref({ key1: '', key2: '' })
+
+//表格
+const tableColumn = [
+    { key: 'materialNumber', name: '材料编码' },
+    { key: 'materialName', name: '材料名称' },
+    { key: 'unit', name: '材料单位' },
+    { key: 'action', name: '操作', width: 140, align: 'center' },
+]
+const tableData = ref([
+    {},
+])
+
+//获取表格数据
+const tableLoading = ref(false)
+const getTableData = async () => {
 
 }
-</script>
 
-<style scoped lang="scss">
+//调差树
+const treeProps = { label: 'label', children: 'children' }
+const treeLoadNode = ref([
+    {
+        id: 1,
+        label: 'Level one 1',
+        children: [
+            {
+                id: 2,
+                label: 'Level two',
+                children: [
+                    {
+                        id: 3,
+                        label: 'Level three',
+                    },
+                ],
+            },
+        ],
+    },
+])
+
+//节点被选择
+const treeNodeCheck = (_, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {
+    console.log(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys)
+}
+
+//绑定清单
+const rowBindingShow = ref(false)
+const rowBinding = (row) => {
+    if (rowBindingShow.value) {
+        window.$message.error('请先操作完上一个清单')
+        return
+    }
+    rowBindingShow.value = true
+    row.rowBindingData = true
+}
+
+//确认绑定
+const confirmBinding = async (row) => {
+    rowBindingShow.value = false
+    row.rowBindingData = false
+}
+
+//取消绑定
+const cancelBinding = (row) => {
+    rowBindingShow.value = false
+    row.rowBindingData = false
+}
 
+const tableColumn1 = [
+    { key: 'key1', name: '清单名称' },
+    { key: 'key2', name: '清单编号' },
+    { key: 'key3', name: '绑定材料名称' },
+    { key: 'key4', name: '调差系数' },
+    { key: 'action', name: '操作', width: 140, align: 'center' },
+]
+const tableData2 = ref([
+    {},
+])
+
+//解除绑定关系
+const dischargeBinding = (row) => {
+    console.log(row)
+}
+
+//编辑
+const isFormModal = ref(false)
+const rowEditClick = (row) => {
+    isFormModal.value = true
+}
+
+//提交保存
+const saveLoaing = ref(false)
+const modalSave = async () => {
+    modalClose()
+}
+
+//取消关闭
+const modalClose = () => {
+    isFormModal.value = false
+}
+</script>
+
+<style lang="scss">
+.hc-debit-pay-material-adjustment .el-tree.tree-data-check .data-custom-tree-node {
+    .level {
+        flex: 1;
+    }
+    .submit-input {
+        margin-left: 10px;
+        margin-right: 2px;
+    }
+    .el-input .el-input__wrapper {
+        background-color: white;
+    }
+}
 </style>

+ 4 - 4
yarn.lock

@@ -2023,10 +2023,10 @@ has-flag@^4.0.0:
   resolved "http://39.108.216.210:9000/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-hc-vue3-ui@^3.8.6:
-  version "3.8.6"
-  resolved "http://39.108.216.210:9000/hc-vue3-ui/-/hc-vue3-ui-3.8.6.tgz#aeb75c3740e2b5f8c5caf173bf52051b23baa0e6"
-  integrity sha512-9PpzbjFjQkLKa3t+A5j44TE6Mu/Afb/Y7C+ti9ozS4K0FAOeGNBebo+NB8VSb94KP2qQA7vbTHfOh6MI4eDQzg==
+hc-vue3-ui@^3.8.8:
+  version "3.8.8"
+  resolved "http://39.108.216.210:9000/hc-vue3-ui/-/hc-vue3-ui-3.8.8.tgz#8e4555a8ef6a69bddb01adb19d83007b94f59693"
+  integrity sha512-3NZ77xC8LY2Ze2lsqI1ZZI+7VKSLsKpBs/5Yd2sdTNpUP0LRL0yPp5BGt80TJsnK0d31yyHQ6+TmFG1sCrXEwA==
   dependencies:
     axios "^1.6.8"
     dayjs "^1.11.10"