修改表格多按钮判断

2024-10-31 14:36:09 +08:00
parent 8427a61f4e
commit 9217ae0ae1
4 changed files with 48 additions and 76 deletions
--- a/src/components/table/fieldRender/index.vue
+++ b/src/components/table/fieldRender/index.vue
@@ -3,23 +3,13 @@
    <Icon class="ba-icon-dark" v-if="field.render == 'icon'" :name="fieldValue ? fieldValue : field.default ?? ''" />

    <!-- switch -->
-    <el-switch
-        v-if="field.render == 'switch'"
-        @change="onChangeField"
-        :model-value="fieldValue.toString()"
-        :loading="row.loading"
-        active-value="1"
-        inactive-value="0"
-    />
+    <el-switch v-if="field.render == 'switch'" @change="onChangeField" :model-value="fieldValue.toString()"
+        :loading="row.loading" active-value="1" inactive-value="0" />

    <!-- image -->
    <div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
-        <el-image
-            :hide-on-click-modal="true"
-            :preview-teleported="true"
-            :preview-src-list="[fullUrl(fieldValue)]"
-            :src="fullUrl(fieldValue)"
-        ></el-image>
+        <el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fullUrl(fieldValue)]"
+            :src="fullUrl(fieldValue)"></el-image>
    </div>

    <!-- tag -->
@@ -40,54 +30,29 @@
    </div>

    <!-- customTemplate 自定义模板 -->
-    <div
-        v-if="field.render == 'customTemplate'"
-        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
-    ></div>
+    <div v-if="field.render == 'customTemplate'"
+        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>

    <!-- 自定义组件/函数渲染 -->
-    <component
-        v-if="field.render == 'customRender'"
-        :is="field.customRender"
-        :renderRow="row"
-        :renderField="field"
-        :renderValue="fieldValue"
-        :renderColumn="column"
-        :renderIndex="index"
-    />
+    <component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
+        :renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />

    <!-- 按钮组 -->
    <div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
        <template v-for="(btn, idx) in buttons" :key="idx">
            <!-- 常规按钮 -->
-            <el-button
-                link
-                v-if="btn.render == 'basicButton'"
-                @click="onButtonClick(btn)"
-                :class="btn.class"
-                class="table-operate"
-                :type="btn.type"
-                :loading="props.row.loading || false"
-                v-bind="btn.attr"
-            >
+
+            <el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
+                class="table-operate" :type="btn.type" :loading="props.row[btn.loading] || props.row.loading || false"
+                v-bind="btn.attr">
                <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
            </el-button>

            <!-- 带提示信息的按钮 -->
-            <el-tooltip
-                v-if="btn.render == 'tipButton'"
-                :disabled="btn.title && !btn.disabledTip ? false : true"
-                :content="btn.title"
-                placement="top"
-            >
-                <el-button
-                    link
-                    @click="onButtonClick(btn)"
-                    :class="btn.class"
-                    class="table-operate"
-                    :type="btn.type"
-                    v-bind="btn.attr"
-                >
+            <el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
+                :content="btn.title" placement="top">
+                <el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
+                    v-bind="btn.attr">
                    <div v-if="btn.text || btn.title" class="table-operate-text">
                        {{ btn.text || btn.title }}
                    </div>
@@ -95,12 +60,8 @@
            </el-tooltip>

            <!-- 带确认框的按钮 -->
-            <el-popconfirm
-                v-if="btn.render == 'confirmButton'"
-                :disabled="btn.disabled && btn.disabled(row, field)"
-                v-bind="btn.popconfirm"
-                @confirm="onButtonClick(btn)"
-            >
+            <el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
+                v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
                <template #reference>
                    <div style="display: inline-block">
                        <el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
