for_client/src/views/systemService/fromDrawer.vue

<template>
    <hc-drawer v-model="isShow" to-id="node-card-plan" is-close>
        <hc-card>
            <template #header>
                <el-link type="primary" @click="goBack">返回</el-link>
            </template>
            <template #extra>
                <HcTooltip keys="system-service-plan-save-btn">
                    <el-button
                        class="ml-6"
                        hc-btn
                        keys="system-service-plan-save-btn"
                        type="primary"
                    >
                        <HcIcon name="save" />
                        保存数据
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="system-service-plan-preview-btn">
                    <el-button
                        class="node-card-plan-btn ml-6"
                        hc-btn
                        keys="system-service-plan-preview-btn"
                        color="#3F9EFF"
                    >
                        <HcIcon name="eye" />
                        预览
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="system-service-plan-send-btn">
                    <el-button
                        class="node-card-plan-btn ml-6"
                        hc-btn
                        keys="system-service-plan-send-btn"
                        type="warning"
                        @click="sendPlan"
                    >
                        <HcIcon name="send-plane" />
                        发送计划
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="system-service-plan-back-btn">
                    <el-button
                        class="node-card-plan-btn ml-6"
                        hc-btn
                        keys="system-service-plan-back-btn"
                      
                        type="warning"
                    >
                        <HcIcon name="arrow-go-back" />
                        计划回退
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="system-service-plan-comfirm-btn">
                    <el-button
                        class="node-card-plan-btn ml-6"
                        hc-btn
                        keys="system-service-plan-comfirm-btn"
                      
                        type="success"
                    >
                        <HcIcon name="check" />
                        确认计划
                    </el-button>
                </HcTooltip>
            </template>
      

            <div class="hc-table-form-box">
                <HcTableForm
                    ref="tableFormRef"
                    :form="tableFormData"
                    :html="excelHtmlData"
                    :loading="loading"
                    :pkey="excelIdVal"
                    @render="tableFormRender"
                />
            </div>
        </hc-card>
        <!-- 选择任务人 -->
        <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" @finish="fixedUserFinish" />
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { arrToKey, deepClone, isString } from 'js-fast-way'
import HcUserModal from './hc-tasks-user/user-modal.vue'
import { useAppStore } from '~src/store'
import dataApi from '~api/systemService/service'
const isShow = defineModel('modelValue', {
    default: false,
})
const tableFormRef = ref(null)
const tableFormData = ref({})
const excelHtmlData = ref('')
const loading = ref(false)
const excelIdVal = ref('')
const isTableForm = ref(false)
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)


watch(isShow, (val) => {
    if (val) getExcelHtml()
})

//获取模板标签数据


const getExcelHtml = async () => {
   
        //获取数据
        const { error, code, data } = await dataApi.getServiceHtml({
            contractId: contractId.value || '',
            type:1,
            projectId: projectId.value || '',
        }, false)
        //处理数据
        const resData = isString(data) ? data || '' : ''
        if (!error && code === 200 && resData) {
            excelHtmlData.value = resData
        } else {
            excelHtmlData.value = ''
            isTableForm.value = false
           
        }
   
}
//渲染表单完成
const tableFormRender = (form) => {
    isTableForm.value = form.isRenderForm
}
const goBack = () => {
    isShow.value = false
}
const sendPlan = ()=>{
    isUserModalShow.value = true

}
const isUserModalShow = ref(false)
const userData = ref([])
const dataInfo = ref({
    projectId:projectId.value,
    contractId:contractId.value,
})
const fixedUserFinish = (data) => {
    const res = deepClone(data)
    console.log(res, 'res')
    userData.value = res
    const userIds = arrToKey(res, 'userId', ',')
    let userIdsArr = userIds.split(',')
 
}
</script>

<style scoped lang="scss">
.node-card-plan-btn{
    color:white;
}
</style>