spider_creater/frontend/src/components/spider/RunSpiderDialog.vue

<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" destroy-on-close width="80%">
        <template #header="{ titleId, titleClass }">
            <div class="run-spider-css-header">
                <div class="header-left">
                    <span :id="titleId" :class="titleClass">{{ dialogTitle }}</span>
                </div>
                <div class="mark-container">
                    <el-button-group class="mark-buttons">
                        <el-button type="primary" :icon="Link" :disabled="savaButtonDisabled" @click="handleSave">保存</el-button>
                    </el-button-group>
                </div>
            </div>
        </template>
        <RunSpiderContent ref="runSpiderContent" @save="onContentSave" />
    </el-dialog>
</template>
<script setup>
import { ref, nextTick, computed } from 'vue';
import RunSpiderContent from "./RunSpider.vue"
import { useStore } from 'vuex';
import { USER_ROLE_ADMIN, USER_ROLE_DEVELOPER, USER_ROLE_REVIEWER } from '../../data/user'

const emit = defineEmits(['save'])
const props = defineProps({
  from: {
    type: String,
    default: ''
  }
})

const store = useStore();

const formData = ref({})

const dialogVisible = ref(false)
const runSpiderContent = ref({})
const dialogTitle = ref('调试/运行')

// 用户身份标识
const userRole = computed(() => store.getters.userRole)
const isDeveloper = computed(() => [USER_ROLE_DEVELOPER].includes(userRole.value))
const isReviewer = computed(() => [USER_ROLE_REVIEWER].includes(userRole.value))

// 待完成和未通过的爬虫可以保存，其他都不可以提交(并禁用保存按钮)
const canSubmitStatusArr = [0, 2]
const userSubmitRolePass = computed(() => isDeveloper.value || isReviewer.value)
const canSubmit = computed(() => {
  if (props.from === 'reviewList') {
    return userSubmitRolePass.value
  } else {
    return canSubmitStatusArr.includes(formData.value.state) && userSubmitRolePass.value
  }
})
const savaButtonDisabled = computed(() => !canSubmit.value)

const setPageData = (e) => {
    nextTick(() => {
        formData.value = e
        runSpiderContent.value.setPageData(e)
    })
}
const getPageData = () => {
    return runSpiderContent.value.getPageData()
}

const handleSave = () => {
    runSpiderContent.value.doSaveInfo()
}

const onContentSave = (e) => {
    emit('save', e)
}

defineExpose({
    dialogVisible,
    setPageData,
    getPageData,
})
</script>
<style scoped lang="scss">
.run-spider-css-header {
    display: flex;
}
.header-left {
    margin-right: 12px;
    display: flex;
    align-items: center;
}
</style>