記錄vxe-table合併單元格

<script setup lang='ts' name="policy-area">
import { addPolicyArea, deletePolicyArea, getPolicyAreaDetail, queryAreaPolicyList, queryConditionList, queryMaterialList, queryPolicyKindList, queryPolicyResultList, queryPolicyResultValueList, queryRegionList, updatePolicyArea, updatePolicyAreaStatus } from '@fl/api/xf-api/xf-manage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep, result } from 'lodash-es'
import { onMounted, onUnmounted, reactive, ref } from 'vue'

const stateOptions = ref([
    {
        label: '全部',
        value: 'all',
    },
    {
        label: '啟用',
        value: 1,
    },
    {
        label: '禁用',
        value: 0,
    },
])

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    totalResult: 0,
})

function handlePageChange({ currentPage, pageSize }) {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    queryTableData()
}

const loading = ref(true)
const policyDialog = ref(null)
const dialogVisible = ref(false)
const dialogTitle = ref('新增政策')

const addFormRef = ref(null)
const addForm = reactive({
    areaId: '',
    areaName: '',
    materials: [],
    policyConfig: [{}],
    policyId: '',
    policyName: '',
    policyTime: [],
})

type queryForm = {
    areaId?: number | string
    areaName?: string
    policyName?: string
    status?: number | string
}

const form = reactive<queryForm>({
    areaName: '',
    policyName: '',
    status: 'all',
})

function resetForm() {
    form.areaName = '全武漢'
    form.areaId = 'wuhan'
    form.policyName = ''
    form.status = 'all'
    tablePage.currentPage = 1
    queryTableData()
}

const policyTableData = ref([])
const tagNameOptions = ref([])

function statusChange() {
    tablePage.currentPage = 1
    queryTableData()
}

