|
|
@@ -133,9 +133,9 @@
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
<el-tab-pane label="搜索" name="first">
|
|
|
<div style="margin-bottom: 10px">
|
|
|
- <el-input v-model="input3" placeholder="Please input" class="input-with-select">
|
|
|
+ <el-input v-model="input3" placeholder="Please input" class="input-with-select" @change="inpChange" clearable >
|
|
|
<template #prepend>
|
|
|
- <el-select v-model="select" style="width: 100px">
|
|
|
+ <el-select v-model="select" style="width: 100px" @change="selChange">
|
|
|
<el-option label="名称" value="name" />
|
|
|
<el-option label="ASIN" value="asin" />
|
|
|
<el-option label="SKU" value="sku" />
|
|
|
@@ -150,7 +150,9 @@
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
- <el-table height="490" style="width: 100%"
|
|
|
+ <el-table
|
|
|
+ height="490"
|
|
|
+ style="width: 100%"
|
|
|
v-loading="loading"
|
|
|
:data="fullTableData"
|
|
|
:header-cell-style="headerCellStyle"
|
|
|
@@ -158,18 +160,32 @@
|
|
|
<el-table-column type="selection" width="50" />
|
|
|
<el-table-column prop="asin" label="ASIN" width="538">
|
|
|
<template #default="scope">
|
|
|
- <div>
|
|
|
- <!-- <el-image :preview-src-list="srcList"/> -->
|
|
|
- <el-tooltip class="box-item" effect="dark" :content=scope.row.title placement="top">
|
|
|
- <div class="single-line">{{ scope.row.title }}</div>
|
|
|
- </el-tooltip>
|
|
|
- <div>{{ scope.row.asin }}</div>
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <div style=" margin-right: 8px; line-height: normal;">
|
|
|
+ <el-image class="img-box" :src="scope.row.image_link" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
|
|
|
+ <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div class="data-color">
|
|
|
+ <span style="font-weight: 500; color: rgb(30, 33, 41);">${{ scope.row.price ? scope.row.price : '--' }}</span>
|
|
|
+ <span style="margin: 0 5px; color: #cacdd4;">|</span>
|
|
|
+ <span style="color: #6d7784;">{{ scope.row.quantity }}</span>
|
|
|
+ </div>
|
|
|
+ <span>ASIN:
|
|
|
+ <span class="data-color" style="margin-right: 8px;">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
|
|
|
+ </span>
|
|
|
+ <span>SKU:
|
|
|
+ <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="Name" width="120" align="right">
|
|
|
+ <el-table-column prop="name" label="Name" width="120" align="right">
|
|
|
<template #header>
|
|
|
- <el-button type="primary" size="normal" link @click="handleAdd">添加</el-button>
|
|
|
+ <el-button type="primary" size="normal" link @click="handleAdd">添加已选中</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -179,8 +195,7 @@
|
|
|
:current-page="currentPage"
|
|
|
:page-size="pageSize"
|
|
|
:total="totalItems"
|
|
|
- layout="prev, pager, next"
|
|
|
- />
|
|
|
+ layout="prev, pager, next" />
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="输入" name="second">
|
|
|
<el-input
|
|
|
@@ -218,23 +233,51 @@
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span>Card name</span>
|
|
|
- <el-button class="button" text>全部删除</el-button>
|
|
|
+ <el-button class="button" text @click="delAll">全部删除</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div> -->
|
|
|
<div class="card-body"></div>
|
|
|
<!-- <template #footer>Footer content</template> -->
|
|
|
</el-card>
|
|
|
- <div style="padding: 0 10px 0 10px; margin-top: -12px;">
|
|
|
- <el-table :data="fullTableData" height="420" style="width: 100%" :header-cell-style="headerCellStyle">
|
|
|
+ <div style="padding: 0 10px 0 10px; margin-top: -12px">
|
|
|
+ <el-table
|
|
|
+ :data="addedData"
|
|
|
+ height="520"
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ @selection-change="handleAddedChange">
|
|
|
<el-table-column type="selection" width="50" />
|
|
|
- <el-table-column prop="date" label="Date" width="538" />
|
|
|
- <el-table-column prop="name" label="Name" width="120" align="right">
|
|
|
- <template #header>
|
|
|
- <el-button type="primary" size="normal" link>删除</el-button>
|
|
|
+ <el-table-column prop="asin" label="ASIN" width="538">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <div style=" margin-right: 8px; line-height: normal;">
|
|
|
+ <el-image class="img-box" :src="scope.row.image_link" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
|
|
|
+ <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div class="data-color">
|
|
|
+ <span style="font-weight: 500; color: rgb(30, 33, 41);">${{ scope.row.price ? scope.row.price : '--' }}</span>
|
|
|
+ <span style="margin: 0 5px; color: #cacdd4;">|</span>
|
|
|
+ <span style="color: #6d7784;">{{ scope.row.quantity }}</span>
|
|
|
+ </div>
|
|
|
+ <span>ASIN:
|
|
|
+ <span class="data-color" style="margin-right: 8px;">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
|
|
|
+ </span>
|
|
|
+ <span>SKU:
|
|
|
+ <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="Name" width="120" align="right">
|
|
|
+ <template #header>
|
|
|
+ <el-button type="primary" size="normal" link @click="handleDel">删除已选中</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -253,359 +296,412 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, reactive, ref, computed } from 'vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
-import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
|
|
|
-import { Search } from '@element-plus/icons-vue'
|
|
|
-import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
-import { usePublicData } from '/@/stores/publicData'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
-import axios from 'axios'
|
|
|
-import { request } from '/@/utils/service'
|
|
|
-
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- setTableData()
|
|
|
- // const myTest = route.query
|
|
|
- // console.log('myTest', myTest)
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
-const router = useRouter()
|
|
|
-const route = useRoute()
|
|
|
-const shopInfo = useShopInfo()
|
|
|
-const publicData = usePublicData()
|
|
|
-const { dateRange } = storeToRefs(publicData)
|
|
|
-const { profile } = storeToRefs(shopInfo)
|
|
|
-const queryParams = ref({
|
|
|
- profileId: profile.value.profile_id,
|
|
|
- dateRange,
|
|
|
-})
|
|
|
-const loading = ref(true)
|
|
|
-
|
|
|
-let respData
|
|
|
-function setTableData() {
|
|
|
- return request({
|
|
|
- url: "/api/sellers/sellerlistings/",
|
|
|
+ import { onMounted, reactive, ref, computed } from 'vue'
|
|
|
+ import { useRoute } from 'vue-router'
|
|
|
+ import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
|
|
|
+ import { Search } from '@element-plus/icons-vue'
|
|
|
+ import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
+ import { usePublicData } from '/@/stores/publicData'
|
|
|
+ import { storeToRefs } from 'pinia'
|
|
|
+ import { useRouter } from 'vue-router'
|
|
|
+ import axios from 'axios'
|
|
|
+ import { request } from '/@/utils/service'
|
|
|
+
|
|
|
+
|
|
|
+ const router = useRouter()
|
|
|
+ const route = useRoute()
|
|
|
+ const shopInfo = useShopInfo()
|
|
|
+ const publicData = usePublicData()
|
|
|
+ const { dateRange } = storeToRefs(publicData)
|
|
|
+ const { profile } = storeToRefs(shopInfo)
|
|
|
+ const queryParams = ref({
|
|
|
+ profileId: profile.value.profile_id,
|
|
|
+ dateRange,
|
|
|
+ })
|
|
|
+ const loading = ref(true)
|
|
|
+
|
|
|
+ let respData
|
|
|
+ function setTableData(asin = '', sku = '') {
|
|
|
+ return request({
|
|
|
+ url: '/api/sellers/listings/',
|
|
|
method: 'GET',
|
|
|
- params: {profile_id: profile.value.profile_id, page: currentPage.value, limit: pageSize.value}
|
|
|
- }).then(resp => {
|
|
|
+ params: {
|
|
|
+ page: currentPage.value,
|
|
|
+ limit: pageSize.value,
|
|
|
+ profile_id: profile.value.profile_id,
|
|
|
+ asin,
|
|
|
+ sku,
|
|
|
+ },
|
|
|
+ }).then((resp) => {
|
|
|
fullTableData.value = resp.data
|
|
|
- respData = resp.data
|
|
|
totalItems.value = resp.total
|
|
|
currentPage.value = resp.page
|
|
|
loading.value = false
|
|
|
- console.log('respData', respData)
|
|
|
- })
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('Error fetching data:', error)
|
|
|
+ loading.value = false
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-const fullTableData = ref([]) // 表格数据
|
|
|
-const currentPage = ref() // 当前页
|
|
|
-const pageSize = ref(20) // 每页显示条目数
|
|
|
-const totalItems = ref() // 数据总量
|
|
|
-
|
|
|
-// 计算当前应显示的表格数据
|
|
|
-// const pagedTableData = computed(() => {
|
|
|
-// const start = (currentPage.value - 1) * pageSize.value
|
|
|
-// const end = start + pageSize.value
|
|
|
-// return fullTableData.value.slice(start, end)
|
|
|
-// })
|
|
|
-
|
|
|
-// 处理分页器当前页变化
|
|
|
-function handleCurrentChange(newPage) {
|
|
|
- loading.value = true
|
|
|
- currentPage.value = newPage
|
|
|
- setTableData()
|
|
|
-}
|
|
|
+ const fullTableData = ref([]) // 表格数据
|
|
|
+ let addedData = ref([]) // 已添加的商品数据
|
|
|
+ let selections = [] // 添加选中的项
|
|
|
+ let addedSels = [] // 删除选中的项
|
|
|
+ const currentPage = ref() // 当前页
|
|
|
+ const pageSize = ref(20) // 每页显示条目数
|
|
|
+ const totalItems = ref() // 数据总量
|
|
|
+
|
|
|
+ // 处理分页器当前页变化
|
|
|
+ function handleCurrentChange(newPage) {
|
|
|
+ currentPage.value = newPage
|
|
|
+ loading.value = true
|
|
|
+ setTableData()
|
|
|
+ }
|
|
|
|
|
|
-// 处理分页器每页显示条目数变化
|
|
|
-function handleSizeChange(newSize) {
|
|
|
- pageSize.value = newSize;
|
|
|
- currentPage.value = 1 // 重置到第一页
|
|
|
-}
|
|
|
+ // 处理分页器每页显示条目数变化
|
|
|
+ function handleSizeChange(newSize) {
|
|
|
+ pageSize.value = newSize
|
|
|
+ currentPage.value = 1 // 重置到第一页
|
|
|
+ }
|
|
|
+ // 点击表格选项触发事件
|
|
|
+ function handleSelectionChange(selection) {
|
|
|
+ selections = selection
|
|
|
+ }
|
|
|
|
|
|
-let selections
|
|
|
-function handleSelectionChange(selection) {
|
|
|
- console.log('selection', selection)
|
|
|
- selections = selection
|
|
|
-}
|
|
|
+ // 处理添加按钮点击事件
|
|
|
+ function handleAdd() {
|
|
|
+ // 过滤掉已经存在于addedData.value中的项
|
|
|
+ const newSelections = selections.filter(sel =>
|
|
|
+ !addedData.value.some(added => added.sku === sel.sku) // 假设使用sku作为唯一标识
|
|
|
+ )
|
|
|
+ // 如果有新的不重复项，加入到addedData.value中
|
|
|
+ if (newSelections.length > 0) {
|
|
|
+ addedData.value.push(...newSelections)
|
|
|
+ }
|
|
|
+ console.log('addedData', addedData.value)
|
|
|
+ }
|
|
|
|
|
|
-// 处理添加按钮点击事件
|
|
|
-function handleAdd() {
|
|
|
- console.log('selections', selections)
|
|
|
-}
|
|
|
+ function handleAddedChange(selection) {
|
|
|
+ console.log(111, selection)
|
|
|
+ addedSels = selection
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除第二个table中已经选中的项
|
|
|
+ function handleDel() {
|
|
|
+ addedData.value = addedData.value.filter(
|
|
|
+ (item) => !addedSels.includes(item)
|
|
|
+ )
|
|
|
+ addedSels = []
|
|
|
+ }
|
|
|
|
|
|
-// 修改表头样式
|
|
|
-const headerCellStyle = (args) => {
|
|
|
- // console.log('args', args)
|
|
|
- if (args.rowIndex === 0) {
|
|
|
- return {
|
|
|
- backgroundColor: 'rgba(245, 245, 245, 0.9)',
|
|
|
+ function delAll() {
|
|
|
+ addedData.value = []
|
|
|
+ }
|
|
|
+
|
|
|
+ function inpChange(e) {
|
|
|
+ const value = e
|
|
|
+ console.log(123, select.value)
|
|
|
+ if (select.value === 'asin') {
|
|
|
+ loading.value = true
|
|
|
+ setTableData(value)
|
|
|
+ } else if (select.value === 'sku') {
|
|
|
+ loading.value = true
|
|
|
+ setTableData('', value)
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-// const size = ref('default')
|
|
|
-// const labelPosition = ref('top')
|
|
|
-interface RuleForm {
|
|
|
- name: string
|
|
|
- adMix: string
|
|
|
- count: string
|
|
|
- date1: string
|
|
|
- date2: string
|
|
|
- budget: string
|
|
|
- delivery: boolean
|
|
|
- type: string
|
|
|
- bidStrategy: string
|
|
|
- placeBid: string
|
|
|
- firstPage: string
|
|
|
- other: string
|
|
|
- adGroupName: string
|
|
|
-}
|
|
|
+ function selChange(e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
|
|
|
-const formSize = ref('default')
|
|
|
-const labelPosition = ref('top')
|
|
|
-const ruleFormRef = ref<FormInstance>()
|
|
|
-const ruleForm = reactive<RuleForm>({
|
|
|
- name: 'Hello',
|
|
|
- adMix: '',
|
|
|
- count: '',
|
|
|
- date1: '',
|
|
|
- date2: '',
|
|
|
- budget: '',
|
|
|
- delivery: false,
|
|
|
- type: 'auto',
|
|
|
- bidStrategy: 'dynamicBid_Low',
|
|
|
- placeBid: '',
|
|
|
- firstPage: '',
|
|
|
- other: '',
|
|
|
- adGroupName: '',
|
|
|
-})
|
|
|
-const rules = reactive<FormRules<RuleForm>> ({
|
|
|
- name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
|
|
|
- adMix: [{ required: false, message: 'Please select Activity zone', trigger: 'change' }],
|
|
|
- count: [{ required: true, message: 'Please select Activity count', trigger: 'change' }],
|
|
|
- date1: [{ required: true, type: 'date', message: 'Please pick a date', trigger: 'change' }],
|
|
|
- date2: [{ required: false, type: 'date', message: 'Please pick a time', trigger: 'change' }],
|
|
|
- budget: [
|
|
|
- { required: true, message: '请输入预算', trigger: 'blur' },
|
|
|
- { pattern: /^(?:[1-9]\d{0,5}|1000000)(?:\.\d{1,2})?$/, message: '预算必须是1到1000000之间的数字，小数点后最多两位', trigger: 'blur' },
|
|
|
- ],
|
|
|
- type: [{ required: false, trigger: 'change' }],
|
|
|
- bidStrategy: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
|
|
|
- placeBid: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
|
|
|
- firstPage: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
|
|
|
- other: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
|
|
|
- adGroupName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
|
|
|
-})
|
|
|
-
|
|
|
-async function submitForm(formEl: FormInstance | undefined) {
|
|
|
- if (!formEl) return
|
|
|
- await formEl.validate((valid, fields) => {
|
|
|
- if (valid) {
|
|
|
- console.log('submit!')
|
|
|
- console.log('budget', ruleForm.budget)
|
|
|
- } else {
|
|
|
- console.log('error submit!', fields)
|
|
|
+ // 修改表头样式
|
|
|
+ const headerCellStyle = (args) => {
|
|
|
+ // console.log('args', args)
|
|
|
+ if (args.rowIndex === 0) {
|
|
|
+ return {
|
|
|
+ backgroundColor: 'rgba(245, 245, 245, 0.9)',
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ // const size = ref('default')
|
|
|
+ // const labelPosition = ref('top')
|
|
|
+ interface RuleForm {
|
|
|
+ name: string
|
|
|
+ adMix: string
|
|
|
+ count: string
|
|
|
+ date1: string
|
|
|
+ date2: string
|
|
|
+ budget: string
|
|
|
+ delivery: boolean
|
|
|
+ type: string
|
|
|
+ bidStrategy: string
|
|
|
+ placeBid: string
|
|
|
+ firstPage: string
|
|
|
+ other: string
|
|
|
+ adGroupName: string
|
|
|
+ }
|
|
|
+
|
|
|
+ const formSize = ref('default')
|
|
|
+ const labelPosition = ref('top')
|
|
|
+ const ruleFormRef = ref<FormInstance>()
|
|
|
+ const ruleForm = reactive<RuleForm>({
|
|
|
+ name: 'Hello',
|
|
|
+ adMix: '',
|
|
|
+ count: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ budget: '',
|
|
|
+ delivery: false,
|
|
|
+ type: 'auto',
|
|
|
+ bidStrategy: 'dynamicBid_Low',
|
|
|
+ placeBid: '',
|
|
|
+ firstPage: '',
|
|
|
+ other: '',
|
|
|
+ adGroupName: '',
|
|
|
+ })
|
|
|
+ const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
|
|
|
+ adMix: [{ required: false, message: 'Please select Activity zone', trigger: 'change' }],
|
|
|
+ count: [{ required: true, message: 'Please select Activity count', trigger: 'change' }],
|
|
|
+ date1: [{ required: true, type: 'date', message: 'Please pick a date', trigger: 'change' }],
|
|
|
+ date2: [{ required: false, type: 'date', message: 'Please pick a time', trigger: 'change' }],
|
|
|
+ budget: [
|
|
|
+ { required: true, message: '请输入预算', trigger: 'blur' },
|
|
|
+ { pattern: /^(?:[1-9]\d{0,5}|1000000)(?:\.\d{1,2})?$/, message: '预算必须是1到1000000之间的数字，小数点后最多两位', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ type: [{ required: false, trigger: 'change' }],
|
|
|
+ bidStrategy: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
|
|
|
+ placeBid: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
|
|
|
+ firstPage: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
|
|
|
+ other: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
|
|
|
+ adGroupName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
|
|
|
})
|
|
|
-}
|
|
|
|
|
|
-function resetForm(formEl: FormInstance | undefined) {
|
|
|
- if (!formEl) return
|
|
|
- formEl.resetFields()
|
|
|
-}
|
|
|
+ async function submitForm(formEl: FormInstance | undefined) {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('submit!')
|
|
|
+ console.log('budget', ruleForm.budget)
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-// const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
|
|
-// value: `${idx + 1}`,
|
|
|
-// label: `${idx + 1}`,
|
|
|
-// }))
|
|
|
+ function resetForm(formEl: FormInstance | undefined) {
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.resetFields()
|
|
|
+ }
|
|
|
|
|
|
-function changeType() {
|
|
|
- console.log(ruleForm.type)
|
|
|
-}
|
|
|
+ // const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
|
|
+ // value: `${idx + 1}`,
|
|
|
+ // label: `${idx + 1}`,
|
|
|
+ // }))
|
|
|
|
|
|
-// 商品模块
|
|
|
-const activeName = ref('first')
|
|
|
+ function changeType() {
|
|
|
+ console.log(ruleForm.type)
|
|
|
+ }
|
|
|
|
|
|
-const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
- console.log(tab, event)
|
|
|
-}
|
|
|
+ // 商品模块
|
|
|
+ const activeName = ref('first')
|
|
|
+
|
|
|
+ const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
+ console.log(tab, event)
|
|
|
+ }
|
|
|
+
|
|
|
+ const input3 = ref('')
|
|
|
+ const select = ref('name')
|
|
|
+ const select2 = ref('latest')
|
|
|
+ const textarea = ref('')
|
|
|
+ const buttons = [{ type: 'primary', text: '添加' }] as const
|
|
|
+
|
|
|
+ // const pagedTableData = [
|
|
|
+ // {
|
|
|
+ // date: '2016-05-03',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-02',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-04',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-01',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-08',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-06',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // date: '2016-05-07',
|
|
|
+ // name: 'Tom',
|
|
|
+ // address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ // },
|
|
|
+ // ]
|
|
|
+
|
|
|
+ // 分页器相关状态
|
|
|
+
|
|
|
+ // 后端获取的完整数据
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ setTableData()
|
|
|
+ // const myTest = route.query
|
|
|
+ // console.log('myTest', myTest)
|
|
|
+ })
|
|
|
+
|
|
|
+ defineOptions({
|
|
|
+ name: 'SpCreateCampaigns',
|
|
|
+ })
|
|
|
|
|
|
-const input3 = ref('')
|
|
|
-const select = ref('name')
|
|
|
-const select2 = ref('latest')
|
|
|
-const textarea = ref('')
|
|
|
-const buttons = [{ type: 'primary', text: '添加' }] as const
|
|
|
-
|
|
|
-// const pagedTableData = [
|
|
|
-// {
|
|
|
-// date: '2016-05-03',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-02',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-04',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-01',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-08',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-06',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// {
|
|
|
-// date: '2016-05-07',
|
|
|
-// name: 'Tom',
|
|
|
-// address: 'No. 189, Grove St, Los Angeles',
|
|
|
-// },
|
|
|
-// ]
|
|
|
-
|
|
|
-// 分页器相关状态
|
|
|
-
|
|
|
-
|
|
|
-// 后端获取的完整数据
|
|
|
-
|
|
|
-defineOptions({
|
|
|
- name: 'SpCreateCampaigns',
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-.column-item .el-radio-group {
|
|
|
- display: inline-flex;
|
|
|
- font-size: 0;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
-}
|
|
|
-.radio-description {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-top: -18px;
|
|
|
- margin-left: 22px;
|
|
|
-}
|
|
|
-.radio-description-2 {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-top: -10px;
|
|
|
-}
|
|
|
-.column-margin-bottom label.el-radio.is-bordered {
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 35px;
|
|
|
-}
|
|
|
-::v-deep(.column-margin-bottom label.el-radio.is-bordered span.el-radio__inner) {
|
|
|
- margin-top: -18px;
|
|
|
- margin-left: -15px;
|
|
|
-}
|
|
|
-.gap-items {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-.gap-item {
|
|
|
- width: 200px;
|
|
|
- margin-left: 30px;
|
|
|
- color: #0b0d0d;
|
|
|
-}
|
|
|
-
|
|
|
-.demo-tabs > .el-tabs__content {
|
|
|
- padding: 52px;
|
|
|
- color: #6b778c;
|
|
|
- font-size: 32px;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-/* 广告组商品Tab栏 */
|
|
|
-::v-deep(.el-tabs__nav-scroll) {
|
|
|
- overflow: hidden;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
-::v-deep(.el-tabs__nav-wrap::after) {
|
|
|
- height: 2px !important;
|
|
|
-}
|
|
|
-::v-deep(.el-table__inner-wrapper::before) {
|
|
|
- background-color: white;
|
|
|
-}
|
|
|
-// 表格内容边距
|
|
|
-div {
|
|
|
- & #pane-first,
|
|
|
- & #pane-second {
|
|
|
- margin: 10px;
|
|
|
+ ::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .column-item .el-radio-group {
|
|
|
+ display: inline-flex;
|
|
|
+ font-size: 0;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ .radio-description {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ margin-top: -18px;
|
|
|
+ margin-left: 22px;
|
|
|
+ }
|
|
|
+ .radio-description-2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
+ .column-margin-bottom label.el-radio.is-bordered {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 35px;
|
|
|
+ }
|
|
|
+ ::v-deep(.column-margin-bottom label.el-radio.is-bordered span.el-radio__inner) {
|
|
|
+ margin-top: -18px;
|
|
|
+ margin-left: -15px;
|
|
|
+ }
|
|
|
+ .gap-items {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .gap-item {
|
|
|
+ width: 200px;
|
|
|
+ margin-left: 30px;
|
|
|
+ color: #0b0d0d;
|
|
|
}
|
|
|
-}
|
|
|
-// 输入底部样式
|
|
|
-::v-deep(.card-box .el-card__body) {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12px;
|
|
|
-}
|
|
|
-.card-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.box-card {
|
|
|
- width: 100%;
|
|
|
- // margin: 10px 0 10px 10px;
|
|
|
- margin-right: 10px;
|
|
|
- border: none;
|
|
|
-}
|
|
|
|
|
|
-.single-line {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: block; // 确保这是块级元素以应用省略号
|
|
|
-}
|
|
|
+ .demo-tabs > .el-tabs__content {
|
|
|
+ padding: 52px;
|
|
|
+ color: #6b778c;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ /* 广告组商品Tab栏 */
|
|
|
+ ::v-deep(.el-tabs__nav-scroll) {
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-tabs__nav-wrap::after) {
|
|
|
+ height: 2px !important;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-table__inner-wrapper::before) {
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+ // 表格内容边距
|
|
|
+ div {
|
|
|
+ & #pane-first,
|
|
|
+ & #pane-second {
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 输入底部样式
|
|
|
+ ::v-deep(.card-box .el-card__body) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ width: 100%;
|
|
|
+ // margin: 10px 0 10px 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
|
|
|
+ .single-line {
|
|
|
+ color: rgb(30, 33, 41);
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ .data-color {
|
|
|
+ color: rgb(30, 33, 41);
|
|
|
+ }
|
|
|
+ .img-box {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-top: 5px;
|
|
|
+ border: 1px solid rgb(194, 199, 207);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
</style>
|
