合同材料

src/views/debit-pay/material/contract.vue

@@ -1,20 +1,31 @@
 <template>
     <hc-new-card title="合同材料">
+        <template #header>
+            <el-tabs v-model="headerTabsKey" class="hc-header-tabs" @tab-click="headerTabsClick">
+                <el-tab-pane label="合同材料基准数据" name="data" />
+                <el-tab-pane label="材料实时价格" name="price" />
+            </el-tabs>
+        </template>
         <template #extra>
-            <el-button hc-btn type="primary" @click="rowAddClick">
-                <HcIcon name="add" />
+            <el-button v-if="headerTabsKey === 'data'" hc-btn type="primary" @click="rowAddClick">
+                <hc-icon name="add" />
+                <span>新增</span>
+            </el-button>
+            <el-button v-if="headerTabsKey === 'price' && !isTablePrice" hc-btn type="primary" @click="tablePriceClick">
+                <hc-icon name="add" />
                 <span>新增</span>
             </el-button>
         </template>
-        <div class="relative h-full flex">
+        <!-- 合同材料基准数据 -->
+        <div v-if="headerTabsKey === 'data'" class="relative h-full flex">
             <div class="flex-1">
                 <hc-card-item>
                     <hc-table
-                        :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" :loading="tableLoading"
-                        is-current-row is-new @row-click="viewRow"
+                        ref="tableRef1" :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }"
+                        :loading="tableLoading" is-current-row is-new @row-click="tableViewRow"
                     >
                         <template #action="{ row }">
-                            <el-link type="success" @click="rowEditClick(row)">修改</el-link>
+                            <el-link type="success" @click="rowEditClick(row)">编辑</el-link>
                             <el-link type="danger" @click="delRowClick(row)">删除</el-link>
                         </template>
                     </hc-table>
@@ -41,34 +52,95 @@
                         <el-form-item label="单价：">
                             <el-input v-model="infoData.price" />
                         </el-form-item>
-                        <el-form-item label="数量：">
-                            <el-input v-model="infoData.amount" />
+                        <el-form-item label="材料损耗：">
+                            <el-input v-model="infoData.key1" placeholder="材料损耗率" />
+                        </el-form-item>
+                        <el-form-item label="调差限额：">
+                            <el-input v-model="infoData.key2" placeholder="调差限额百分比" />
+                        </el-form-item>
+                        <el-form-item label="收益/承担：">
+                            <el-input v-model="infoData.key4" placeholder="业主收益/承担百分比" />
+                        </el-form-item>
+                        <el-form-item label="综合抵扣：">
+                            <el-input v-model="infoData.key3" placeholder="材料综合抵扣率" />
                         </el-form-item>
                     </el-form>
                 </hc-card-item>
             </div>
         </div>
+        <!-- 材料实时价格 -->
+        <hc-body v-else split padding="0">
+            <template #left>
+                <hc-card-item scrollbar>
+                    <hc-data-tree :auto-expand-keys="treeExpandKeys" :h-props="treeProps" :datas="treeLoadNode" @node-tap="treeNodeTap" />
+                </hc-card-item>
+            </template>
+            <hc-card-item v-if="isTablePrice">
+                <template #header>
+                    <div class="text-14px text-red">*加个有效期</div>
+                    <div class="ml-3 w-64">
+                        <hc-date-picker :dates="betweenTime" @change="betweenTimeUpdate" />
+                    </div>
+                </template>
+                <template #extra>
+                    <el-button @click="priceCancelClick">取消</el-button>
+                    <el-button type="success" @click="tablePriceSave">提交保存</el-button>
+                </template>
+                <hc-table :column="tableColumn1" :datas="tableData2" :loading="tableLoading2" :is-index="false">
+                    <template #key4="{ row }">
+                        <hc-table-input v-model="row.key4" />
+                    </template>
+                </hc-table>
+            </hc-card-item>
+            <hc-card-item v-else>
+                <hc-table :column="tableColumn1" :datas="tableData1" :loading="tableLoading1" :is-index="false" />
+            </hc-card-item>
+        </hc-body>
         <!-- 新增/修改 -->
-        <hc-new-dialog :show="isFormModal" :title="modalTitle" is-footer-center widths="30rem" @close="modalClose">
+        <hc-new-dialog :show="isFormModal" :title="modalTitle" is-footer-center widths="40rem" @close="modalClose">
             <el-form ref="formRef" :model="formModel" :rules="formRules" class="p-2" label-position="top" size="large">
-                <el-form-item label="材料编号：">
-                    <el-input v-model="formModel.materialNumber" />
-                </el-form-item>
-                <el-form-item label="材料名称：" prop="materialName">
-                    <el-input v-model="formModel.materialName" />
-                </el-form-item>
-                <el-form-item label="规格型号：">
-                    <el-input v-model="formModel.specification" />
-                </el-form-item>
-                <el-form-item label="单位：">
-                    <el-input v-model="formModel.unit	" />
-                </el-form-item>
-                <el-form-item label="单价：">
-                    <el-input-number v-model="formModel.price" :controls="false" :min="0" class="w-100" />
-                </el-form-item>
-                <el-form-item label="数量：">
-                    <el-input-number v-model="formModel.amount" :controls="false" :min="0" class="w-100" />
-                </el-form-item>
+                <el-row :gutter="24">
+                    <el-col :span="12">
+                        <el-form-item label="材料编号：">
+                            <el-input v-model="formModel.materialNumber" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="材料名称：" prop="materialName">
+                            <el-input v-model="formModel.materialName" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="规格型号：">
+                            <el-input v-model="formModel.specification" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="单价：">
+                            <el-input-number v-model="formModel.price" :controls="false" :min="0" class="w-100" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="材料损耗率：">
+                            <el-input v-model="infoData.key1" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="调差限额百分比：">
+                            <el-input v-model="infoData.key2" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="业主收益/承担百分比：">
+                            <el-input v-model="infoData.key4" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="材料综合抵扣率：">
+                            <el-input v-model="infoData.key3" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
             <template #footer>
                 <el-button hc-btn @click="modalClose">取消</el-button>
