|
|
@@ -1,6 +1,20 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 表单
|
|
|
+ <div class="hc-uni-app-table-form" :class="[editType]">
|
|
|
+ <div class="title-bar">
|
|
|
+ <el-button v-if="editType === 'form'" color="#EBF9F4" @click="editTypeClick('auto')">切换</el-button>
|
|
|
+ <el-button v-if="editType === 'auto'" color="#EBF9F4" @click="editTypeClick('table')">切换</el-button>
|
|
|
+ <el-button v-if="editType === 'table'" color="#EBF9F4" @click="editTypeClick('form')">切换</el-button>
|
|
|
+ <el-button color="#EBF9F4">复制</el-button>
|
|
|
+ <el-button color="#EBF9F4">隐藏</el-button>
|
|
|
+ <el-button color="#EBF9F4">预览</el-button>
|
|
|
+ <el-button color="#EBF9F4">上传</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="hc-app-table-form" :style="tableWidth > 0 ? `width: ${tableWidth}px;` : ''">
|
|
|
+ <hc-table-form ref="tableFormRef" :form="tableFormInfo" :html="excelHtml" :scroll="false" :loading="loading" :pkey="appItem.pkeyId" @render="tableFormRender" />
|
|
|
+ </div>
|
|
|
+ <div class="action-bar">
|
|
|
+ <el-button hc-btn type="primary" size="large">保 存</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -8,22 +22,107 @@
|
|
|
import { onMounted, ref } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import wbsApi from '~api/data-fill/wbs'
|
|
|
-import { getObjValue } from 'js-fast-way'
|
|
|
+import { getObjVal, getObjValue, isString } from 'js-fast-way'
|
|
|
|
|
|
const useRoutes = useRoute()
|
|
|
const appItem = useRoutes.query
|
|
|
|
|
|
+const tableFormRef = ref(null)
|
|
|
+const editType = ref('table')
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
//渲染完成
|
|
|
onMounted(() => {
|
|
|
console.log(appItem)
|
|
|
getWbsContractById()
|
|
|
+ getDataApi()
|
|
|
+ editTypeClick('table')
|
|
|
})
|
|
|
|
|
|
+const getDataApi = async () => {
|
|
|
+ if (appItem.pkeyId) {
|
|
|
+ await getTableFormInfo()
|
|
|
+ await getExcelHtml()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
//获取详情
|
|
|
+const wbsInfo = ref({})
|
|
|
const getWbsContractById = async () => {
|
|
|
const { data } = await wbsApi.getWbsContractById({
|
|
|
- pkeyId: appItem.pkeyId,
|
|
|
+ pKeyId: appItem.pkeyId,
|
|
|
})
|
|
|
- console.log(getObjValue(data))
|
|
|
+ wbsInfo.value = getObjValue(data)
|
|
|
+}
|
|
|
+
|
|
|
+//获取表单初始数据
|
|
|
+const getFormDataInit = (data = {}) => {
|
|
|
+ const { projectId, contractId, classify, treeId, pkeyId } = appItem
|
|
|
+ return {
|
|
|
+ projectId: projectId,
|
|
|
+ contractId: contractId,
|
|
|
+ classify: classify,
|
|
|
+ pkeyId: pkeyId,
|
|
|
+ nodeId: treeId,
|
|
|
+ isRenderForm: false,
|
|
|
+ ...data,
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取已填写的数据
|
|
|
+const tableFormInfo = ref({})
|
|
|
+const getTableFormInfo = async () => {
|
|
|
+ const { error, code, data } = await wbsApi.getBussDataInfo({
|
|
|
+ pkeyId: appItem.pkeyId,
|
|
|
+ }, false)
|
|
|
+ const resData = getObjVal(data)
|
|
|
+ if (!error && code === 200 && resData) {
|
|
|
+ tableFormInfo.value = getFormDataInit(resData)
|
|
|
+ } else {
|
|
|
+ tableFormInfo.value = getFormDataInit()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取模板标签数据
|
|
|
+const excelHtml = ref('')
|
|
|
+const getExcelHtml = async () => {
|
|
|
+ const { error, code, data } = await wbsApi.getExcelHtml({
|
|
|
+ pkeyId: appItem.pkeyId,
|
|
|
+ }, false)
|
|
|
+ const resData = isString(data) ? data || '' : ''
|
|
|
+ if (!error && code === 200 && resData) {
|
|
|
+ excelHtml.value = resData
|
|
|
+ } else {
|
|
|
+ excelHtml.value = ''
|
|
|
+ tableFormInfo.value.isRenderForm = false
|
|
|
+ window?.$message?.warning('暂无表单')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//渲染完成
|
|
|
+const tableFormRender = (form) => {
|
|
|
+ tableFormInfo.value = form
|
|
|
+ //emit('render', form)
|
|
|
+}
|
|
|
+
|
|
|
+//切换显示模式
|
|
|
+const tableWidth = ref(0)
|
|
|
+const editTypeClick = (type) => {
|
|
|
+ let metaEle = document.getElementsByName('viewport')[0]
|
|
|
+ if (type === 'form') {
|
|
|
+ metaEle.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=1.0')
|
|
|
+ tableWidth.value = 0
|
|
|
+ } else if (type === 'auto') {
|
|
|
+ metaEle.setAttribute('content', 'width=1080, initial-scale=0.5,user-scalable=yes')
|
|
|
+ tableWidth.value = document.body.offsetWidth
|
|
|
+ } else if (type === 'table') {
|
|
|
+ metaEle.setAttribute('content', 'width=1080, initial-scale=0.5,user-scalable=yes')
|
|
|
+ tableWidth.value = document.body.offsetWidth
|
|
|
+ }
|
|
|
+ editType.value = type
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "~src/styles/uni-app/table-form.scss";
|
|
|
+</style>
|
