收方上报、清单明细

src/components/hc-report/hc-report.vue

@@ -0,0 +1,147 @@
+<template>
+    <hc-dialog is-to-body is-footer-center widths="600px" bg-color="#fff" :show="isShow" title="流程上报" @save="modalSave" @close="modalClose">
+        <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
+            <el-form-item label="任务名称：" prop="key1">
+                <el-input v-model="formModel.key1" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入名称" type="textarea" />
+            </el-form-item>
+            <el-form-item label="任务流程：" prop="fixedFlowId">
+                <el-select v-model="formModel.fixedFlowId" block @change="fixedFlowChange">
+                    <template v-for="item in fixedFlowData" :key="item.id">
+                        <el-option :label="item.name" :value="item.id" />
+                    </template>
+                </el-select>
+            </el-form-item>
+            <el-form-item v-if="linkUserString" label="下一位审批人员：">
+                <div class="form-item-div">{{ linkUserString }}</div>
+            </el-form-item>
+            <template v-else>
+                <el-form-item label="下一审批岗位：" prop="key2">
+                    <div class="form-item-div">
+                        <el-radio-group v-model="formModel.key2">
+                            <el-radio :label="3">承包商</el-radio>
+                            <el-radio :label="6">监理</el-radio>
+                            <el-radio :label="9">业主</el-radio>
+                        </el-radio-group>
+                    </div>
+                </el-form-item>
+                <el-form-item label="下一审批人员：" prop="userId">
+                    <el-select v-model="formModel.userId" block @change="userChange">
+                        <template v-for="item in userData" :key="item.id">
+                            <el-option :label="item.name" :value="item.id" />
+                        </template>
+                    </el-select>
+                </el-form-item>
+            </template>
+            <el-form-item label="上报说明：">
+                <el-input v-model="formModel.key4" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入上报说明" type="textarea" />
+            </el-form-item>
+        </el-form>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: '',
+    },
+    ids: {
+        type: String,
+        default: null,
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+defineOptions({
+    name: 'HcReportDialog',
+})
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//基础变量
+const formRef = ref(null)
+//监听
+watch(() => [
+    props.name,
+    props.ids,
+], ([name, ids]) => {
+    formModel.value = { name: name, ids: ids }
+})
+
+//监听
+watch(isShow, (val) => {
+    if (val) getFixedFlowApi()
+})
+
+//任务流程
+const fixedFlowDefault = [{ id: 0, name: '自定义流程' }]
+const fixedFlowData = ref([])
+const getFixedFlowApi = () => {
+    if (isShow.value) {
+        fixedFlowData.value = fixedFlowDefault
+    }
+}
+//任务流程变化
+const linkUserString = ref('')
+const fixedFlowChange = (val) => {
+    if (val === 0) {
+        linkUserString.value = '测试的审批人员'
+    } else {
+        linkUserString.value = ''
+    }
+}
+
+//审批人员
+const userData = ref([{ id: 1, name: '测试的' }])
+const userChange = () => {
+
+}
+
+//表单变量
+const formModel = ref({
+  key1: '', fixedFlowId: null,
+})
+const formRules = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入任务名称',
+    },
+    fixedFlowId: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择任务流程',
+    },
+    key2: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择下一审批岗位',
+    },
+    userId: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择下一审批人员',
+    },
+}
+
+//保存
+const modalSave = () => {
+    emit('finish')
+    modalClose()
+}
+
+//关闭弹窗
+const modalClose = () => {
+    isShow.value = false
+    formModel.value = {}
+    emit('close')
+}
+</script>

src/components/index.js

@@ -1,10 +1,12 @@
 import HcTooltip from './hc-tooltip/index.vue'
 import HcTipItem from './hc-tooltip/item.vue'
 import HcChoiceUser from './choice-user/choice-user.vue'
+import HcReportDialog from './hc-report/hc-report.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
     App.component('HcTooltip', HcTooltip)
     App.component('HcTipItem', HcTipItem)
     App.component('HcChoiceUser', HcChoiceUser)
+    App.component('HcReportDialog', HcReportDialog)
 }

src/styles/app/element.scss

@@ -24,6 +24,9 @@
         height: calc(100% - 130px);
         padding: 10px;
     }
+    &.is-no-footer .el-dialog__body {
+        height: calc(100% - 57px);
+    }
     .el-dialog__footer .dialog-footer .el-button[hc-btn] {
         height: 40px;
         padding: 8px 20px;
@@ -34,3 +37,15 @@
         margin-left: 8px;
     }
 }
+.form-item-div {
+    height: auto;
+    min-height: 40px;
+    .el-radio-group {
+        .el-radio {
+            margin-right: 0;
+        }
+        .el-radio + .el-radio {
+            margin-left: 24px;
+        }
+    }
+}