@@ -118,14 +79,9 @@
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
-                        <el-dropdown-item
-                            v-for="item in btn.buttons"
-                            :key="item.text"
-                            :command="item"
-                            :style="{
+                        <el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item" :style="{
                            color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
-                            }"
-                        >
+                        }">
                            {{ item.text }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
@@ -225,29 +181,36 @@ const handlerCommand = (item: OptButton) => {
 .m-10 {
    margin: 4px;
 }
+
 .ba-render-image {
    text-align: center;
 }
+
 .images-item {
    width: 50px;
    margin: 0 5px;
 }
+
 .el-image {
    height: 36px;
    width: 36px;
 }
+
 .table-operate-text {
    padding-left: 5px;
    font-size: 12px;
 }
+
 .table-operate {
    padding: 4px 5px;
    height: auto;
 }
+
 .cn-render-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
+
    .icon {
        font-size: 12px !important;
        // color: var(--ba-bg-color-overlay) !important;
@@ -257,18 +220,22 @@ const handlerCommand = (item: OptButton) => {
 .move-button {
    cursor: move;
 }
+
 .ml-6 {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
 }
-.ml-6 + .el-button {
+
+.ml-6+.el-button {
    margin-left: 6px;
 }
+
 .ba-render-color {
    height: 25px;
    width: 100%;
 }
+
 .cn-render-buttons {
    :deep(.el-button) {
        margin-left: 0;
--- a/src/views/govern/alarm/Transient.vue
+++ b/src/views/govern/alarm/Transient.vue
@@ -122,18 +122,19 @@ const tableStore = new TableStore({
                    type: 'primary',
                    icon: 'el-icon-DataLine',
                    render: 'basicButton',
+                    loading: 'loading1',
                    disabled: row => {
                        return !row.wavePath && row.evtParamTm < 20
                    },
                    click: async row => {
-                        row.loading = true
+                        row.loading1 = true
                        boxoList.value = row
                        boxoList.value.systemType = 'WX'
                        boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? (row.evtParamVVaDepth - 0) : null
                        boxoList.value.persistTime = row.evtParamTm != '-' ? (row.evtParamTm - 0) : null
                        await analyseWave(row.id)
                            .then(res => {
-                                row.loading = false
+                                row.loading1 = false
                                if (res != undefined) {
                                    wp.value = res.data
                                    view.value = false
@@ -141,7 +142,7 @@ const tableStore = new TableStore({
                                }
                            })
                            .catch(() => {
-                                row.loading = false
+                                row.loading1 = false
                            })
                    }
                },
@@ -150,18 +151,19 @@ const tableStore = new TableStore({
                    title: '波形下载',
                    type: 'primary',
                    icon: 'el-icon-Check',
+                    loading: 'loading2',
                    render: 'basicButton',
                    disabled: row => {
                        // && row.evtParamTm < 20
                        return !row.wavePath
                    },
                    click: row => {
-                        row.loading = true
+                        row.loading2 = true
                        const url = window.location.origin + '/api/cs-harmonic-boot/event/getFileZip?eventId=' + row.id
                        window.open(url, '_self')
                        setTimeout(() => {
                            ElMessage.success('波形下载成功！')
-                            row.loading = false
+                            row.loading2 = false
                        }, 1500)
                    }
                },
--- a/src/views/govern/device/control/tabs/event.vue
+++ b/src/views/govern/device/control/tabs/event.vue
@@ -83,16 +83,17 @@ const tableStore: any = new TableStore({
                    type: 'primary',
                    icon: 'el-icon-Check',
                    render: 'basicButton',
+                    loading:'loading1',
                    disabled: row => {
                        // && row.evtParamTm < 20
                        return !row.wavePath
                    },
                    click: async row => {
-                        row.loading = true
+                        row.loading1 = true

                        await analyseWave(row.id)
                            .then(res => {
-                                row.loading = false
+                                row.loading1 = false
                                if (res != undefined) {
                                    boxoList.value = row
                                    boxoList.value.systemType = 'WX'
@@ -102,7 +103,7 @@ const tableStore: any = new TableStore({
                                }
                            })
                            .catch(() => {
-                                row.loading = false
+                                row.loading1 = false
                            })
                        isWaveCharts.value = true
                        nextTick(() => {
@@ -124,6 +125,7 @@ const tableStore: any = new TableStore({
                    name: 'edit',
                    title: '波形下载',
                    type: 'primary',
+                    loading:'loading2',
                    icon: 'el-icon-Check',
                    render: 'basicButton',
                    disabled: row => {
@@ -131,12 +133,12 @@ const tableStore: any = new TableStore({
                        return !row.wavePath
                    },
                    click: row => {
-                        row.loading = true
+                        row.loading2 = true
                        const url = window.location.origin + '/api/cs-harmonic-boot/event/getFileZip?eventId=' + row.id
                        window.open(url, '_self')
                        setTimeout(() => {
                            ElMessage.success('波形下载成功！')
-                            row.loading = false
+                            row.loading2 = false
                        }, 1500)
                    }
                }
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -81,6 +81,7 @@ declare global {
        title?: string
        text?: string
        class?: string
+        loading?: string
        type: ButtonType
        icon: string
        popconfirm?: Partial<Mutable<PopconfirmProps>>