for_client/src/views/tentative/material/approach.vue

<template>
    <div class="hc-page-box">
        <HcCard>
            <template #header>
                <HcTooltip keys="tentative_material_approach_add">
                    <el-button type="primary" hc-btn @click="addFormModalClick">
                        <HcIcon name="add-circle"/>
                        <span>新增</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_material_approach_edit">
                    <el-button hc-btn @click="editFormModalClick">
                        <HcIcon name="edit"/>
                        <span>编辑</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_material_approach_copy">
                    <el-button hc-btn @click="copyTableModalClick">
                        <HcIcon name="file-copy-2"/>
                        <span>复制</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_material_approach_del">
                    <el-button hc-btn @click="delModalClick">
                        <HcIcon name="delete-bin-2"/>
                        <span>删除</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_material_approach_printer">
                    <el-button hc-btn>
                        <HcIcon name="printer"/>
                        <span>打印</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_material_approach_import">
                    <el-button hc-btn>
                        <HcIcon name="folder-upload"/>
                        <span>导入</span>
                    </el-button>
                </HcTooltip>
            </template>
            <template #search>
                <div class="w-40">
                    <el-select v-model="searchForm.type" placeholder="请选择材料类型" clearable>
                        <el-option v-for="item in typeData" :key="item.value" :label="item['label']" :value="item['value']"/>
                    </el-select>
                </div>
                <div class="w-64 ml-2">
                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                </div>
                <div class="w-72 ml-2">
                    <el-input v-model="searchForm.queryValue" placeholder="请输入名称、规格、材料编号进行查询" clearable @keyup="keyUpEvent"/>
                </div>
                <div class="ml-2">
                    <el-button type="primary" @click="searchClick">
                        <HcIcon name="search-2"/>
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
            <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection">
                <template #action="{row}">
                    <HcTooltip keys="tentative_material_approach_annex">
                        <el-button type="primary" size="small" plain>附件</el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_material_approach_sampling">
                        <el-button type="primary" size="small" plain>取样记录</el-button>
                    </HcTooltip>
                </template>
            </HcTable>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange"/>
            </template>
        </HcCard>

        <!--新增/编辑-->
        <HcDialog :show="addEditFormModal" title="新增/编辑 材料进场" widths="45rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
            <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large">
                <div class="hc-form-item">
                    <el-form-item label="材料类型">
                        <el-select v-model="addEditFormModel.key1" block>
                            <el-option v-for="item in typeData" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="材料单价" prop="key2">
                        <el-input v-model="addEditFormModel.key2"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="材料名称" prop="key3">
                        <el-input v-model="addEditFormModel.key3"/>
                    </el-form-item>
                    <el-form-item label="材料数量" prop="key4">
                        <el-input v-model="addEditFormModel.key4"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="规格型号" prop="key5">
                        <el-input v-model="addEditFormModel.key5"/>
                    </el-form-item>
                    <el-form-item label="计算单位" prop="key6">
                        <el-input v-model="addEditFormModel.key6"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="材料编号" prop="key7">
                        <el-input v-model="addEditFormModel.key7"/>
                    </el-form-item>
                    <el-form-item label="生产批号" prop="key8">
                        <el-input v-model="addEditFormModel.key8"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="进场日期" prop="key9">
                        <el-date-picker type="date" v-model="addEditFormModel.key9" class="block" value-format="YYYY-MM-DD" :clearable="false"/>
                    </el-form-item>
                    <el-form-item label="拟用部位" prop="key10">
                        <el-input v-model="addEditFormModel.key10"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="供应商单位" prop="key11">
                        <el-input v-model="addEditFormModel.key11"/>
                    </el-form-item>
                    <el-form-item label="生产地/厂家" prop="key12">
                        <el-input v-model="addEditFormModel.key12"/>
                    </el-form-item>
                </div>
                <el-form-item label="生产合格证" prop="key13">
                    <div class="form-item-dashed hover">上传文件（待定，看后端接口后，再定）</div>
                </el-form-item>
                <el-form-item label="厂家质检报告" prop="key13">
                    <div class="form-item-dashed hover">上传文件（待定，看后端接口后，再定）</div>
                </el-form-item>
                <el-form-item label="其他附件" prop="key13">
                    <div class="form-item-dashed hover">上传文件（待定，看后端接口后，再定）</div>
                </el-form-item>
            </el-form>
        </HcDialog>

        <!--复制材料登记信息-->
        <HcDialog :show="copyTableModal" title="复制材料登记信息" widths="60rem" isTable :loading="copyTableLoading" @close="copyTableModalClose" @save="copyTableClick">
            <HcTable :column="copyTableColumn" :datas="copyTableData">
                <template #key1="{row}">
                    <el-input v-model="row.key1" placeholder="请输入材料编号"/>
                </template>
                <template #action="{row}">
                    <el-button type="danger" size="small" plain>删除</el-button>
                </template>
            </HcTable>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref,watch,onMounted} from "vue";
