archives/src/views/config/parameter.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-page-content-box">
            <HcCard>
                <template #header>
                     <div class="hc-card-header-table-title">参数设置</div>
                </template>
                 <template #extra>
                      <HcTooltip keys="file_collection_btn_upload_scanned_files">
                        <el-button type="primary" hc-btn @click="uploadModalClick">
                            <HcIcon name="save"/>
                            <span>保存</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <div class="hc-page-content-box-list">
                    <div class="hc-page-content-box-list-title">归档目录树选择范围</div>
                     <el-alert title="选择对应的归档范围，目录树内容也会随之改变" type="error" :closable="false"  />
                    <div  class="hc-card-header-tree-checkbox">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="公路工程" />
                                <el-checkbox label="水里水电工程" />
                            </el-checkbox-group>
                    </div> 
                </div>
                <div class="hc-page-content-box-list">
                     <div class="hc-page-content-box-list-title">案卷四要素设置</div>
                     <el-alert title="勾选是否要生成封面、脊背、卷内目录、备考表" type="error" :closable="false"  />
                    <div  class="hc-card-header-tree-checkbox">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="案卷封面" />
                                <el-checkbox label="卷内目录" />
                                <el-checkbox label="脊背" />
                                <el-checkbox label="备考表" />
                            </el-checkbox-group>
                    </div> 
                </div>
            </HcCard>
        </div>

    </div>
</template>

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

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse);
const checkList = ref(['selected and disabled', '公路工程'])

//监听
watch(() => [
    useAppState.getCollapse
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//渲染完成
onMounted(() => {

})

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

//树相关的变量
const primaryKeyId = ref('')

//日期时间被选择
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 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: '密度(开kg/m3)'},
    {key:'key9', name: '比表面积(m2/kg)'},
    {key:'key10', name: '细度(%)'},
    {key:'key11', name: '标准稠度用水量(%)'},
    {key:'key12', name: '初凝结时间(min)'},
    {key:'key13', name: '终凝结时间(min)'},
    {key:'key14', name: '安定性霍氏夹法'},
    {key:'key15', name: '抗折3D胶砂强度(Mpa)'},
    {key:'key16', name: '抗折28D胶砂强度(Mpa)'},
    {key:'key17', name: '抗压3D胶砂强度(Mpa)'},
    {key:'key18', name: '抗压28D胶砂强度(Mpa)'},
    {key:'key19', name: '试验结果'},
    {key:'key20', name: '检测类型'},
    {key:'key21', name: '检测人'},
])
const tableData = ref([])

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

}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

//删除
const delModalClick = () => {

}

//左右拖动，改变树形结构宽度
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;
    }
}
//保存
const saveClick = () => {
    console.log('保存');
}
</script>

<style lang="scss" scoped>
    @import '~style/custody/scoped/backup.scss';
.hc-card-header-table-title{
 font-size: 1.125rem;
line-height: 1.75rem;
}
    .hc-card-header-tree-checkbox{
          margin-top: 30px;
          text-align: center;
    }
  .hc-page-content-box-list{
      width: 100%;
      height: 300px;
      border:rgb(187, 187, 187) solid 1px;
      margin-bottom: 30px;
      .hc-page-content-box-list-title{
          margin-top: 30px;
          padding-left: 30px; 
          margin-bottom: 30px;
          font-size: 20px;
          color: rgba(52, 54, 57, 0.5);
      }
  }
</style>