|
@@ -1,24 +1,245 @@
|
|
|
<template>
|
|
|
- <div class="hc-layout-box">
|
|
|
- 月报汇总
|
|
|
+ <div class="hc-page-layout-box">
|
|
|
+ <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
|
|
|
+ <div class="hc-project-box">
|
|
|
+ <div class="hc-project-icon-box">
|
|
|
+ <HcIcon name="stack"/>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2 project-name-box">
|
|
|
+ <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
|
|
|
+ <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hc-tree-box">
|
|
|
+ <el-scrollbar>
|
|
|
+ <TestTree :projectId="projectId" :contractId="contractId" @change="testTreeCheckChange"/>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <!--左右拖动-->
|
|
|
+ <div class="horizontal-drag-line" @mousedown="onmousedown"/>
|
|
|
+ </div>
|
|
|
+ <div class="hc-page-content-box">
|
|
|
+ <HcCard>
|
|
|
+ <template #header>
|
|
|
+ <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="ml-2">
|
|
|
+ <el-button type="primary" @click="searchClick">
|
|
|
+ <HcIcon name="search-2"/>
|
|
|
+ <span>搜索</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <HcTooltip keys="tentative_material_approach_add">
|
|
|
+ <el-button type="primary" hc-btn>
|
|
|
+ <HcIcon name="send-plane-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="download"/>
|
|
|
+ <span>下载</span>
|
|
|
+ </el-button>
|
|
|
+ </HcTooltip>
|
|
|
+ </template>
|
|
|
+ <div class="hc-table-ref-box">
|
|
|
+ <el-table class="hc-table-diy-box" :data="tableData" :span-method="tableSpanMethod" height="100%" style="width: 100%">
|
|
|
+ <el-table-column label="试验组数" width="300" align="right">
|
|
|
+ <el-table-column prop="title" label="试验项目" width="220" align="left"></el-table-column>
|
|
|
+ <el-table-column prop="month" label="月" align="center" width="80"></el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="承包人" align="center">
|
|
|
+ <el-table-column prop="name" label="合格数" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="state" label="不合格树" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="zip" label="备注" align="center"></el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="140" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <!--scope.row scope.$index-->
|
|
|
+ <HcTooltip keys="tentative_material_approach_annex">
|
|
|
+ <el-button type="primary" size="small" plain>编辑备注</el-button>
|
|
|
+ </HcTooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <template #action>
|
|
|
+ <HcPages :pages="searchForm" @change="pageChange"/>
|
|
|
+ </template>
|
|
|
+ </HcCard>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref,watch,onMounted} from "vue";
|
|
|
-import {useRouter, useRoute} from 'vue-router'
|
|
|
+import {ref, onMounted, watch} from "vue";
|
|
|
import {useAppStore} from "~src/store";
|
|
|
+import {useRouter, useRoute} from 'vue-router'
|
|
|
+import TestTree from "./components/TestTree.vue"
|
|
|
|
|
|
//初始变量
|
|
|
const router = useRouter()
|
|
|
const useRoutes = useRoute()
|
|
|
const useAppState = useAppStore()
|
|
|
-//const {getObjValue, getArrValue} = isType()
|
|
|
|
|
|
//全局变量
|
|
|
const projectId = ref(useAppState.getProjectId);
|
|
|
const contractId = ref(useAppState.getContractId);
|
|
|
+const projectInfo = ref(useAppState.getProjectInfo);
|
|
|
+const isCollapse = ref(useAppState.getCollapse)
|
|
|
+
|
|
|
+//监听
|
|
|
+watch(() => [
|
|
|
+ useAppState.getCollapse
|
|
|
+], ([Collapse]) => {
|
|
|
+ isCollapse.value = Collapse
|
|
|
+})
|
|
|
+
|
|
|
+//渲染完成
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+//树被勾选
|
|
|
+const nodeItemInfo = ref({})
|
|
|
+const testTreeCheckChange = ({data, checked, indeterminate}) => {
|
|
|
+ console.log(data, checked, indeterminate)
|
|
|
+ //nodeItemInfo.value = data
|
|
|
+ //searchForm.value.current = 1;
|
|
|
+ //getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({
|
|
|
+ type: null, approval: null, betweenTime: null,
|
|
|
+ current: 1, size: 20, total: 0
|
|
|
+})
|
|
|
+
|
|
|
+//检测类别
|
|
|
+const typeData = ref([
|
|
|
+ {label: '自检', value: '1'},
|
|
|
+ {label: '抽检', value: '2'},
|
|
|
+ {label: '平行试验', value: '3'},
|
|
|
+ {label: '验证试验', value: '4'},
|
|
|
+ {label: '中心试验', value: '5'}
|
|
|
+])
|
|
|
|
|
|
+//日期时间被选择
|
|
|
+const betweenTime = ref(null)
|
|
|
+const betweenTimeUpdate = ({arr,query}) => {
|
|
|
+ betweenTime.value = arr
|
|
|
+ searchForm.value.betweenTime = query
|
|
|
+}
|
|
|
+
|
|
|
+//搜索
|
|
|
+const searchClick = () => {
|
|
|
+ searchForm.value.current = 1;
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//分页被点击
|
|
|
+const pageChange = ({current, size}) => {
|
|
|
+ searchForm.value.current = current
|
|
|
+ searchForm.value.size = size
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//表格合并
|
|
|
+const tableSpanMethod = ({rowIndex, columnIndex}) => {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ if (rowIndex % 2 === 0) {
|
|
|
+ return {
|
|
|
+ rowspan: 2,
|
|
|
+ colspan: 1,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ rowspan: 0,
|
|
|
+ colspan: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取数据
|
|
|
+const tableLoading = ref(false)
|
|
|
+const tableData = ref([
|
|
|
+ {
|
|
|
+ title: 'No. 189, Grove St, Los Angeles',
|
|
|
+ month: '本月',
|
|
|
+ name: '100',
|
|
|
+ state: '2',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'No. 189, Grove St, Los Angeles',
|
|
|
+ month: '累计',
|
|
|
+ name: '100',
|
|
|
+ state: '2',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'No. 189, Grove St, Los Angeles',
|
|
|
+ month: '本月',
|
|
|
+ name: '100',
|
|
|
+ state: '2',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'No. 189, Grove St, Los Angeles',
|
|
|
+ month: '累计',
|
|
|
+ name: '100',
|
|
|
+ state: '2',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'No. 189, Grove St, Los Angeles',
|
|
|
+ month: '本月',
|
|
|
+ name: '100',
|
|
|
+ state: '2',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'No. 189, Grove St, Los Angeles',
|
|
|
+ month: '累计',
|
|
|
+ name: '100',
|
|
|
+ state: '2',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+])
|
|
|
+const getTableData = () => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//左右拖动,改变树形结构宽度
|
|
|
+const leftWidth = ref(382);
|
|
|
+const onmousedown = () => {
|
|
|
+ const leftNum = isCollapse.value ? 142 : 272
|
|
|
+ document.onmousemove = (ve) => {
|
|
|
+ let diffVal = ve.clientX - leftNum;
|
|
|
+ if(diffVal >= 310 && diffVal <= 900) {
|
|
|
+ leftWidth.value = diffVal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ document.onmouseup = () => {
|
|
|
+ document.onmousemove = null;
|
|
|
+ document.onmouseup = null;
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -26,5 +247,65 @@ const contractId = ref(useAppState.getContractId);
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-
|
|
|
+.hc-table-ref-box {
|
|
|
+ height: 100%;
|
|
|
+ .el-table.hc-table-diy-box {
|
|
|
+ --el-table-bg-color: initial;
|
|
|
+ --el-table-header-bg-color: #DAE8F3;
|
|
|
+ --el-table-header-text-color: #50545E;
|
|
|
+ --el-table-tr-bg-color: #F1F5F8;
|
|
|
+ --el-fill-color-light: #e7ebee;
|
|
|
+ --el-table-text-color: #666666;
|
|
|
+ --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
|
|
|
+ &.el-table--border {
|
|
|
+ --el-table-border-color: #d7d7d7;
|
|
|
+ }
|
|
|
+ thead.is-group {
|
|
|
+ background: none;
|
|
|
+ //表头字体
|
|
|
+ tr:first-of-type th:first-of-type,
|
|
|
+ tr:first-of-type th:first-of-type {
|
|
|
+ .cell {
|
|
|
+ display: inline-flex;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: initial;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //表头其他样式
|
|
|
+ tr:first-of-type th:first-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ .cell {
|
|
|
+ top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr:last-of-type th:first-of-type {
|
|
|
+ border-right: 0;
|
|
|
+ .cell {
|
|
|
+ top: -7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //斜线
|
|
|
+ tr:last-of-type th:nth-of-type(2) {
|
|
|
+ .cell {
|
|
|
+ visibility: hidden;
|
|
|
+ line-height: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &::before, {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 1px;
|
|
|
+ height: 308px;
|
|
|
+ background-color: #d7d7d7;
|
|
|
+ display: block;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ transform: rotate(-75.5deg);
|
|
|
+ transform-origin: bottom;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|