222

src/views/project/debit/contract/check-list.vue

@@ -1,46 +1,49 @@
 <template>
-    <hc-card>
-        <template #header>
-            111
-        </template>
-        <template #extra>
-            222
-        </template>
-        <div class="relative h-full flex">
-            <div :id="`hc_tree_card_${uuid}`">
-                <hc-card-item scrollbar>
-                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
-                </hc-card-item>
-            </div>
-            <div :id="`hc_table_card_${uuid}`" class="flex-1">
-                <hc-card-item>
-                    <template #header>
-                        <div class="font-400 text-orange">收方总金额：0元</div>
-                    </template>
-                    <template #extra>
-                        <el-button hc-btn color="#626aef">
-                            <HcIcon name="sort-desc" :line="false" />
-                            <span>按部位排序</span>
-                        </el-button>
-                        <el-button hc-btn color="#626aef">
-                            <HcIcon name="sort-desc" :line="false" />
-                            <span>按录入时间排序</span>
-                        </el-button>
-                    </template>
-                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange">
-                        <template #action="{ row }">
-                            <el-link type="primary" @click="giveTaskModalClick(row)">下达</el-link>
-                            <el-link type="success">修改</el-link>
-                            <el-link type="danger">删除</el-link>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
+    <div class="relative h-full flex">
+        <div :id="`hc_tree_card_${uuid}`">
+            <hc-new-card scrollbar>
+                <hc-lazy-tree :h-props="treeProps" :menus="treeMenus" :root-menu="treeRootMenu" @load="treeLoadNode" @menuTap="treeMenuTap" />
+            </hc-new-card>
         </div>
-    </hc-card>
+        <div :id="`hc_table_card_${uuid}`" class="flex-1">
+            <hc-new-card>
+                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" />
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </div>
+
+        <!-- 节点数据 -->
+        <hc-new-dialog v-model="treeModalShow" widths="500px" :title="treeModalTitle" @save="treeModalSave">
+            <el-form ref="formRef" class="p-2" label-position="left" size="large" label-width="auto" :model="formModel" :rules="formRules">
+                <el-form-item label="节点编码：">
+                    <el-input v-model="formModel.key1" />
+                </el-form-item>
+                <el-form-item label="节点名称：">
+                    <el-input v-model="formModel.key2" />
+                </el-form-item>
+                <el-form-item label="节点类型：">
+                    <el-select v-model="formModel.key3" block>
+                        <el-option label="单位工程" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="工程类型：">
+                    <el-select v-model="formModel.key4" block>
+                        <el-option label="总则" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="显示类型：">
+                    <el-select v-model="formModel.key5" block>
+                        <el-option label="总则" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="备注：">
+                    <el-input v-model="formModel.key6" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                </el-form-item>
+            </el-form>
+        </hc-new-dialog>
+    </div>
 </template>
 
 <script setup>
@@ -48,7 +51,7 @@ import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectDebitContractList',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +74,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
 //数据格式
 const treeProps = {
@@ -99,6 +99,33 @@ const treeLoadNode = ({ level }, resolve) => {
     }, 500)
 }
 
+//根节点菜单
+const treeRootMenu = [
+    { icon: 'lock', label: '锁定', key: 'lock' },
+    { icon: 'add', label: '新增', key: 'add' },
+    { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+]
+
+//节点菜单
+const treeMenus = [
+    { icon: 'add', label: '新增', key: 'add' },
+    { icon: 'pencil', label: '修改', key: 'edit' },
+    { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+    { icon: 'close', label: '删除', key: 'del' },
+]
+
+const treeMenuTap = ({ key, node, data }) => {
+    if (key === 'add') {
+        treeModalTitle.value = '新增下级节点'
+        treeModalShow.value = true
+    }
+    if (key === 'edit') {
+        treeModalTitle.value = '项目计量单元修改'
+        treeModalShow.value = true
+    }
+}
+
+
 //分页
 const pageChange = ({ current, size }) => {
     searchForm.value.current = current
@@ -108,24 +135,26 @@ const pageChange = ({ current, size }) => {
 //表格数据
 const tableLoading = ref(false)
 const tableColumn = ref([
-    { key: 'key1', name: '收方单编号' },
-    { key: 'key2', name: '收方期' },
-    { key: 'key3', name: '工程划分部位' },
-    { key: 'key4', name: '收方金额' },
-    { key: 'key5', name: '业务日期' },
-    { key: 'key6', name: '审核状态' },
-    { key: 'action', name: '操作', width: 200, align: 'center' },
+    { key: 'key1', name: '节点编号' },
+    { key: 'key2', name: '节点名称' },
+    { key: 'key3', name: '节点类型' },
+    { key: 'key4', name: '工程类型' },
 ])
 const tableData = ref([
     { key1: '1111' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
+//弹窗
+const treeModalShow = ref(false)
+const treeModalTitle = ref('')
 
-}
-</script>
+//弹窗表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = ref({})
 
-<style scoped lang="scss">
+//弹窗保存
+const treeModalSave = () => {
 
-</style>
+}
+</script>