|
@@ -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>
|