中间收方新增、添加分解清单、收方单任务下达、文件上传组件

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20230915172006"
+  "value": "20230915183252"
 }

src/components/choice-user/choice-user.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="hc-choice-user">
+        <!-- 表单回显 -->
+        <div class="choice-user-box hc-flex w-full cursor-pointer bg-white">
+            <div class="tag-user-list" @click="showModalClick">
+                <template v-for="(item, index) in UserDataList" :key="index">
+                    <el-tag>{{ item.name }}</el-tag>
+                </template>
+                <div v-if="UserDataList.length <= 0">点击这里选择用户</div>
+            </div>
+        </div>
+        <!-- 选择用户的弹窗 -->
+        <hc-dialog ui="hc-choice-user-dialog" bg-color="#fff" is-to-body is-table is-footer-center widths="62rem" :show="userModalShow" title="选择用户" @save="userModalSave" @close="userModalClose">
+            <div class="relative h-full flex">
+                <div class="relative h-full flex-1 p-2" hc-border-r="1px solid #eee">
+                    <el-scrollbar>
+                        <hc-data-tree :h-props="treeProps" :datas="treeLoadNode" />
+                    </el-scrollbar>
+                </div>
+                <div class="relative h-full h-full flex flex-[2] flex-col">
+                    <div class="relative flex flex-1 flex-col">
+                        <div class="hc-flex bg-gray-2 p-2 text-black">可选择的用户</div>
+                        <div class="user-list relative flex-1 p-2">
+                            <el-scrollbar>
+                                <el-checkbox-group v-model="checkboxUserList">
+                                    <template v-for="item in signUserList" :key="item.id">
+                                        <div class="user-item checkbox-li">
+                                            <el-checkbox :label="`${item.name}-${item.id}`">
+                                                <div class="item-user-name">{{ item.name }}</div>
+                                            </el-checkbox>
+                                        </div>
+                                    </template>
+                                </el-checkbox-group>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                    <div class="relative flex flex-col">
+                        <div class="hc-flex bg-gray-2 p-2 text-black">已选择({{ checkboxUserList.length }})</div>
+                        <div class="user-list h-24">
+                            <el-scrollbar>
+                                <template v-for="(item, index) in checkboxUserList" :key="index">
+                                    <el-tag closable @close="delCheckboxUser(index)">
+                                        {{ item.name }}
+                                    </el-tag>
+                                </template>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </hc-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({
+    name: 'HcChoiceUser',
+})
+
+const UserDataList = ref([])
+
+//选择用户
+const userModalShow = ref(false)
+const showModalClick = () => {
+    userModalShow.value = true
+}
+
+//数据格式
+const treeProps = {
+    label: 'label',
+    children: 'children',
+}
+//数据
+const treeLoadNode = ref([
+    {
+        label: 'Level one 1',
+        children: [
+            {
+                label: 'Level two 1-1',
+                children: [
+                    { label: 'Level three 1-1-1' },
+                ],
+            },
+            {
+                label: 'Level two 2-1',
+                children: [
+                    { label: 'Level three 2-1-1' },
+                ],
+            },
+            {
+                label: 'Level two 2-2',
+                children: [
+                    { label: 'Level three 2-2-1' },
+                ],
+            },
+            {
+                label: 'Level two 3-1',
+                children: [
+                    { label: 'Level three 3-1-1' },
+                ],
+            },
+            {
+                label: 'Level two 3-2',
+                children: [
+                    { label: 'Level three 3-2-1' },
+                ],
+            },
+        ],
+    },
+])
+
+//选择用户
+const checkboxUserList = ref([])
+const signUserList = ref([
+    { id: 1, name: '名称1' },
+    { id: 2, name: '名称2' },
+    { id: 3, name: '名称3' },
+])
+const delCheckboxUser = (index) => {
+
+}
+
+const userModalSave = () => {
+    userModalClose()
+}
+const userModalClose = () => {
+    userModalShow.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.hc-choice-user {
+    position: relative;
+    width: 100%;
+    --cubic-bezier: cubic-bezier(.645,.045,.355,1);
+    .choice-user-box {
+        border-radius: 4px;
+        color: #606266;
+        font-size: 14px;
+        min-height: 40px;
+        padding: 0 12px;
+        border: 1px dashed #dddfe6;
+        transition: border .2s var(--cubic-bezier);
+        .tag-user-list {
+            position: relative;
+        }
+    }
+}
+</style>
+
+<style lang="scss">
+.el-dialog.hc-choice-user-dialog {
+    .el-dialog__body {
+        padding: 0 !important;
+    }
+    .el-tree.hc-tree-node-v2 .data-custom-tree-node .label,
+    .hc-tree-node .data-custom-tree-node .label {
+        font-size: 15px;
+    }
+    .el-tree.hc-tree-node-v2 .data-custom-tree-node .label.level-name,
+    .hc-tree-node .data-custom-tree-node .label.level-name {
+        font-size: 15px;
+        font-weight: initial;
+    }
+
+    .hc-tasks-user .tasks-user-box .tag-user-list {
+        .el-tag {
+            --el-icon-size: 14px;
+            padding: 0 10px;
+            height: 26px;
+            margin: 4px 0;
+        }
+    }
+    .user-list {
+        .el-tag {
+            margin-right: 10px;
+            margin-top: 12px;
+        }
+        .user-item {
+            position: relative;
+            padding: 4px 0;
+        }
+        .user-item + .user-item {
+            border-top: 1px dashed #EEEEEE;
+        }
+        .checkbox-li .el-checkbox {
+            width: 100%;
+            .el-checkbox__input {
+                position: absolute;
+                right: 0;
+                .el-checkbox__inner {
+                    width: 18px;
+                    height: 18px;
+                    &:after {
+                        height: 9px;
+                        left: 6px;
+                        top: 2px;
+                    }
+                }
+            }
+            .el-checkbox__label {
+                flex: 1;
+                padding-left: 0;
+                padding-right: 20px;
+            }
+        }
+    }
+}
+</style>

src/global/components/index.js → src/components/index.js

@@ -1,8 +1,10 @@
 import HcTooltip from './hc-tooltip/index.vue'
 import HcTipItem from './hc-tooltip/item.vue'
+import HcChoiceUser from './choice-user/choice-user.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
     App.component('HcTooltip', HcTooltip)
     App.component('HcTipItem', HcTipItem)
+    App.component('HcChoiceUser', HcChoiceUser)
 }

