|
@@ -125,6 +125,10 @@
|
|
|
</div>
|
|
|
<div class="middlebox-right">
|
|
|
<div class="middlebox-right-title">共有<span class="middlebox-right-num">45</span>条数据</div>
|
|
|
+ <div class="exportbtn">
|
|
|
+ <el-button type="success" plain @click="exportstate=true">导出数据到Execl</el-button>
|
|
|
+ <!-- <el-button type="success" plain disabled>导出数据到Execl</el-button> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -139,6 +143,35 @@
|
|
|
<div v-else-if="showState==='details'">
|
|
|
<Details @myback="changStateshow"></Details>
|
|
|
</div>
|
|
|
+ <div class="dialog-filter" v-if="exportstate">
|
|
|
+ <el-dialog v-model="exportstate" title="筛选导出" width="35%">
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <div class="selectbox-ck">
|
|
|
+ <div class="check-selectbox-item" v-for="(item,index) in exportStandard" :key="index">
|
|
|
+ <el-checkbox :label="item.key">
|
|
|
+ <span>{{item.title}}:</span>
|
|
|
+ <el-select v-model="item.value" placeholder="请选择范围" filterable @blur="selectBlur($event)" clearable v-if="checkList.includes(item.key)">
|
|
|
+ <el-option v-for="(items,index) in item.option" :key="index" :label="items.name" :value="items.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="item.value" placeholder="请选择范围" filterable disabled v-else-if="!checkList.includes(item.key)">
|
|
|
+ <el-option v-for="(items,index) in item.option" :key="index" :label="items.name" :value="items.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="exportstate = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="exportstate = false">
|
|
|
+ 确认
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import option_cn from '@/static/regions/region_cn.json'
|
|
@@ -301,6 +334,39 @@ let province = function () {
|
|
|
console.log(province, '省')
|
|
|
/*地区相关配套json end*/
|
|
|
let changeHight = ref(56)
|
|
|
+let exportstate = ref(false)
|
|
|
+let dataForm = ref({
|
|
|
+ newData: '',
|
|
|
+ selectOption: [
|
|
|
+ {
|
|
|
+ value: 'Option1',
|
|
|
+ label: 'Option1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option2',
|
|
|
+ label: 'Option2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option3',
|
|
|
+ label: 'Option3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option4',
|
|
|
+ label: 'Option4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option5',
|
|
|
+ label: 'Option5',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+})
|
|
|
+let checkList = ref([])
|
|
|
+let exportStandard = ref([
|
|
|
+ { title: '参与人次', value: 0, key: 'personnum', option: [{ name: '小于50', value: '50' }, { name: '大于50,小于100', value: '50-100' }, { name: '大于100', value: '101' }, { name: '大于300', value: '301' }] },
|
|
|
+ { title: '授课时间', value: 0, key: 'classtime', option: [{ name: '小于等于45分钟', value: '45' }, { name: '大于45分钟,小于90分钟', value: '45-90' }, { name: '小于90分钟', value: '91' }] },
|
|
|
+ { title: 'T指标数', value: 0, key: 'Tnum', option: [{ name: '无绿灯', value: '0' }, { name: '单绿灯', value: '1' }, { name: '双绿灯', value: '2' }] },
|
|
|
+ { title: '授权类型', value: 0, key: 'powertype', option: [{ name: '全部', value: 'all' }, { name: '试用', value: 'test' }, { name: '已授权', value: 'power' }] },
|
|
|
+])
|
|
|
function changeState (value) {
|
|
|
console.log(value)
|
|
|
showState.value = 'details'
|
|
@@ -309,6 +375,9 @@ function changStateshow (value) {
|
|
|
console.log(value, '状态改变')
|
|
|
showState.value = value
|
|
|
}
|
|
|
+function selectBlur (e) {
|
|
|
+ dataForm.value.newData = e.target.value;
|
|
|
+}
|
|
|
watch(activeNames, (newdata) => {
|
|
|
if (newdata.length === 0) {
|
|
|
changeHight.value = 80
|
|
@@ -316,6 +385,9 @@ watch(activeNames, (newdata) => {
|
|
|
changeHight.value = 56
|
|
|
}
|
|
|
})
|
|
|
+watch(checkList, (newvalue) => {
|
|
|
+ console.log(newvalue)
|
|
|
+})
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.productbox {
|
|
@@ -394,6 +466,8 @@ watch(activeNames, (newdata) => {
|
|
|
font-size: 16px;
|
|
|
line-height: 48px;
|
|
|
padding-right: 1%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
}
|
|
|
.middlebox-right-num {
|
|
|
font-size: 18px;
|
|
@@ -415,6 +489,23 @@ watch(activeNames, (newdata) => {
|
|
|
padding-left: 1%;
|
|
|
text-align: left;
|
|
|
}
|
|
|
+.exportbtn {
|
|
|
+ margin-right: 2%;
|
|
|
+}
|
|
|
+.selectbox-ck {
|
|
|
+ width: 100%;
|
|
|
+ padding: 2%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.check-selectbox-item {
|
|
|
+ padding: 0.5% 1%;
|
|
|
+ margin-top: 2%;
|
|
|
+ box-shadow: 0 2px 5px #e9e9e9;
|
|
|
+ width: 50%;
|
|
|
+ border: 1px solid #e9e9e9;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.data-tables .header-class,
|
|
@@ -441,4 +532,8 @@ watch(activeNames, (newdata) => {
|
|
|
font-size: 16px;
|
|
|
padding-left: 0.5%;
|
|
|
}
|
|
|
+.dialog-filter .el-dialog__header,
|
|
|
+.dialog-filter .el-dialog__footer {
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
</style>
|