133 lines
5.1 KiB
Vue
133 lines
5.1 KiB
Vue
|
<template>
|
||
|
|
<!-- 导出对话框 -->
|
||
|
|
<el-dialog :title="exportTitle" v-model="exportOpen" width="800px" class="my_dialog" align-center
|
||
|
|
:destroy-on-close="true" :close-on-click-modal="false">
|
||
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||
|
|
<el-tab-pane label="媒体基础信息" name="first">
|
||
|
|
<div class="my_dialog_itemHeader">
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="12">选择导出字段</el-col>
|
||
|
|
<el-col :span="12" style="text-align: right;">
|
||
|
|
<el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
|
||
|
|
@change="handleCheckAllChange">
|
||
|
|
全选
|
||
|
|
</el-checkbox>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
|
||
|
|
@change="handleCheckedCitiesChange">
|
||
|
|
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
|
||
|
|
{{ city.label }}
|
||
|
|
</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
|
||
|
|
<div class="my_dialog_itemHeader">附件选项</div>
|
||
|
|
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities2"
|
||
|
|
@change="handleCheckedCitiesChange2">
|
||
|
|
<el-checkbox v-for="city in cities2" :key="city.value" :label="city.label" :value="city.value">
|
||
|
|
{{ city.label }}
|
||
|
|
</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="媒体报价信息" name="second">
|
||
|
|
<div class="my_dialog_itemHeader">
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="12">选择导出字段</el-col>
|
||
|
|
<el-col :span="12" style="text-align: right;">
|
||
|
|
<el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
|
||
|
|
@change="handleCheckAllChange">
|
||
|
|
全选
|
||
|
|
</el-checkbox>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
|
||
|
|
@change="handleCheckedCitiesChange">
|
||
|
|
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
|
||
|
|
{{ city.label }}
|
||
|
|
</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button class="my-cancel-btn" @click="exportOpen = false">取 消</el-button>
|
||
|
|
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitExport">确 定</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script setup name="Post">
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
|
||
|
|
const exportTitle = ref('导出')
|
||
|
|
const exportOpen = ref(false)
|
||
|
|
const activeName = ref('first')
|
||
|
|
|
||
|
|
const checkAll = ref(false)
|
||
|
|
const isIndeterminate = ref(true)
|
||
|
|
const checkedCities = ref(['Shanghai'])
|
||
|
|
const cities = [
|
||
|
|
{ label: '字段名', value: 'Shanghai' },
|
||
|
|
{ label: '字段名', value: 'begnjing' },
|
||
|
|
{ label: '字段名', value: 'chongq' },
|
||
|
|
{ label: '字段名', value: 'sdag' },
|
||
|
|
{ label: '字段名', value: 'Shanghai1' },
|
||
|
|
{ label: '字段名', value: 'begnjing2' },
|
||
|
|
{ label: '字段名', value: 'chongq3' },
|
||
|
|
{ label: '字段名', value: 'sdag4' },
|
||
|
|
{ label: '字段名', value: 'Shanghai5' },
|
||
|
|
{ label: '字段名', value: 'begnjing6' },
|
||
|
|
{ label: '字段名', value: 'chongq7' },
|
||
|
|
{ label: '字段名', value: 'sdag8' },
|
||
|
|
{ label: '字段名', value: 'Shanghai9' },
|
||
|
|
{ label: '字段名', value: 'begnjing10' },
|
||
|
|
{ label: '字段名', value: 'chongq11' },
|
||
|
|
{ label: '字段名', value: 'sdag12' },
|
||
|
|
]
|
||
|
|
|
||
|
|
|
||
|
|
const checkedCities2 = ref([])
|
||
|
|
const cities2 = [
|
||
|
|
{ label: '包含附件', value: 'fujian' },
|
||
|
|
]
|
||
|
|
|
||
|
|
// 全选操作
|
||
|
|
const handleCheckAllChange = (val) => {
|
||
|
|
checkedCities.value = []
|
||
|
|
if (val) {
|
||
|
|
cities.forEach(element => {
|
||
|
|
checkedCities.value.push(element.value)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
isIndeterminate.value = false
|
||
|
|
}
|
||
|
|
// 单个选择字段
|
||
|
|
const handleCheckedCitiesChange = (value) => {
|
||
|
|
console.log('单选操作', value)
|
||
|
|
const checkedCount = value.length
|
||
|
|
checkAll.value = checkedCount === cities.length
|
||
|
|
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
|
||
|
|
}
|
||
|
|
// 选择附件
|
||
|
|
const handleCheckedCitiesChange2 = (value) => {
|
||
|
|
|
||
|
|
}
|
||
|
|
// 切换选项卡
|
||
|
|
const handleClick = (tab, event) => {
|
||
|
|
console.log(tab, event)
|
||
|
|
activeName.value = tab
|
||
|
|
}
|
||
|
|
const handleSubmitExport = () => {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// 暴露方法\属性给父组件
|
||
|
|
defineExpose({
|
||
|
|
exportOpen,
|
||
|
|
});
|
||
|
|
</script>
|