src/global/index.js

@@ -1 +0,0 @@
-export * from './components/index'

src/main.js

@@ -16,7 +16,7 @@ import 'hc-vue3-ui/dist/index.css'
 import 'hc-vue3-ui/style/index.scss'
 
 //挂载全局
-import { setupComponents } from './global/index'
+import { setupComponents } from './components/index'
 
 //导入其它样式
 import './styles/app/main.scss'

src/styles/app/element.scss

@@ -15,3 +15,22 @@
 .el-button + .el-button {
     margin-left: 14px;
 }
+.el-overlay-dialog .el-dialog {
+    --el-dialog-padding-primary: 16px;
+    .el-dialog__headerbtn {
+        top: 1px;
+    }
+    .el-dialog__body {
+        height: calc(100% - 130px);
+        padding: 10px;
+    }
+    .el-dialog__footer .dialog-footer .el-button[hc-btn] {
+        height: 40px;
+        padding: 8px 20px;
+    }
+}
+.el-table[hc] .el-table__body-wrapper .el-table__row .el-table__cell {
+    .el-button + .el-button {
+        margin-left: 8px;
+    }
+}

src/views/debit-pay/admin/apply.vue

@@ -8,8 +8,8 @@
             </div>
         </template>
         <template #extra>
-            <el-button hc-btn type="primary">
-                <HcIcon name="send-plane-2" />
+            <el-button hc-btn type="primary" @click="addModalClick">
+                <HcIcon name="add" />
                 <span>新增</span>
             </el-button>
             <el-button hc-btn type="primary">
@@ -17,40 +17,181 @@
                 <span>上报</span>
             </el-button>
             <el-button hc-btn>
-                <HcIcon name="delete-bin-3" />
+                <HcIcon name="sort-desc" :line="false" />
                 <span>按部位排序</span>
             </el-button>
             <el-button hc-btn>
-                <HcIcon name="printer" />
+                <HcIcon name="sort-desc" :line="false" />
                 <span>按录入时间排序</span>
             </el-button>
             <el-button hc-btn>
-                <HcIcon name="printer" />
+                <HcIcon name="file-list" />
                 <span>清单明细</span>
             </el-button>
         </template>
         <div class="relative h-full flex">
-            <div id="hc_tree_card" class="w-60">
-                <hc-card-item>树卡片</hc-card-item>
+            <div id="hc_tree_card">
+                <hc-card-item scrollbar>
+                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
+                </hc-card-item>
             </div>
             <div id="hc_table_card" class="flex-1">
                 <hc-card-item>
                     <template #header>
                         <div class="font-400 text-orange">收方总金额：0元</div>
                     </template>