@@ -80,9 +152,10 @@
 </template>
 
 <script setup>
-import { HcDelMsg } from 'hc-vue3-ui'
-import { deepClone, formValidate, getArrValue, isNullES } from 'js-fast-way'
 import { onActivated, ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { getStoreValue, setStoreValue } from '~uti/storage'
+import { deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import mainApi from '~api/debit-pay/material/contract.js'
 import { useAppStore } from '~src/store'
 
@@ -99,10 +172,17 @@ onActivated(() => {
     getTableData()
 })
 
+//标签页
+const headerTabsKey = ref('data')
+const headerTabsClick = (tab) => {
+    if (tab === 'data') {
+        searchForm.value.current = 1
+        getTableData()
+    }
+}
+
 //搜索表单
-const searchForm = ref({
-    current: 1, size: 20, total: 0,
-})
+const searchForm = ref({ current: 1, size: 20, total: 0 })
 
 //分页
 const pageChange = ({ current, size }) => {
@@ -112,6 +192,7 @@ const pageChange = ({ current, size }) => {
 }
 
 //表格数据
+const tableRef1 = ref(null)
 const tableLoading = ref(false)
 const tableColumn = ref([
     { key: 'materialNumber', name: '材料编号' },
@@ -119,9 +200,13 @@ const tableColumn = ref([
     { key: 'specification', name: '规格型号' },
     { key: 'unit', name: '单位' },
     { key: 'price', name: '单价' },
-    { key: 'amount', name: '数量' },
+    { key: 'key1', name: '材料损耗率(%)' },
+    { key: 'key2', name: '调差限额百分比(%)' },
+    { key: 'key3', name: '材料综合抵扣率(%)' },
     { key: 'action', name: '操作', width: 100 },
 ])
+
+//获取表格数据
 const tableData = ref([])
 const infoData = ref({})
 const getTableData = async () => {
@@ -137,19 +222,20 @@ const getTableData = async () => {
         searchForm.value.total = data['total']
         if (tableData.value.length > 0) {
             infoData.value = tableData.value[0]
-            // getDetail(tableData.value[0].id)
+            tableRef1.value?.tableRef?.setCurrentRow(tableData.value[0])
         }
     } else {
         tableData.value = []
         searchForm.value.total = 0
     }
 }
-const viewRow = ({ row }) => {
+//表格行被点击
+const tableViewRow = ({ row }) => {
     infoData.value = row
 }
-const modalTitle = ref('')
 
 //新增
+const modalTitle = ref('')
 const isFormModal = ref(false)
 const rowAddClick = () => {
     isFormModal.value = true
@@ -247,8 +333,129 @@ const modalClose = () => {
         getTableData()
     }
 }
-</script>
 
-<style lang="scss" scoped>
 
+//数据格式
+const treeStore = 'debit-pay-material-contract-tree-keys'
+const treeExpandKeys = ref(getStoreValue(treeStore) || [])
+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 treeInfo = ref({})
+const treeNodeTap = ({ data, keys }) => {
+    treeInfo.value = getObjValue(data)
+    setStoreValue(treeStore, keys)
+    treeExpandKeys.value = keys || []
+    getTableData1()
+}
+
+//材料实时价格
+const tableColumn1 = [
+    { key: 'key1', name: '材料编码' },
+    { key: 'key2', name: '材料名称' },
+    { key: 'key3', name: '材料单位' },
+    { key: 'key4', name: '单价(元)' },
+]
+const tableData1 = ref([
+    { key1:'CL01', key2: '懒得写', key3: '懒得复制', key4: '懒得粘贴' },
+])
+
+//获取数据
+const tableLoading1 = ref(false)
+const getTableData1 = () => {
+
+}
+
+//新增
+const isTablePrice = ref(false)
+const tablePriceClick = () => {
+    isTablePrice.value = true
+    getTableData2()
+}
+
+//获取数据
+const tableData2 = ref([
+    { key1:'CL01', key2: '懒得写', key3: '1', key4: '' },
+])
+const tableLoading2 = ref(false)
+const getTableData2 = () => {
+
+}
+
+//日期选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({ arr }) => {
+    console.log('startTime：', arr[0])
+    console.log('endTime：', arr[1])
+}
+
+//保存
+const tablePriceSave = () => {
+    priceCancelClick()
+}
+
+//取消
+const priceCancelClick = () => {
+    isTablePrice.value = false
+    tableData2.value = []
+    tableLoading2.value = false
+}
+</script>
+
+<style lang="scss">
+.el-tabs.hc-header-tabs {
+    position: absolute;
+    --el-tabs-header-height: 46px;
+    .el-tabs__header {
+        margin-bottom: 0;
+    }
+    .el-tabs__nav-wrap {
+        margin-bottom: -1px;
+    }
+    .el-tabs__nav-wrap:after {
+        background-color: transparent;
+    }
+}
 </style>