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="projectTypeList">
                                <el-checkbox :label="1">公路工程</el-checkbox>
                                <el-checkbox :label="2">水里水电工程</el-checkbox>
                            </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="factorTypeList">
                                <el-checkbox label="1">案卷封面</el-checkbox>
                                <el-checkbox label="2">卷内目录</el-checkbox>
                                <el-checkbox label="3">脊背</el-checkbox>
                                <el-checkbox label="4">备考表</el-checkbox>
                            </el-checkbox-group>
                    </div> 
                </div>
            </HcCard>
        </div>

    </div>
</template>

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

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse);

const projectTypeList = ref([])
const factorTypeList = ref([])
const config = ref({});

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

//渲染完成
onMounted(() => {
    getConfigByProjectId();
})

//搜索表单
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 getConfigByProjectId = async ()=>{
    const {code,res} = await archiveConfigApi.getConfigByProjectId({
        projectId:projectId.value
    })
    //console.log(res);
    if (code == 200) {
        // 如果projectType 为 1 则选中 公路工程，为 2，则选中水里水电工程，为3，则两个都选中
        // factorType信息为字符串，格式为"1,2,3,4",包含 1，则选中案卷封面，包含2则选中卷内目录，包含3则选中脊背，包含4则选中备考表
        config.value = res.data;
        if(config.value.projectType == 1 || config.value.projectType == 2){
            projectTypeList.value = [config.value.projectType]
        }else if(config.value.projectType == 3){
            projectTypeList.value = [1,2]
        }else if(config.value.projectType == 0){
            projectTypeList.value = []
        }

        factorTypeList.value = config.value.factorType.split(',');
    }
}

const uploadModalClick = async () => {
    let factorType = '';
    let projectType = 0;
    if(projectTypeList.value.length == 1){
        projectType = projectTypeList.value[0]
    }else if(projectTypeList.value.length > 1){
        projectType = 3
    }

    factorType = factorTypeList.value.join(',');

    const {code,res} = await archiveConfigApi.updateConfig({
        id:config.value.id,
        projectId:projectId.value,
        factorType:factorType,
        projectType:projectType,
    })

    if (code == 200) {
        window.$message?.success('修改成功')
    }
}

//左右拖动，改变树形结构宽度
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>