src/views/debit-pay/admin/apply.vue

@@ -12,19 +12,11 @@
                 <HcIcon name="add" />
                 <span>新增</span>
             </el-button>
-            <el-button hc-btn type="primary">
+            <el-button hc-btn type="primary" @click="reportClick">
                 <HcIcon name="send-plane-2" />
                 <span>上报</span>
             </el-button>
-            <el-button hc-btn>
-                <HcIcon name="sort-desc" :line="false" />
-                <span>按部位排序</span>
-            </el-button>
-            <el-button hc-btn>
-                <HcIcon name="sort-desc" :line="false" />
-                <span>按录入时间排序</span>
-            </el-button>
-            <el-button hc-btn>
+            <el-button hc-btn @click="detailsModalClick">
                 <HcIcon name="file-list" />
                 <span>清单明细</span>
             </el-button>
@@ -40,6 +32,16 @@
                     <template #header>
                         <div class="font-400 text-orange">收方总金额：0元</div>
                     </template>
+                    <template #extra>
+                        <el-button hc-btn>
+                            <HcIcon name="sort-desc" :line="false" />
+                            <span>按部位排序</span>
+                        </el-button>
+                        <el-button hc-btn>
+                            <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-button plain size="small" type="primary" @click="giveTaskModalClick(row)">下达</el-button>
@@ -177,7 +179,26 @@
                 </el-form-item>
             </el-form>
         </hc-dialog>
-
+        <!-- 清单明细 -->
+        <hc-dialog ui="is-no-footer" is-to-body is-table :footer="false" widths="1200px" :show="detailsModalShow" title="收方清单明细" @close="detailsModalClose">
+            <div class="relative h-full">
+                <div id="hc_details_table">
+                    <hc-card-item>
+                        <hc-table :column="tableListColumn" :datas="tableData" :loading="tableLoading" />
+                        <template #action>
+                            <hc-pages :pages="searchForm" @change="pageChange" />
+                        </template>
+                    </hc-card-item>
+                </div>
+                <div id="hc_details_list">
+                    <hc-card-item>
+                        <hc-table :column="tableDetailsColumn" :datas="tableData" />
+                    </hc-card-item>
+                </div>
+            </div>
+        </hc-dialog>
+        <!-- 上报弹窗 -->
+        <hc-report-dialog v-model="isReport" />
         <!-- 文件上传组件 -->
         <hc-upload-file ref="HcUploadFileRef" />
     </hc-card>
@@ -356,7 +377,6 @@ const giveTaskFormRules = {
 
 }
 
-
 const giveTaskModalSave = () => {
     giveTaskModalClose()
 }
@@ -364,6 +384,48 @@ const giveTaskModalSave = () => {
 const giveTaskModalClose = () => {
     giveTaskModalShow.value = false
 }
+
+//收方清单明细
+const detailsModalShow = ref(false)
+const detailsModalClick = () => {
+    detailsModalShow.value = true
+    nextTick(() => {
+        window.$split(['#hc_details_table', '#hc_details_list'], {
+            direction: 'vertical',
+            sizes: [70, 30],
+            snapOffset: 0,
+            minSize: [170, 500],
+        })
+    })
+}
+
+const tableListColumn = [
+    { key: 'key1', name: '清单编号' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '变更后数量' },
+    { key: 'key4', name: '收方数量' },
+    { key: 'key5', name: '单价' },
+    { key: 'key6', name: '完成金额' },
+]
+const tableDetailsColumn = [
+    { key: 'key1', name: '凭证编号' },
+    { key: 'key2', name: '收方期' },
+    { key: 'key3', name: '工程部位' },
+    { key: 'key4', name: '审核状态' },
+    { key: 'key5', name: '本期收方数量' },
+    { key: 'key6', name: '收方总金额' },
+]
+
+
+const detailsModalClose = () => {
+    detailsModalShow.value = false
+}
+
+//是否上报
+const isReport = ref(false)
+const reportClick = () => {
+    isReport.value = true
+}
 </script>
 
 <style scoped lang="scss">

vite.config.js

@@ -7,7 +7,7 @@ import config from './src/config'
 // https://vitejs.dev/config/
 export default defineConfig({
     css: {
-        extract: true
+        extract: true,
     },
     resolve: {
         alias: {
@@ -20,8 +20,12 @@ export default defineConfig({
         },
     },
     plugins: [
-        vue(),
-        UnoCSS()
+        vue({
+            script: {
+                defineModel: true,
+            },
+        }),
+        UnoCSS(),
     ],
     build: {
         rollupOptions: {