-                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange">
+                        <template #action="{ row }">
+                            <el-button plain size="small" type="primary" @click="giveTaskModalClick(row)">下达</el-button>
+                            <el-button plain size="small" type="success">修改</el-button>
+                            <el-button plain size="small" type="danger">删除</el-button>
+                        </template>
+                    </hc-table>
                     <template #action>
                         <hc-pages :pages="searchForm" @change="pageChange" />
                     </template>
                 </hc-card-item>
             </div>
         </div>
+        <!-- 中间收方新增 -->
+        <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="addModalShow" title="中间收方新增" @save="addModalSave" @close="addModalClose">
+            <el-scrollbar>
+                <!-- 基础表单 -->
+                <hc-card-item title="基础表单">
+                    <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="left" label-width="auto">
+                        <el-row :gutter="20">
+                            <el-col :span="8">
+                                <el-form-item label="收方期：">
+                                    <el-input v-model="baseForm.key1" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="收方单编号：">
+                                    <el-input v-model="baseForm.key2" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="收方日期：">
+                                    <el-date-picker v-model="baseForm.key3" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="16">
+                                <el-form-item label="工程划分：">
+                                    <el-input v-model="baseForm.key4" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="部位名称：">
+                                    <el-input v-model="baseForm.key5" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="收方金额：">
+                                    <el-input v-model="baseForm.key6" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="交工证书编号：">
+                                    <el-input v-model="baseForm.key7" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="排序号：">
+                                    <el-input v-model="baseForm.key8" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="24">
+                                <el-form-item label="草图文件：">
+                                    <hc-form-upload :src="baseForm.key9" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="24">
+                                <el-form-item label="计算式：">
+                                    <el-input v-model="baseForm.key10" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </hc-card-item>
+                <!-- 收方清单列表 -->
+                <hc-card-item class="mt-3">
+                    <template #header>
+                        <span class="mr-3">收方清单列表</span>
+                        <span class="font-400 text-orange">温馨提示：超计,累计收方量> 变更后数量，分解清单超计整行红色</span>
+                    </template>
+                    <template #extra>
+                        <el-button type="primary" text @click="addBillBaseModalClick">
+                            <HcIcon name="add" />
+                            <span>添加</span>
+                        </el-button>
+                    </template>
+                    <hc-table :column="addTableColumn" :datas="addTableData">
+                        <template #key3="{ row }">
+                            <hc-table-input v-model="row.key3" disabled />
+                        </template>
+                        <template #key5="{ row }">
+                            <hc-table-input v-model="row.key5" disabled />
+                        </template>
+                        <template #key6="{ row }">
+                            <hc-table-input v-model="row.key6" />
+                        </template>
+                        <template #key7="{ row }">
+                            <hc-table-input v-model="row.key7" />
+                        </template>
+                        <template #key8="{ row }">
+                            <hc-table-input v-model="row.key8" />
+                        </template>
+                        <template #key9="{ row }">
+                            <hc-table-input v-model="row.key9" disabled />
+                        </template>
+                        <template #key10="{ row }">
+                            <hc-table-input v-model="row.key10" disabled />
+                        </template>
+                        <template #action="{ row }">
+                            <el-button plain size="small" type="danger">删除</el-button>
+                        </template>
+                    </hc-table>
+                </hc-card-item>
+                <!-- 附件列表 -->
+                <hc-card-item class="mt-3" title="附件列表">
+                    <template #extra>
+                        <span class="font-400 text-orange">可上传 图片(png、jpg、jpeg)、Excel(xls、xlsx)、PDF、Word(doc、docx)文件</span>
+                    </template>
+                    <el-form :model="baseForm" label-position="left" label-width="auto">
+                        <el-form-item label="上传附件">
+                            <hc-form-upload type="list" :src="baseForm.key11" />
+                        </el-form-item>
+                    </el-form>
+                </hc-card-item>
+            </el-scrollbar>
+        </hc-dialog>
+        <!-- 添加分解清单 -->
+        <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="addBillBaseModalShow" title="添加分解清单" @save="addBillBaseModalSave" @close="addBillBaseModalClose">
+            <hc-table :column="tableBillBaseColumn" :datas="tableBillBaseData" :loading="tableBillBaseLoading" is-check @selection-change="tableBillBaseCheckChange" />
+        </hc-dialog>
+        <!-- 收方单任务下达 -->
+        <hc-dialog is-to-body is-footer-center widths="500px" :show="giveTaskModalShow" title="收方单任务下达" @save="giveTaskModalSave" @close="giveTaskModalClose">
+            <el-form ref="giveTaskFormRef" class="p-2" label-position="top" :model="giveTaskForm" :rules="giveTaskFormRules">
+                <el-form-item label="执行人：">
+                    <hc-choice-user v-model="giveTaskForm.key1" />
+                </el-form-item>
+            </el-form>
+        </hc-dialog>
+
+        <!-- 文件上传组件 -->
+        <hc-upload-file ref="HcUploadFileRef" />
     </hc-card>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 
