|
|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <hc-dialog is-to-body is-table is-footer-center widths="90%" :show="isShow" title="预变更" @save="addModalSave" @close="addModalClose">
|
|
|
+ <div class="relative h-full flex">
|
|
|
+ <div id="hc_add_dialog_tree_card">
|
|
|
+ <hc-card-item title="工程部位" scrollbar>
|
|
|
+ <template #extra>
|
|
|
+ <el-link type="primary">添加</el-link>
|
|
|
+ </template>
|
|
|
+ <hc-lazy-tree :h-props="treeProps" show-checkbox @load="treeLoadNode" />
|
|
|
+ </hc-card-item>
|
|
|
+ </div>
|
|
|
+ <div id="hc_add_dialog_table_card">
|
|
|
+ <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" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="预变更名称：">
|
|
|
+ <el-input v-model="baseForm.key2" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="预变更金额：">
|
|
|
+ <el-input v-model="baseForm.key3" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="变更类型：">
|
|
|
+ <el-select v-model="baseForm.key4" filterable block>
|
|
|
+ <el-option label="一般变更A" value="1" />
|
|
|
+ <el-option label="一般变更B" value="2" />
|
|
|
+ <el-option label="一般变更C" value="3" />
|
|
|
+ </el-select>
|
|
|
+ </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" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="业务日期：">
|
|
|
+ <el-date-picker v-model="baseForm.key7" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="实际变更桩号：">
|
|
|
+ <el-input v-model="baseForm.key8" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="变更原因：">
|
|
|
+ <el-input v-model="baseForm.key9" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </hc-card-item>
|
|
|
+ <!-- 变更申请部位 -->
|
|
|
+ <hc-card-item title="变更申请部位" class="mt-3">
|
|
|
+ <hc-table :column="tableColumn" :datas="tableData">
|
|
|
+ <template #key3="{ row }">
|
|
|
+ <hc-table-input v-model="row.key3" />
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="danger">删除</el-link>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ </hc-card-item>
|
|
|
+ <!-- 变更申请清单 -->
|
|
|
+ <hc-card-item title="变更申请清单" class="mt-3">
|
|
|
+ <template #extra>
|
|
|
+ <el-link type="primary" @click="changeShowClick">添加</el-link>
|
|
|
+ </template>
|
|
|
+ <div class="hc-table-ref-box no-border">
|
|
|
+ <el-table class="w-full" :data="tableData" row-key="id" height="100%" highlight-current-row border>
|
|
|
+ <el-table-column type="index" label="序号" />
|
|
|
+ <el-table-column prop="key1" label="清单编号" />
|
|
|
+ <el-table-column prop="key2" label="清单名称" />
|
|
|
+ <el-table-column prop="key3" label="单价" />
|
|
|
+ <el-table-column label="数量" align="center">
|
|
|
+ <el-table-column prop="key5" label="变更前" />
|
|
|
+ <el-table-column prop="key6" label="变更增减" />
|
|
|
+ <el-table-column prop="key7" label="变更后" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="金额" align="center">
|
|
|
+ <el-table-column prop="key8" label="变更前" />
|
|
|
+ <el-table-column prop="key9" label="变更增减" />
|
|
|
+ <el-table-column prop="key10" label="变更后" />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </hc-card-item>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ChangeRequest v-model="isChangeShow" />
|
|
|
+ </hc-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { nextTick, ref, watch } from 'vue'
|
|
|
+import ChangeRequest from './changeRequest.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ ids: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+//事件
|
|
|
+const emit = defineEmits(['finish', 'close'])
|
|
|
+
|
|
|
+//双向绑定
|
|
|
+// eslint-disable-next-line no-undef
|
|
|
+const isShow = defineModel('modelValue', {
|
|
|
+ default: false,
|
|
|
+})
|
|
|
+
|
|
|
+//监听
|
|
|
+watch(() => [
|
|
|
+ props.ids,
|
|
|
+], ([ids]) => {
|
|
|
+ console.log('ids', ids)
|
|
|
+}, { immediate: true })
|
|
|
+
|
|
|
+//监听
|
|
|
+watch(isShow, (val) => {
|
|
|
+ if (val) {
|
|
|
+ setSplitRef()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+//初始化设置拖动分割线
|
|
|
+const setSplitRef = () => {
|
|
|
+ //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
|
|
|
+ nextTick(() => {
|
|
|
+ window.$split(['#hc_add_dialog_tree_card', '#hc_add_dialog_table_card'], {
|
|
|
+ sizes: [20, 80],
|
|
|
+ snapOffset: 0,
|
|
|
+ minSize: [100, 400],
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//数据格式
|
|
|
+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 baseFormRef = ref(null)
|
|
|
+const baseForm = ref({})
|
|
|
+const baseFormRules = {}
|
|
|
+
|
|
|
+//变更申请部位列表
|
|
|
+const tableColumn = ref([
|
|
|
+ { key: 'key1', name: '工程名称' },
|
|
|
+ { key: 'key2', name: '节点路径' },
|
|
|
+ { key: 'key3', name: '合同图号' },
|
|
|
+ { key: 'key4', name: '变更后金额(元)' },
|
|
|
+ { key: 'key5', name: '是否增补' },
|
|
|
+ { key: 'action', name: '操作', width: 80, align: 'center' },
|
|
|
+])
|
|
|
+const tableData = ref([
|
|
|
+ { key1: '101-1-a' },
|
|
|
+])
|
|
|
+
|
|
|
+const addModalSave = () => {
|
|
|
+ emit('finish')
|
|
|
+ addModalClose()
|
|
|
+}
|
|
|
+
|
|
|
+//关闭弹窗
|
|
|
+const addModalClose = () => {
|
|
|
+ isShow.value = false
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
+
|
|
|
+//变更清单的添加弹窗
|
|
|
+const isChangeShow = ref(false)
|
|
|
+const changeShowClick = () => {
|
|
|
+ isChangeShow.value = true
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+</style>
|
