1

src/components/table-form/install.js

@@ -8,6 +8,7 @@ import HcElRadio from './modules/el-radio.vue'
 import HcTableFormUpload from './modules/form-upload.vue'
 import HcFormCheckboxGroup from './modules/form-checkbox.vue'
 import HcTableEchart from './modules/form-echart.vue'
+import HcElTooltip from './modules/el-tooltip.vue'
 
 export default {
     ElInput: HcTableFormComponents,
@@ -19,6 +20,7 @@ export default {
     ElCheckbox: HcElCheckbox,
     ElRadioGroup: HcElRadioGroup,
     ElRadio: HcElRadio,
+    ElTooltip: HcElTooltip,
     HcTableFormUpload: HcTableFormUpload,
     HcFormSelectSearch: HcTableFormComponents,
     HcFormSelectSearch2: HcTableFormComponents,

src/components/table-form/modules/components.vue

@@ -5,6 +5,7 @@
         :data-text="placeholder" :data-type="typeName" :data-rows="rows" :data-format="valueFormat || format" :data-weighing="weighing"
         :data-label="label" :data-value="value" :data-src="src" :data-val="val" :data-contractid="contractid" :data-pkeyid="pkeyid"
         :data-objs="objsData" :data-multiple="multiple" :data-range="rangeSeparator" :data-def="deftext" :data-max="maxlength"
+        :data-tip="tip"
     >
         {{ name || placeholder }}
         <div v-if="isSlots" class="slot-content">
@@ -43,6 +44,7 @@ const props = defineProps({
     rangeSeparator: [String, Number],
     deftext: [String, Number],
     maxlength: [String, Number],
+    tip: [String, Number],
 })
 
 const objsData = ref('')

src/components/table-form/modules/el-tooltip.vue

@@ -0,0 +1,28 @@
+<template>
+    <div :id="uuid" class="hc-el-tooltip-box relative h-full w-full">
+        <HcElTooltip :effect="effect" :content="content" :placement="placement">
+            <slot />
+        </HcElTooltip>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { getRandom } from 'js-fast-way'
+import { ElTooltip as HcElTooltip } from 'element-plus'
+
+const props = defineProps({
+    content: [String, Number],
+    placement: [String, Number],
+    effect: [String, Number],
+})
+
+const uuid = getRandom(8)
+
+//渲染完成
+onMounted(()=> {
+    const doms = document.getElementById(uuid)?.children
+    if (doms.length <= 0) return
+    doms[0].setAttribute('data-tip', props.content)
+})
+</script>

src/views/project/list/adjust-excel.vue

@@ -8,12 +8,13 @@
             </template>
             <hc-card scrollbar>
                 <template #header>
-                    <el-segmented v-model="tabsKey" :options="tabsProps" @change="tabsChange" />
+                    <el-segmented v-model="tabsKey" :options="tabsProps" />
                 </template>
                 <HcSetInput v-if="tabsKey === 'tab1'" ref="setInputRef" :info="dataInfo" @finish="getDataApi" />
                 <HcSetEVisa v-if="tabsKey === 'tab2'" ref="setEVisaRef" :info="dataInfo" @finish="getDataApi" />
                 <HcSetFormula v-if="tabsKey === 'tab3'" ref="setFormulaRef" :info="dataInfo" @finish="getDataApi" />
                 <HcSetDefault v-if="tabsKey === 'tab4'" ref="setDefaultRef" :info="dataInfo" @finish="getDataApi" />
+                <HcSetPrompt v-if="tabsKey === 'tab5'" ref="setPromptRef" :info="dataInfo" @finish="getDataApi" />
             </hc-card>
         </hc-page-split>
     </hc-drawer>
@@ -26,6 +27,7 @@ import HcSetInput from './adjust-excel/set-input.vue'
 import HcSetEVisa from './adjust-excel/set-e-visa.vue'
 import HcSetFormula from './adjust-excel/set-formula.vue'
 import HcSetDefault from './adjust-excel/set-default.vue'
+import HcSetPrompt from './adjust-excel/set-prompt.vue'
 import excelApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -55,14 +57,10 @@ watch(isShow, (val) => {
 })
 
 //页面分割
-const splitOptions = {
-    sizes: [70, 30],
-    snapOffset: 0,
-    minSize: [300, 300],
-}
+const splitOptions = { sizes: [70, 30], snapOffset: 0, minSize: [300, 300] }
 
 //选项卡
-const tabsKey = ref('tab4')
+const tabsKey = ref('tab5')
 const tabsProps = [
     { label: '输入框', value: 'tab1' },
     { label: '电签位置', value: 'tab2' },
@@ -70,9 +68,6 @@ const tabsProps = [
     { label: '默认信息', value: 'tab4' },
     { label: '提示信息', value: 'tab5' },
 ]
-const tabsChange = (val) => {
-    console.log(val)
-}
 
 //处理相关数据
 const excelRef = ref(null)
@@ -92,10 +87,11 @@ const setInputRef = ref(null)
 const setEVisaRef = ref(null)
 const setFormulaRef = ref(null)
 const setDefaultRef = ref(null)
+const setPromptRef = ref(null)
 
 //框框被点击
 const keys = [
-    'type', 'key', 'tr', 'td', 'index', 'x1', 'y1', 'x2', 'y2', 'name', 'text', 'rows', 'format',
+    'type', 'key', 'tr', 'td', 'index', 'x1', 'y1', 'x2', 'y2', 'name', 'text', 'rows', 'format', 'tip',
     'weighing', 'label', 'value', 'src', 'val', 'contractid', 'pkeyid', 'objs', 'range', 'def', 'max',
 ]
 const excelClick = async (item) => {
@@ -113,6 +109,9 @@ const excelClick = async (item) => {
     } else if (tabsKey.value === 'tab4') {
         //默认信息
         setDefaultRef.value?.setDomData(obj)
+    } else if (tabsKey.value === 'tab5') {
+        //提示信息
+        setPromptRef.value?.setDomData(obj)
     }
 }
 

src/views/project/list/adjust-excel/set-prompt.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="hc-project-list-adjust-excel-set-default">
+        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
+            <el-form-item label="元素坐标：" prop="colName">
+                <el-input v-model="formModel.colName" placeholder="请点击左侧表单" disabled />
+            </el-form-item>
+            <el-form-item label="默认信息：" prop="textId">
+                <el-input v-model="formModel.textId" :autosize="{ minRows: 5, maxRows: 5 }" type="textarea" placeholder="请填写默认信息" />
+            </el-form-item>
+        </el-form>
+        <div class="action-btn-box mb-40px mt-10px text-center">
+            <el-button type="success" :loading="submitLoading" @click="dialogSubmit">保存数据</el-button>
+            <el-button type="info" style="margin-left: 50px" @click="resetFormClick">重置</el-button>
+        </div>
+        <hc-card-item title="已配数据：">
+            <hc-table :column="tableColumn" :datas="tableData" :is-current-row="false" :is-index="false">
+                <template #action="{ row }">
+                    <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
+                </template>
+            </hc-table>
+        </hc-card-item>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
+import mainApi from '~api/project/tree'
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['finish'])
+
+//监听数据
+const dataInfo = ref(props.info)
+watch(() => props.info, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { deep: true })
+
+//渲染完成
+onMounted(() => {
+    formModel.value = {}
+    getSigList()
+})
+
+//基础表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    colName: { required: true, trigger: 'change', message: '请先获取元素坐标' },
+    textId: { required: true, trigger: 'change', message: '请填写默认信息' },
+}
+
+//数据表格
+const tableColumn = [
+    { key: 'colName', name: '元素位置' },
+    { key: 'sigRoleName', name: '默认值' },
+    { key: 'action', name: '操作', align: 'center', width: 100 },
+]
+const tableData = ref([])
+//获取数据
+const getSigList = async () => {
+    const { pkeyId } = dataInfo.value
+    const { data } = await mainApi.getSigList({
+        current: 0,
+        size: 99999,
+        type: 5,
+        tabId: pkeyId,
+    })
+    tableData.value = getArrValue(data?.records)
+}
+
+//删除数据
+const rowDelClick = (row) => {
+    HcDelMsg(async (resolve) => {
+        const { pkeyId } = dataInfo.value
+        const { isRes } = await mainApi.remove(row.id, pkeyId)
+        resolve() //关闭弹窗的回调
+        if (!isRes) return
+        getSigList().then()
+    })
+}
+
+//提交
+const submitLoading = ref(false)
+const dialogSubmit = async () => {
+    const isForm = await formValidate(formRef.value)
+    if (!isForm) return false
+    submitLoading.value = true
+    const { isRes } = await mainApi.saveDdefual(formModel.value)
+    submitLoading.value = false
+    if (!isRes) return
+    window.$message.success('操作成功')
+    emit('finish')
+    getSigList().then()
+}
+
+//重置表单
+const resetFormClick = () => {
+    formModel.value = { type: '5' }
+}
+
+//设置dom数据
+const setDomData = (item) => {
+    const { pkeyId } = dataInfo.value
+    formModel.value = {
+        type: '5',
+        colName: item.text,
+        colKey: item.key,
+        tableId: pkeyId,
+        trIndex: item.tr,
+        tdIndex: item.td,
+        textId: item.tip || '',
+    }
+}
+
+//导出函数
+defineExpose({
+    setDomData,
+})
+</script>
+
+<style scoped lang="scss">
+.hc-project-list-adjust-excel-set-default :deep(.hc-card-item-box){
+    padding: 6px 14px 14px;
+    .hc-card-item-header {
+        color: #101010;
+        font-size: 14px;
+        font-weight: unset;
+    }
+}
+</style>