async function queryTableData() {
    tagNameOptions.value = []
    const { code, data, msg } = await queryAreaPolicyList({
        areaName: form.areaName != '全武漢' ? form.areaName : undefined,
        delFlag: form.status !== 'all' ? form.status : undefined,
        pageNum: tablePage.currentPage,
        pageSize: tablePage.pageSize,
        policyName: form.policyName ? form.policyName : undefined,
    })
    if (code === 200) {
        const records = data.records || []
        const initList = []
        const rowArray = []
        let initIndex = 0
        let mergeList = []
        mergeCells.value = []
        records.forEach((item, index) => {
            if (item.options) {
                item.options.forEach((option) => {
                    const it = {
                        ...option,
                        ...item,

                    }
                    initList.push(it)
                })

                if (item.options.length > 1 && index < 10) {
                    rowArray.push([initIndex, item.options.length])
                    initIndex = initIndex + item.options.length
                }
                else {
                    {
                        initIndex = initIndex + 1
                    }
                }
            }
        })
        rowArray.forEach((r) => {
            const tempArray = [
                { col: 0, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 1, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 2, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 8, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 9, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 10, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 11, colspan: 1, row: r[0], rowspan: r[1] },
                { col: 12, colspan: 1, row: r[0], rowspan: r[1] },
            ]
            mergeList = mergeList.concat(tempArray)
        })
        mergeCells.value = mergeList
        policyTableData.value = []
        policyTableData.value = initList
        tablePage.totalResult = data.total
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

const mergeCells = ref(
    [
    /* { row: 4, col: 0, rowspan: 5, colspan: 1 },
    { row: 4, col: 1, rowspan: 5, colspan: 1 },
    { row: 4, col: 2, rowspan: 5, colspan: 1 },
    { row: 4, col: 8, rowspan: 5, colspan: 1 },
    { row: 4, col: 9, rowspan: 5, colspan: 1 },
    { row: 4, col: 10, rowspan: 5, colspan: 1 },
    { row: 4, col: 11, rowspan: 5, colspan: 1 },
    { row: 4, col: 12, rowspan: 5, colspan: 1 },
    { row: 11, col: 0, rowspan: 2, colspan: 1 },
    { row: 11, col: 1, rowspan: 2, colspan: 1 },
    { row: 11, col: 2, rowspan: 2, colspan: 1 },
    { row: 11, col: 8, rowspan: 2, colspan: 1 },
    { row: 11, col: 9, rowspan: 2, colspan: 1 },
    { row: 11, col: 10, rowspan: 2, colspan: 1 },
    { row: 11, col: 11, rowspan: 2, colspan: 1 },
    { row: 11, col: 12, rowspan: 2, colspan: 1 } */
    ],
)

function policyNameChange(val) {
    queryTableData()
}

function remoteQueryProject(queryString, cb) {
    const results = queryString
        ? policyOptions.value.filter((item) => {
            return item.kindName.toLowerCase().includes(queryString.toLowerCase())
        })
        : policyOptions.value

    cb(results)
    // return results
}

const xTable1 = ref(null)
const isViewFlag = ref(false)

const childCols = [
    { field: 'conditionName', minWidth: 60, title: '選項' },
    { field: 'resultName', title: '優惠型別' },
    { field: 'resultNum', title: '優惠數值' },
    { field: 'optionNotes', minWidth: 60, title: '備註' },
    { field: 'subsidyCap', title: '補貼上限(元)' },
]

// 區域資訊獲取
const districtTypes = ref([{ id: 'wuhan', name: '全武漢' }])
function getRegions() {
    queryRegionList().then((res: any) => {
        if (res.code === 200) {
            if (res.data) {
                districtTypes.value = districtTypes.value.concat(res.data)
            }
        }
    }).catch((error) => {
        ElMessage.error(error.msg)
    })
}

function changeArea(val) {
    if (val) {
        const areaItem = districtTypes.value.find((item) => {
            return item?.id === val
        })
        addForm.areaName = areaItem.name
    }
}

function changeResult(val, index) {
    addForm.policyConfig[index].resultNumId = ''
    policyResultValueOptions.value[index] = []
    if (val) {
        const choseItem = policyResultOptions.value.find((item) => {
            return item?.id === val
        })
        addForm.policyConfig[index].resultName = choseItem.resultContent

        queryPolicyResultValueData(choseItem.id, index)
    }
}

function changeResultNum(val, index) {
    if (val) {
        const choseItem = policyResultValueOptions.value[index].find((item) => {
            return item?.id === val
        })
        addForm.policyConfig[index].resultNum = choseItem.resultNum
    }
}

function changeCondition(val, index) {
    if (val) {
        const it = conditionOptions.value.find((item) => {
            return item?.id === val
        })
        addForm.policyConfig[index].conditionName = it.conditionContent
    }
}

function changePolicy(val) {
    if (val) {
        const it = policyOptions.value.find((item) => {
            return item?.id === val
        })
        addForm.policyName = it.kindName
        addForm.policyConfig.map((item) => {
            item.conditionId = ''
            item.conditionName = ''
            item.resultId = ''
            item.resultNumId = ''
            return item
        })
    }
    else {
        conditionOptions.value = []
        addForm.policyConfig.map((item) => {
            item.conditionId = ''
            item.conditionName = ''
            item.resultId = ''
            item.resultNumId = ''
            return item
        })
    }
    queryPolicyConditionData()
    queryPolicyResultData()
}

function deleteRow(row) {
    ElMessageBox.confirm(
        `是否確認刪除此記錄`,
        '系統提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '確認',
            type: 'warning',
        },
    )
        .then(() => {
            deletePolicyArea(JSON.stringify([row.id])).then((res) => {
                if (res.code === 200) {
                    ElMessage.success('操作成功')
                    setTimeout(() => {
                        queryTableData()
                    }, 500)
                }
                else {
                    ElMessage.error(res.msg)
                }
            })
            doSearch()
        })
}

const materialsOptions = ref([])
function changeMaterials(val) {

}

function addRow() {
    dialogTitle.value = '新增政策'
    dialogVisible.value = true
    queryPolicyOptionsData()
    queryPolicyMaterialData()
}

function editRow(oldRow, type) {
    if (type === 1) {
        isViewFlag.value = true
        dialogTitle.value = '檢視政策'
    }
    else {
        dialogTitle.value = '修改政策'
        isViewFlag.value = false
    }
    const row = cloneDeep(oldRow)
    addForm.id = row.id
    addForm.areaId = row.areaId
    addForm.areaName = row.areaName
    addForm.areaName = row.areaName
    addForm.policyId = row.policyId
    addForm.policyName = row.policyName
    addForm.policyTime = [row.policyStartTime, row.policyEndTime]
    const materials = []
    row.materials.forEach((item) => {
        materials.push(item.id)
    })
    addForm.materials = materials
    addForm.policyConfig = row.options
    if (addForm.policyConfig) {
        addForm.policyConfig.forEach((item, index) => {
            queryPolicyResultValueData(item.resultId, index)
        })
    }
    dialogVisible.value = true
    queryPolicyOptionsData()
    queryPolicyMaterialData()
    queryPolicyConditionData()
    queryPolicyResultData()
}

function closeDialog() {
    isViewFlag.value = false
    resetAddForm()
}

function resetAddForm() {
    addForm.id = ''
    addForm.policyId = ''
    addForm.policyName = ''
    addForm.areaId = ''
    addForm.areaName = ''
    addForm.materials = []
    addForm.policyConfig = [{}]
    addForm.policyTime = []
    dialogVisible.value = false
    conditionOptions.value = []
    policyResultOptions.value = []
    policyResultValueOptions.value = []
}

const policyOptions = ref([])
const formateType = ref<string>('YYYY-MM-DD')

function addPolicyItem() {
    const item = {}
    addForm?.policyConfig?.push(item)
}

function removePolicyItem(index) {
    if (addForm?.policyConfig?.length > 1) {
        addForm?.policyConfig?.splice(index, 1)
    }
    else {
        ElMessage.warning('新增政策時,至少保留一項')
    }
}

async function queryPolicyMaterialData() {
    const { code, data, msg } = await queryMaterialList({
        pageNum: 1,
        pageSize: 100,
    })
    if (code === 200) {
        const records = data.records || []
        materialsOptions.value = records
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

async function queryPolicyOptionsData() {
    const { code, data, msg } = await queryPolicyKindList({
        pageNum: 1,
        pageSize: 100,
    })
    if (code === 200) {
        const records = data.records || []
        policyOptions.value = records
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

const conditionOptions = ref([])
async function queryPolicyConditionData() {
    const { code, data, msg } = await queryConditionList({
        pageNum: 1,
        pageSize: 100,
        policyId: addForm.policyId,
    })
    if (code === 200) {
        const records = data.records || []
        conditionOptions.value = records
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

const policyResultOptions = ref([])
async function queryPolicyResultData() {
    const { code, data, msg } = await queryPolicyResultList({
        pageNum: 1,
        pageSize: 100,
        policyId: addForm.policyId,
    })
    if (code === 200) {
        const records = data.records || []
        policyResultOptions.value = records
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

const policyResultValueOptions = ref([])
async function queryPolicyResultValueData(resultId, index) {
    const { code, data, msg } = await queryPolicyResultValueList({
        pageNum: 1,
        pageSize: 100,
        policyId: addForm.policyId,
        resultId,
    })
    if (code === 200) {
        const records = data.records || []
        policyResultValueOptions.value[index] = records
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

async function switchState(val, row) {
    if (row.id === null)
        return false
    const result = await updatePolicyAreaStatus({ delFlag: row.delFlag, id: row.id })
    if (result.code === 200) {
        if (row.delFlag === '1') {
            ElMessage.success('政策選項已啟用')
        }
        else {
            ElMessage.success('政策選項已禁用')
        }

        queryTableData()
    }
    else {
        ElMessage.warning(result.msg)
    }
}

async function savePolicyArea() {
    addFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            let isPass = true
            if (addForm.policyConfig) {
                addForm.policyConfig.forEach((policyItem) => {
                    if (!policyItem.conditionId || !policyItem.resultId || !policyItem.resultNumId) {
                        isPass = false
                        return false
                    }
                })
            }

            if (!isPass) {
                ElMessage.warning('請完善條件必填項資訊')
                return false
            }

            let materials = []
            if (addForm.materials) {
                materials = materialsOptions.value.filter((item) => {
                    if (addForm.materials.includes(item.id)) {
                        return item
                    }
                })
            }

            const params = {
                areaId: addForm.areaId,
                areaName: addForm.areaName,
                id: addForm.id ? addForm.id : undefined,
                materials,
                options: addForm.policyConfig,
                policyEndTime: addForm.policyTime[1],
                policyId: addForm.policyId,
                policyName: addForm.policyName,
                policyStartTime: addForm.policyTime[0],
            }
            let result = null
            if (addForm.id) {
                result = await updatePolicyArea(params)
            }
            else {
                result = await addPolicyArea(params)
            }

            if (result.code === 200) {
                closeDialog()
                ElMessage.success('操作成功')
                queryTableData()
            }
            else {
                ElMessage.warning(result.msg)
            }
        }
        else {
            // ElMessage.warning('請填寫必填項')
            return false
        }
    })
}

const rules = reactive({
    areaId: [{
        message: '請選擇區域',
        required: true,
        trigger: 'change',
    }],
    materials: [
        { message: '請選擇所需材料', required: true, trigger: 'change' },
    ],
    policyConfig: [{
        message: '請選擇條件',
        required: true,
        trigger: 'change',
    }],
    policyId: [
        { message: '請選擇政策種類', required: true, trigger: 'change' },
    ],
    policyTime: [
        { message: '請選擇政策生效日期', required: true, trigger: 'change' },
    ],
})

function doSearch() {
    queryTableData()
}

onMounted(() => {
    queryTableData()
    queryPolicyOptionsData()
    getRegions()
})

onUnmounted(() => {
    policyTableData.value = []
})
</script>

<template>
    <el-card style="padding-bottom:60px">
        <div style="height: 560px;padding-bottom:20px">
            <el-form :inline="true"
                     :model="form"
                     label-width="100"
                     class="query_form"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="政策名稱"
                                      prop="policyName"
                        >
                            <el-autocomplete v-model="form.policyName"
                                             clearable
                                             :fetch-suggestions="remoteQueryProject"
                                             class="inline-input w-50"
                                             value-key="kindName"
                                             placeholder="請輸入政策名稱"
                                             @select="policyNameChange"
                                             @clear="policyNameChange"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="區域">
                            <el-row style="width:100% !important;">
                                <el-col>
                                    <el-select v-model="form.areaName"
                                               class="m-2"
                                               placeholder="請選擇區域"
                                               @change="policyNameChange"
                                    >
                                        <el-option v-for="item in districtTypes"
                                                   :key="item.id"
                                                   :value="item.name"
                                                   :label="item.name"
                                        />
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="狀態"
                                      prop="status"
                        >
                            <el-radio-group v-model="form.status"
                                            @change="statusChange"
                            >
                                <el-radio v-for="item in stateOptions"
                                          :key="item.value"
                                          :label="item.value"
                                >
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        <!-- <el-select v-model="form.state"
                                   placeholder="請選擇狀態"
                                   clearable
                        >
                            <el-option v-for="item in stateOptions"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select> -->
                        </el-form-item>
                    </el-col>

                    <el-col :span="4"
                            style="text-align: right;"
                    >
                        <el-button type="primary"
                                   @click="doSearch()"
                        >
                            搜尋
                        </el-button>

                        <el-button @click="resetForm">
                            重置
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-row style="width:100%;justify-content: start;">
                <el-button type="primary"
                           class="mb-10"
                           @click="addRow"
                >
                    + 新建
                </el-button>
            </el-row>

            <el-scrollbar>
                <vxe-table ref="xTable1"
                           :data="policyTableData"
                           :height="480"
                           :show-header="true"
                           :merge-cells="mergeCells"
                           stripe
                           :border="true"
                           :loading="loading"
                           :row-config="{ isHover: true }"
                           :tooltip-config="{ zIndex: 9999 }"
                >
                    <!-- title="全選"
                    <vxe-column type="id"
                                field="id"
                                title="政策ID"
                                width="80"
                                show-overflow="tooltip"
                    /> -->

                    <vxe-column type="policyName"
                                field="policyName"
                                title="政策名稱"
                                min-width="160"
                                show-overflow="tooltip"
                    />

                    <vxe-column type="areaName"
                                field="areaName"
                                title="區域"
                                min-width="100"
                                show-overflow="tooltip"
                    />

                    <vxe-column field="conditionName"
                                title="選項"
                                min-width="180"
                                align="center"
                                show-overflow="tooltip"
                    />

                    <vxe-column field="resultName"
                                title="優惠型別"
                                min-width="100"
                                align="center"
                                show-overflow="tooltip"
                    />

                    <vxe-column field="policyAreaDiscount"
                                title="優惠數值"
                                min-width="150"
                                align="center"
                                show-overflow="tooltip"
                    />

                    <vxe-column field="optionNotes"
                                title="備註"
                                min-width="100"
                                align="center"
                                show-overflow="tooltip"
                    />

                    <vxe-column field="subsidyCap"
                                title="補貼上限(元)"
                                min-width="120"
                                align="center"
                                show-overflow="tooltip"
                    />

                    <vxe-column type="applyHouseNum"
                                field="applyHouseNum"
                                title="適用樓盤數量"
                                width="120"
                                align="center"
                                show-overflow="tooltip"
                    />

                    <vxe-column title="適用樓盤"
                                show-overflow="tooltip"
                                min-width="200"
                                align="center"
                    >
                        <template #default="{ row }">
                            <span v-for="it in row.applyHouse"
                                  :key="it.id"
                            >{{ it.xmmc }},</span>
                        </template>
                    </vxe-column>

                    <vxe-column type="delFlag"
                                field="delFlag"
                                width="100"
                                title="狀態"
                    >
                        <template #default="{ row }">
                            <el-switch v-model="row.delFlag"
                                       active-value="1"
                                       inactive-value="0"
                                       @change="switchState($event, row)"
                            />
                        </template>
                    </vxe-column>

                    <vxe-column title="政策生效日期"
                                width="200"
                    >
                        <template #default="{ row }">
                            {{ `${row.policyStartTime} 至 ${row.policyEndTime}` }}
                        </template>
                    </vxe-column>

                    <vxe-column title="操作"
                                fixed="right"
                                width="160"
                    >
                        <template #default="{ row }">
                            <vxe-button mode="text"
                                        @click="editRow(row, 1)"
                            >
                                檢視
                            </vxe-button>

                            <vxe-button mode="text"
                                        style="color:#da0004"
                                        @click="editRow(row, 2)"
                            >
                                修改
                            </vxe-button>

                            <!-- <vxe-button mode="text"
                                        @click="deleteRow(row)"
                            >
                                刪除
                            </vxe-button> -->
                        </template>
                    </vxe-column>
                </vxe-table>

                <vxe-pager :loading="loading"
                           :current-page="tablePage.currentPage"
                           :page-size="tablePage.pageSize"
                           :total="tablePage.totalResult"
                           :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                           @page-change="handlePageChange"
                />
            </el-scrollbar>
        </div>

        <el-dialog ref="policyDialog"
                   v-model="dialogVisible"
                   :title="dialogTitle"
                   class="policy-dialog"
                   width="80%"
                   draggable
                   :destroy-on-close="true"
                   @close="closeDialog"
        >
            <el-form ref="addFormRef"
                     :model="addForm"
                     :rules="rules"
                     label-width="110px"
                     :validate-on-rule-change="false"
            >
                <el-form-item label="政策選擇"
                              prop="policyId"
                >
                    <el-col :span="12">
                        <el-select v-model="addForm.policyId"
                                   :disabled="isViewFlag"
                                   placeholder="請選擇"
                                   clearable
                                   @change="changePolicy($event, index)"
                        >
                            <el-option v-for="item in policyOptions"
                                       :key="item.id"
                                       :label="item.kindName"
                                       :value="item.id"
                            />
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="區域"
                              prop="areaId"
                >
                    <el-col :span="12">
                        <el-select v-model="addForm.areaId"
                                   :disabled="isViewFlag"
                                   placeholder="請選擇區域"
                                   clearable
                                   @change="changeArea($event, index)"
                        >
                            <el-option v-for="item in districtTypes"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.id"
                            />
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="政策有效日期"
                              prop="policyTime"
                >
                    <el-col :span="12">
                        <el-date-picker v-model="addForm.policyTime"
                                        type="daterange"
                                        start-placeholder="開始日期"
                                        end-placeholder="結束日期"
                                        :format="formateType"
                                        :value-format="formateType"
                                        placeholder="選擇開始日期"
                                        :disabled="isViewFlag"
                        />
                    </el-col>
                </el-form-item>

                <el-form-item label="所需材料"
                              prop="materials"
                >
                    <el-col :span="12">
                        <el-select v-model="addForm.materials"
                                   :disabled="isViewFlag"
                                   multiple
                                   placeholder="請選擇所需材料(可多選)"
                                   clearable
                                   @change="changeMaterials($event, index)"
                        >
                            <el-option v-for="item in materialsOptions"
                                       :key="item.id"
                                       :label="item.materialName"
                                       :value="item.id"
                            />
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="條件"
                              prop="policyConfig"
                >
                    <template v-if="addForm.policyConfig?.length > 0">
                        <el-row v-for="(it, index) in addForm.policyConfig"
                                :key="index"
                                mb-8
                                w-full
                        >
                            <el-col :span="3">
                                <el-select v-model="addForm.policyConfig[index].conditionId"
                                           placeholder="請選擇"
                                           :disabled="isViewFlag"
                                           clearable
                                           @change="changeCondition($event, index)"
                                >
                                    <el-option v-for="item in conditionOptions"
                                               :key="item.id"
                                               :label="item.conditionContent"
                                               :value="item.id"
                                    />
                                </el-select>
                            </el-col>

                            <el-col :span="4">
                                <el-select v-model="addForm.policyConfig[index].resultId"
                                           placeholder="請選擇"
                                           :disabled="isViewFlag"
                                           clearable
                                           @change="changeResult($event, index)"
                                >
                                    <el-option v-for="item in policyResultOptions"
                                               :key="item.id"
                                               :label="item.resultContent"
                                               :value="item.id"
                                    />
                                </el-select>
                            </el-col>

                            <el-col :span="4">
                                <el-select v-model="addForm.policyConfig[index].resultNumId"
                                           placeholder="請選擇"
                                           :disabled="isViewFlag"
                                           clearable
                                           @change="changeResultNum($event, index)"
                                >
                                    <el-option v-for="item in policyResultValueOptions[index]"
                                               :key="item.id"
                                               :label="item.showValue"
                                               :value="item.id"
                                    />
                                </el-select>
                            </el-col>

                            <el-col :span="5">
                                <el-input v-model="addForm.policyConfig[index].optionNotes"
                                          :disabled="isViewFlag"
                                          placeholder="請輸入備註"
                                          clearable
                                />
                            </el-col>

                            <el-col :span="6">
                                <el-input-number v-model="addForm.policyConfig[index].subsidyCap"
                                                 :disabled="isViewFlag"
                                                 style="width:100%"
                                                 :controls="false"
                                                 placeholder="補貼上限數額(單位:元),請輸入數字)"
                                                 clearable
                                />
                            </el-col>

                            <el-col v-if="!isViewFlag"
                                    :span="2"
                                    class="operate-icon"
                            >
                                <el-icon @click="addPolicyItem()">
                                    <CirclePlusFilled />
                                </el-icon>

                                <el-icon @click="removePolicyItem(index)">
                                    <RemoveFilled />
                                </el-icon>
                            </el-col>
                        </el-row>
                    </template>
                </el-form-item>
            </el-form>

            <template v-if="!isViewFlag"
                      #footer
            >
                <span class="dialog-footer">
                    <el-button @click="closeDialog">取消</el-button>

                    <el-button type="primary"
                               @click="savePolicyArea"
                    >
                        確定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="scss" scoped>
.query_form {
    :deep(.el-form-item) {
        width: 100%;
    }
    :deep(.el-form-item__content) {
        width: 100%;
    }
    :deep(.el-radio) {
        margin-right: 12px;
    }
}
:deep() {
    --vxe-primary-color: #da0004;
    --vxe-loading-color: #da0004;
}

:deep(.vxe-table--render-default .vxe-body--row.row--stripe) {
    background-color: #fff !important;
}

.operate-icon {
    display: flex;
    align-items: center;
    .el-icon {
        font-size: 24px;
        margin-left: 10px;
        cursor: pointer;
        color: #da0004;
    }
}

:deep(.vxe-pager--btn-wrapper .vxe-pager--num-btn.is--active) {
    color: #fff;
}
</style>