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