+defineOptions({
+    name: 'DebitPayAdminApply',
+})
+
+const HcUploadFileRef = ref(null)
+
 //渲染完成
 onMounted(() => {
     setSplitRef()
@@ -63,7 +204,7 @@ const setSplitRef = () => {
         window.$split(['#hc_tree_card', '#hc_table_card'], {
             sizes: [20, 80],
             snapOffset: 0,
-            minSize: [200, 500],
+            minSize: [50, 500],
         })
     })
 }
@@ -82,6 +223,29 @@ const searchKey1Click = () => {
 
 }
 
+//数据格式
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: 'leaf',
+}
+
+//懒加载的数据
+const treeLoadNode = ({ level }, resolve) => {
+    if (level === 0) {
+        return resolve([{ name: 'region' }])
+    }
+    if (level > 3) {
+        return resolve([])
+    }
+    setTimeout(() => {
+        resolve([
+            { name: 'leaf', leaf: true },
+            { name: 'zone' },
+        ])
+    }, 500)
+}
+
 //分页
 const pageChange = ({ current, size }) => {
     searchForm.value.current = current
@@ -97,14 +261,109 @@ const tableColumn = ref([
     { key: 'key4', name: '收方金额' },
     { key: 'key5', name: '业务日期' },
     { key: 'key6', name: '审核状态' },
-    { key: 'action', name: '操作' },
+    { key: 'action', name: '操作', width: 200, align: 'center' },
+])
+const tableData = ref([
+    { key1: '1111' },
 ])
-const tableData = ref([])
 
 //表格选择
 const tableCheckChange = () => {
 
 }
+
+
+//中间收方新增
+const addModalShow = ref(false)
+const addModalClick = () => {
+    addModalShow.value = true
+}
+
+//基础表单
+const baseFormRef = ref(null)
+const baseForm = ref({})
+const baseFormRules = {}
+
+//收方清单列表
+const addTableColumn = ref([
+    { key: 'key1', name: '清单编号', width: '120' },
+    { key: 'key2', name: '清单名称', minWidth: '280' },
+    { key: 'key3', name: '单价(元)', width: '100' },
+    { key: 'key4', name: '分解数量', width: '100' },
+    { key: 'key5', name: '变更后数量', width: '100' },
+    { key: 'key6', name: '本期计划收方数量', width: '140' },
+    { key: 'key7', name: '本期实际收方数量', width: '140' },
+    { key: 'key8', name: '含变更数量', width: '100' },
+    { key: 'key9', name: '本期收方金额', width: '120' },
+    { key: 'key10', name: '累计收方量', width: '100' },
+    { key: 'action', name: '操作', fixed: 'right', width: 80, align: 'center' },
+])
+const addTableData = ref([
+    { key1: '101-1-a', key2: '按合同条款规定，提供建筑工程一切险' },
+])
+
+const addModalSave = () => {
+    addModalClose()
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    addModalShow.value = false
+}
+
+//添加分解清单
+const addBillBaseModalShow = ref(false)
+const addBillBaseModalClick = () => {
+    addBillBaseModalShow.value = true
+}
+
+//表格数据
+const tableBillBaseLoading = ref(false)
+const tableBillBaseColumn = [
+    { key: 'key1', name: '清单编号' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '单价(元)' },
+    { key: 'key4', name: '合同数量' },
+    { key: 'key5', name: '合同变更后数量' },
+    { key: 'key6', name: '施工图变更后数量' },
+    { key: 'key7', name: '分解剩余量' },
+]
+const tableBillBaseData = ref([
+    { key1: '1111' },
+])
+
+//表格选择
+const tableBillBaseCheckChange = (checks) => {
+    console.log(checks)
+}
+const addBillBaseModalSave = () => {
+    addBillBaseModalClose()
+}
+const addBillBaseModalClose = () => {
+    addBillBaseModalShow.value = false
+}
+
+//收方单任务下达
+const giveTaskModalShow = ref(false)
+const giveTaskModalClick = (row) => {
+    giveTaskModalShow.value = true
+}
+
+//执行人表单
+const giveTaskFormRef = ref(null)
+const giveTaskForm = ref({})
+const giveTaskFormRules = {
+
+}
+
+
+const giveTaskModalSave = () => {
+    giveTaskModalClose()
+}
+
+const giveTaskModalClose = () => {
+    giveTaskModalShow.value = false
+}
 </script>
 
 <style scoped lang="scss">