import {useRouter, useRoute} from 'vue-router'
import {useAppStore} from "~src/store";

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()
//const {getObjValue, getArrValue} = isType()

//全局变量
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);

const typeData = ref([
    {label: '水泥', value: '1'}
])

//搜索表单
const searchForm = ref({type: null, betweenTime: null, queryValue: null, current: 1, size: 20, total: 0})

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr,query}) => {
    betweenTime.value = arr
    searchForm.value.betweenTime = query
}

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === "Enter") {
        searchForm.value.current = 1;
        getTableData()
    }
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key:'key1', name: '材料编号'},
    {key:'key2', name: '进场日期'},
    {key:'key3', name: '材料名称'},
    {key:'key4', name: '材料类型'},
    {key:'key5', name: '规格型号'},
    {key:'key6', name: '供应商单位'},
    {key:'key7', name: '材料单价'},
    {key:'key8', name: '材料数量'},
    {key:'key9', name: '计算单位'},
    {key:'key10', name: '生产批号'},
    {key:'key11', name: '生产地/厂家'},
    {key:'key12', name: '拟用部位'},
    {key:'key13', name: '记录人'},
    {key:'action', name: '操作', width: 200},
])

//获取数据
const tableLoading = ref(false)
const tableData = ref([
    {}
])
const getTableData = async () => {

}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item??'') !== '';
    })
}

//新增/编辑 材料进场
const addEditFormModal = ref(false)
const addFormModalClick = () => {
    addEditFormModal.value = true
}
const editFormModalClick = () => {
    addEditFormModal.value = true
}
const addEditFormModalClose = () => {
    addEditFormModal.value = false
}

//新增/编辑 表单
const addEditFormRef = ref(null)
const addEditFormModel = ref({})
const addEditFormRules = {
    key2: {
        required: true,
        trigger: 'blur',
        message: "请输入"
    },
}

//新增/编辑 保存
const addEditFormLoading = ref(false)
const addEditFormClick = () => {

}

//复制
const copyTableModal = ref(false)

const copyTableModalClick = () => {
    copyTableModal.value = true
}

//复制表格
const copyTableColumn = ref([
    {key:'key3', name: '材料名称'},
    {key:'key1', name: '材料编号'},
    {key:'action', name: '操作', width: 100},
])
const copyTableData = ref([
    {key3: '名称', key1: '编号...'},
    {key3: '名称1', key1: '编号1...'},
])

const copyTableModalClose = () => {
    copyTableModal.value = false
}

//复制 保存
const copyTableLoading = ref(false)
const copyTableClick = () => {
    copyTableModal.value = false
}

//删除
const delModalClick = () => {
    window?.$messageBox?.alert('请谨慎考虑后，确认是否需要删除？', '删除提醒', {
        showCancelButton: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                //removeContractTreeNode()
            }
        }
    })
}

</script>

<style lang="scss" scoped>

</style>