pqs-9100_client/frontend/src/views/machine/testScript/components/setValueTable.vue

import { ref } from "vue"

<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400">
        <div class="table-box">
            <ProTable
                ref="proTable"
                :columns="columns"
                :request-api="getTableList"
                :pagination="false"
                :toolButton="false"
                :style="{ height: '530px', maxHeight: '530px', overflow: 'hidden' }"
            >
                <!-- :data='testScriptData' 如果要显示静态数据，就切换该配置 -->
                <!-- 表格 header 按钮 -->
                <template #tableHeader="scope">
                    <el-button v-auth.testScript="'add'" type="primary" :icon="CirclePlus" @click="add">新增</el-button>
                    <el-button
                        v-auth.testScript="'delete'"
                        type="danger"
                        :icon="Delete"
                        plain
                        :disabled="!scope.isSelected"
                        @click="batchDelete(scope.selectedListIds)"
                    >
                        删除
                    </el-button>
                </template>
                <!-- 表格操作 -->
                <template #operation="scope">
                    <el-button
                        v-auth.testScript="'upgrade'"
                        type="primary"
                        v-if="scope.row.type !== 1"
                        link
                        :icon="Share"
                        @click="copy(scope.row)"
                    >
                        复制
                    </el-button>
                    <el-button
                        v-auth.testScript="'edit'"
                        type="primary"
                        link
                        :icon="EditPen"
                        :model-value="false"
                        @click="edit(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        v-auth.testScript="'delete'"
                        type="primary"
                        link
                        :icon="Delete"
                        @click="batchDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </ProTable>
        </div>

        <template #footer>
            <div>
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog :title="dialogTitle" v-model="showForm" @close="close" width="500">
        <el-form ref="form" :model="form" label-width="auto">
            <el-form-item label="参考设定值类型" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="参考设定值子类型" prop="standardName">
                <el-input v-model="form.standardName" />
            </el-form-item>
            <el-form-item label="参考设定值" prop="standardTime">
                <el-input v-model="form.standardTime" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </div>
        </template>
    </el-dialog>

    <SetValuePopup ref="setValuePopup" />
</template>

<script setup lang="ts">
import type { TestScript } from '@/api/device/interface/testScript'
import type { ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, EditPen, Delete, Share } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
const showForm = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')

// 表格配置项
const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
        prop: 'name',
        label: '参考设定值类型',
        minWidth: 350
    },
    {
        prop: 'standardName',
        label: '参考设定值子类型',
        minWidth: 150
    },
    {
        prop: 'standardTime',
        label: '参考设定值',
        minWidth: 150
    },
    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
const form = ref({
    name: 220,
    standardName: 0,
    standardTime: 0
})

// 打开弹窗，可能是新增，也可能是编辑
const open = (sign: string, row: any) => {
    dialogVisible.value = true
    dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
}
const save = () => {
    dialogVisible.value = false
}

// 关闭弹窗
const close = () => {
    dialogVisible.value = false
}
// 新增
const add = () => {
    showForm.value = true
}
//编辑
const edit = (row: any) => {}
// 复制
const copy = (row: any) => {}
//批量删除
const batchDelete = (row: any) => {}
// 对外映射
defineExpose({ open })
</script>

<style scoped></style>