Skip to content

Z
zxn-adputin
Commit b0e89c51 authored by lijin's avatar lijin
Browse files
Options

增加文案哭,以及公司封装的组件库

parent 1ef1a1fa
Show whitespace changes
Inline Side-by-side
Showing with 1952 additions and 24 deletions
src/api/cloud.js
View file @ b0e89c51
...@@ -264,29 +264,29 @@ export function getBusinTextDel(params) { ...@@ -264,29 +264,29 @@ export function getBusinTextDel(params) {
} }
/* 修改文案库*/ /* 修改文案库*/
export function getBusinTextEdit(params) { export function getBusinTextEdit(data) {
return request({ return request({
url: process.env.PUTIN_API + "/material/business/text/edit", url: process.env.PUTIN_API + "/material/business/text/edit",
method: "POST", method: "POST",
params data
}); });
} }
/* 添加文案库*/ /* 添加文案库*/
export function getBusinTextAdd(params) { export function getBusinTextAdd(data) {
return request({ return request({
url: process.env.PUTIN_API + "/material/business/text/input-add", url: process.env.PUTIN_API + "/material/business/text/input-add",
method: "POST", method: "POST",
params data
}); });
} }
/* 操作原始素材*/ /* 操作原始素材*/
export function getoriginedit(params) { export function getoriginedit(data) {
return request({ return request({
url: process.env.PUTIN_API + "/material/origin/edit", url: process.env.PUTIN_API + "/material/origin/edit",
method: "POST", method: "POST",
params data
}); });
} }
......
src/api/report.js
View file @ b0e89c51
...@@ -650,5 +650,14 @@ export function retryUploadYoutube(params) { ...@@ -650,5 +650,14 @@ export function retryUploadYoutube(params) {
}) })
} }
/* 通用接口 */
export function commonFetchData(params) {
return request({
url: process.env.BXDD_API + "/stat/common/v2/tableMapping",
method: "get",
params
})
}
// ---------------------------------------- // ----------------------------------------
src/components/Selectors/AppCategorySelector.vue 0 → 100644
View file @ b0e89c51
<template>
<el-select
v-model="selectedValue"
filterable
clearable
placeholder="请选择分类"
@change="handleChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.category"
:value="item.value"
/>
</el-select>
</template>
<script>
import { commonFetchData } from '@/api/report'
export default {
name: 'AppCategorySelector',
props: {
value: {
type: [String, Number],
default: ''
}
},
data() {
return {
options: [],
selectedValue: ''
}
},
watch: {
value: {
handler(newVal) {
this.selectedValue = newVal
},
immediate: true
}
},
created() {
this.fetchOptions()
},
methods: {
fetchOptions() {
// Using the commonFetchData function with Promise approach
commonFetchData({sqlId: 1641})
.then(res => {
if (res && res.result) {
this.options = res.result.data || []
} else {
console.error('Failed to fetch category data: Invalid response format')
}
})
.catch(error => {
console.error('Failed to fetch category data:', error)
})
},
handleChange(value) {
this.$emit('input', value)
this.$emit('change', value)
}
}
}
</script>
src/components/Selectors/README.md 0 → 100644
View file @ b0e89c51
# 分类选择器组件使用说明
## AppCategorySelector
单选分类选择器，支持双向绑定。
### 使用方法
1. 导入组件：
```javascript
import AppCategorySelector from '@/components/Selectors/AppCategorySelector'
export default {
components: {
AppCategorySelector
}
}
```
2. 在模板中使用：
```html
<template>
<div>
<!-- 基本用法 -->
<app-category-selector v-model="categoryId" @change="handleCategoryChange" />
<!-- 当前选中的分类ID: {{ categoryId }} -->
</div>
</template>
<script>
export default {
data() {
return {
categoryId: '' // 存储选中的分类ID
}
},
methods: {
handleCategoryChange(value) {
console.log('分类已更改:', value)
// 执行其他操作...
}
}
}
</script>
```
### 属性
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | String/Number | '' | 当前选中的分类ID，支持v-model双向绑定 |
### 事件
| 事件名 | 参数 | 说明 |
|--------|------|------|
| input | value | 选中值变化时触发，用于v-model |
| change | value | 选中值变化时触发 |
src/components/zx-ui/index.js 0 → 100644
View file @ b0e89c51
import ZxDatePicker from './zx-date-picker'
import ZxCommonTable from './table/zx-common-table'
import ZxAppSelect from './select/zx-app-select'
import ZxAppSelect1 from './select/zx-app-select1'
import ZxAppSelect2 from './select/zx-app-select2'
import ZxAppSelect3 from './select/zx-app-select3'
import ZxSourceSelect from './select/zx-source-select'
import ZxAppSelectid from './select/zx-app-selectid'
import ZxGpaccountSelect from './select/zx-gpaccount-select'
import ZxTabel from './table/zx-table'
export default {
install: (Vue) => {
Vue.component('zx-date-picker', ZxDatePicker)
Vue.component('zx-common-table', ZxCommonTable)
Vue.component('zx-app-select', ZxAppSelect)
Vue.component('zx-app-select1', ZxAppSelect1)
Vue.component('zx-app-select2', ZxAppSelect2)
Vue.component('zx-app-select3', ZxAppSelect3)
Vue.component('zx-source-select', ZxSourceSelect)
Vue.component('zx-app-selectid', ZxAppSelectid)
Vue.component('zx-gpaccount-select', ZxGpaccountSelect)
Vue.component('zx-table', ZxTabel)
}
}
src/components/zx-ui/select/zx-app-select.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-select
:value="value"
filterable
clearable
placeholder="请选择"
@change="handleChange"
>
<el-option
v-for="item in list"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
</template>
<script>
import {menuSelectApps} from "@/api/report";
export default {
name: "ZxAppSelect",
model: {
prop: "value",
event: "change",
},
props: {
platformId: {
type: String,
required: true,
},
gpAccountId: {
type: String,
required: false,
},
menuCode: {
type: String,
required: true,
},
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [Boolean, String],
required: false,
},
value: {
type: [String, Number],
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
value(val) {
this.$emit("input", val);
},
gpAccountId(val) {
this.init()
},
},
methods: {
// 获取App名称配置列表
init: function () {
this.selectValue = this.defaultValue;
menuSelectApps({
platformId: this.platformId,
menuCode: this.menuCode,
gpAccountId: this.gpAccountId
}).then((res) => {
var newList = []
for (var i = 0; i < res.result.data.length; i++) {
if (res.result.data[i].is_g_app == 1 && res.result.data[i].operate_type != null && res.result.data[i].operate_type != '') {
if (res.result.data[i].status == 3 || res.result.data[i].status == 7 || res.result.data[i].status == 8) {
newList.push(res.result.data[i])
}
}
}
this.list = newList
this.$emit("list", this.list);
if (this.addAllOption == "true") {
this.list.unshift({
label: "全部",
value: "#ALL#",
});
}
});
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/select/zx-app-select1.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-select
:value="value"
filterable
placeholder="请选择"
@change="handleChange"
>
<el-option
v-for="item in list"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
</template>
<script>
import {menuSelectApps} from "@/api/report";
export default {
name: "ZxAppSelect1",
model: {
prop: "value",
event: "change",
},
props: {
platformId: {
type: String,
required: true,
},
menuCode: {
type: String,
required: true,
},
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [Boolean, String],
required: false,
},
value: {
type: [String, Number],
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
value(val) {
this.$emit("input", val);
},
},
methods: {
// 获取App名称配置列表
init: function () {
this.selectValue = this.defaultValue;
menuSelectApps({
platformId: this.platformId,
menuCode: this.menuCode,
}).then((res) => {
this.list = res.result.data;
var newList = []
for (var i = 0; i < this.list.length; i++) {
if (res.result.data[i].is_g_app == 1 && res.result.data[i].operate_type != null && res.result.data[i].operate_type != '') {
if (res.result.data[i].status == 3 || res.result.data[i].status == 7 || res.result.data[i].status == 8) {
newList.push(this.list[i])
}
}
}
this.list = newList
this.$emit("list", this.list);
if (this.addAllOption == "true") {
this.list.unshift({
label: "全部",
value: "",
});
}
});
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/select/zx-app-select2.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-select
:value="value"
filterable
placeholder="请选择"
@change="handleChange"
>
<el-option
v-for="item in list"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
</template>
<script>
import {menuSelectApps} from "@/api/report";
export default {
name: "ZxAppSelect1",
model: {
prop: "value",
event: "change",
},
props: {
platformId: {
type: String,
required: true,
},
menuCode: {
type: String,
required: true,
},
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [Boolean, String],
required: false,
},
value: {
type: [String, Number],
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
value(val) {
this.$emit("input", val);
},
},
methods: {
// 获取App名称配置列表
init: function () {
this.selectValue = this.defaultValue;
menuSelectApps({
platformId: this.platformId,
menuCode: this.menuCode,
}).then((res) => {
this.list = res.result.data;
var newList = []
for (var i = 0; i < this.list.length; i++) {
if (res.result.data[i].is_g_app == 1 && res.result.data[i].operate_type != null && res.result.data[i].operate_type != '') {
if (res.result.data[i].status == 3 || res.result.data[i].status == 7 || res.result.data[i].status == 8) {
newList.push(this.list[i])
}
}
}
this.list = newList
this.$emit("list", this.list);
});
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/select/zx-app-select3.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-select
:value="value"
filterable
placeholder="请选择"
@change="handleChange"
>
<el-option
v-for="item in list"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
</template>
<script>
import { menuSelectApps } from "@/api/report";
export default {
name: "ZxAppSelect",
model: {
prop: "value",
event: "change",
},
props: {
platformId: {
type: String,
required: true,
},
menuCode: {
type: String,
required: true,
},
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [Boolean, String],
required: false,
},
value: {
type: [String, Number],
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
value(val) {
this.$emit("input", val);
},
},
methods: {
// 获取App名称配置列表
init: function () {
this.selectValue = this.defaultValue;
menuSelectApps({
platformId: this.platformId,
menuCode: this.menuCode,
}).then((res) => {
this.list = res.result.data;
var newList = []
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].is_g_app == 0) {
newList.push(this.list[i])
}
}
this.list = newList
this.$emit("list", this.list);
if (this.addAllOption == "true") {
this.list.unshift({
label: "全部",
value: "",
});
}
});
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/select/zx-app-selectid.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-select
:value="value"
filterable
clearable
placeholder="请选择"
@change="handleChange"
>
<el-option
v-for="item in list"
:key="item.id"
:value="item.id"
:label="item.label"
/>
</el-select>
</div>
</template>
<script>
import { menuSelectApps } from "@/api/report";
export default {
name: "ZxAppSelect",
model: {
prop: "value",
event: "change",
},
props: {
platformId: {
type: String,
required: true,
},
menuCode: {
type: String,
required: true,
},
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [Boolean, String],
required: false,
},
value: {
type: [String, Number],
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
value(val) {
this.$emit("input", val);
},
},
methods: {
// 获取App名称配置列表
init: function () {
this.selectValue = this.defaultValue;
menuSelectApps({
platformId: this.platformId,
menuCode: this.menuCode,
}).then((res) => {
var newList = []
for (var i = 0; i < res.result.data.length; i++) {
if (res.result.data[i].is_g_app == 1 && res.result.data[i].operate_type != null && res.result.data[i].operate_type != '') {
newList.push(res.result.data[i])
}
}
this.list = newList
this.$emit("list", this.list);
if (this.addAllOption == "true") {
this.list.unshift({
label: "全部",
value: "",
});
}
});
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/select/zx-gpaccount-select.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-select
:value="value"
filterable
clearable
placeholder="请选择"
@change="handleChange"
>
<el-option
v-for="item in list"
:key="item.value"
:value="item.value"
:label="item.lable"
/>
</el-select>
</div>
</template>
<script>
import {gpAccountSelectList} from "@/api/report";
export default {
name: "ZxGpaccountSelect",
model: {
prop: "value",
event: "change",
},
props: {
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [Boolean, String],
required: false,
},
value: {
type: [String, Number],
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
value(val) {
this.$emit("input", val);
},
},
methods: {
// 获取App名称配置列表
init: function() {
this.selectValue = this.defaultValue;
gpAccountSelectList({
}).then((res) => {
var newList = []
for (var i = 0; i < res.result.data.length; i++) {
res.result.data[i]['value'] = res.result.data[i]['value'] + ''
newList.push(res.result.data[i])
}
this.list = newList
this.$emit("list", this.list);
if (this.addAllOption == "true") {
this.list.unshift({
lable: "全部",
value: "",
});
}
});
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/select/zx-source-select.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<el-select v-model="selectValue" filterable placeholder="请选择" @change="handleChange">
<el-option
v-for="item in list"
:key="item.id"
:value="item.value"
:label="item.label"
/>
</el-select>
</div>
</template>
<script>
import { menuSelectApps } from "@/api/report";
export default {
name: "ZxSourceSelect",
model: {
prop: "value",
event: "change",
},
props: {
defaultValue: {
type: String,
required: false,
},
addAllOption: {
type: [String, Boolean],
required: false,
},
},
data() {
return {
queryDate: [],
selectValue: "",
list: [],
};
},
created() {
this.init();
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
selectValue(val) {
this.$emit("input", val);
},
},
methods: {
// 获取App名称配置列表
init: function () {
this.selectValue = this.defaultValue;
this.list = [
{ label: "Facebook", value: "facebook" },
{ label: "Google", value: "google" },
];
if (this.addAllOption) {
this.list.unshift({
label: "全部",
value: "",
});
}
},
handleChange(value) {
this.$emit("change", value);
},
},
};
</script>
src/components/zx-ui/table/mal-table.vue 0 → 100644
View file @ b0e89c51
<template>
<el-table
:data="tableData"
stripe
fit
border
highlight-current-row
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{
textAlign: 'center',
color: '#000',
}"
:height="height"
>
<template v-for="(item, index) in tHeader">
<el-table-column
:label="item.label"
:prop="item.prop"
:key="item.id ? item.id : index"
:sortable="item.sortable ? item.sortable : false"
:fixed="item.fixed ? item.fixed : null"
/>
</template>
</el-table>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
require: true,
},
tHeader: {
type: Array,
require: true,
},
height: {
default: "80vh",
},
},
data() {
return {};
},
};
</script>
<style>
</style>
\ No newline at end of file
src/components/zx-ui/table/zx-common-table.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<!-- <el-button @click="this.export">导出</el-button>-->
<el-table
id="table"
:data="dataSet"
:show-header="true"
:default-sort="defaultSort"
v-loading="listLoading"
element-loading-text="Loading"
highlight-current-row
:height="height"
border
>
<el-table-column
v-for="(_col, index) in header"
:key="index"
:prop="_col.prop"
:fixed="_col.fixed"
:label="_col.label"
:width="_col.width"
:formatter="_col.formatter"
:sortable="_col.sortable"
:render-header="_col.renderHeader"
:column-key="index.toString()"
:show-overflow-tooltip="true"
min-width="50px"
align="center"
/>
</el-table>
</div>
</template>
<script>
import { v2tableMapping } from "@/api/report";
export default {
name: "ZxCommonTable",
props: {
sqlId: {
type: String,
required: true,
},
height: {
type: String,
required: false,
default: '80vh'
},
condition: {
type: Object,
required: false,
},
header: {
type: Array,
required: true,
},
defaultSort: {
type: Array,
required: false,
},
},
data() {
return {
queryDate: [],
listLoading: false,
dataSet: [],
};
},
created() {},
mounted() {
// this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true;
this.condition["sqlId"] = this.sqlId;
v2tableMapping(this.condition).then((response) => {
this.dataSet = response.result.data;
this.listLoading = false;
});
},
export() {
// import('@/vendor/Export2Excel').then(excel => {
// const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
// excel.export_json_to_excel({
// header: tHeader, //表头 必填
// data: [['a', 'b', 'c', 'd']],
// filename: 'excel-list', //非必填
// autoWidth: true, //非必填
// bookType: 'xlsx' //非必填
// })
// })
},
},
};
</script>
src/components/zx-ui/table/zx-day-age-table.vue 0 → 100644
View file @ b0e89c51
<template>
<el-table
empty-text="暂无数据"
ref="table"
:data="tableList"
border
stripe
fit
highlight-current-row
:height="tableHeight"
@selection-change="selectionChange"
@row-click="rowClick"
>
<!-- 选择框 -->
<el-table-column
v-if="select"
type="selection"
fixed="left"
width="55"
align="center"
/>
<template v-for="(itm, idx) in header">
<!-- 需要内嵌代码的列 -->
<el-table-column
v-if="itm.tag"
:key="idx"
:prop="itm.prop ? itm.prop : null"
:label="itm.label ? itm.label : null"
:width="itm.width ? itm.width : null"
:sortable="itm.sortable ? itm.sortable : false"
:align="itm.align ? itm.align : 'center'"
:fixed="itm.fixed ? itm.fixed : null"
:show-overflow-tooltip="itm.tooltip"
min-width="50"
>
<!-- 一些需要特殊处理的单元格放到这里 -->
<template slot-scope="scope">
<!-- 查看 -->
<template v-if="itm.tag === 'twoDecimal'">
<template
v-if="
(scope.row.lt_ratios === 'lt_ratios' ||
scope.row.adshow_lt_ratios === 'adshow_lt_ratios') &&
itm.prop !== 'user_price'
"
>
<template v-if="typeof scope.row[itm.prop] === 'string'">
<font style="color: #00a"
>{{
parseInt(scope.row[itm.prop].split("-")[1] * 10000) / 100
}}%</font
>
</template>
<template v-else>
{{ parseInt(scope.row[itm.prop] * 10000) / 100 || "-"
}}{{ scope.row[itm.prop] ? "%" : "" }}
</template>
</template>
<template v-else>
{{ parseInt(scope.row[itm.prop] * 1000) / 1000 || "-" }}
</template>
</template>
</template>
</el-table-column>
<!-- 正常列 -->
<el-table-column
v-else
:key="idx"
:prop="itm.prop"
:label="itm.label"
:width="itm.width ? itm.width : null"
:sortable="itm.sortable ? itm.sortable : false"
:align="itm.align ? itm.align : 'center'"
:fixed="itm.fixed ? itm.fixed : null"
:formatter="itm.formatter"
:show-overflow-tooltip="itm.tooltip"
min-width="50"
/>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableHeight: null,
};
},
props: {
tableList: {
type: Array,
default: () => [],
},
header: {
type: Array,
default: () => [],
},
select: {
type: Boolean,
default: () => false,
},
selectionChange: {
type: Function,
default: () => null,
},
rowClick: {
type: Function,
default: () => null,
},
},
mounted() {
this.$nextTick(() => {
//表格高度自适应浏览器大小
this.changeTableHight();
window.onresize = () => {
this.changeTableHight();
};
});
},
destroyed() {
//高度自适应事件注销
window.onresize = null;
},
watch: {
/**
* 数据变化后 高度自适应
*/
tableList() {
this.$nextTick(() => {
this.changeTableHight();
});
},
},
methods: {
/**
* 高度自适应
* 当表格展示空间小于460按460px展示，大于的时候高度填充
*/
changeTableHight() {
let Height = window.innerHeight || document.body.clientHeight;
//高度设置
let disTop = this.$refs.table.$el;
//如果表格上方有元素则减去这些高度适应窗口，70是底下留白部分
Height -= disTop.offsetTop + 70;
if (disTop.offsetParent) Height -= disTop.offsetParent.offsetTop;
this.tableHeight = Height < 460 ? 460 : Height;
//重绘表格
this.$refs.table.doLayout();
},
},
};
</script>
<style></style>
src/components/zx-ui/table/zx-table.vue 0 → 100644
View file @ b0e89c51
<template>
<el-table
empty-text="暂无数据"
ref="table"
:data="tableList"
border
stripe
fit
highlight-current-row
:height="inTableHeight"
:default-sort="defaultSort"
@selection-change="selectionChange"
@row-click="rowClick"
>
<!-- 选择框 -->
<el-table-column
v-if="select"
type="selection"
fixed="left"
width="55"
align="center"
/>
<template v-for="(itm, idx) in header">
<!-- 特殊处理列 -->
<el-table-column
v-if="itm.render"
:key="idx"
:prop="itm.prop ? itm.prop : null"
:label="itm.label ? itm.label : null"
:width="itm.width ? itm.width : null"
:sortable="itm.sortable ? itm.sortable : false"
:align="itm.align ? itm.align : 'center'"
:fixed="itm.fixed ? itm.fixed : null"
:show-overflow-tooltip="itm.tooltip"
min-width="50"
>
<template slot-scope="scope">
<ex-slot
:render="itm.render"
:row="scope.row"
:index="scope.$index"
:column="itm"
/>
</template>
</el-table-column>
<!-- 正常列 -->
<el-table-column
v-else
:key="idx"
:prop="itm.prop ? itm.prop : null"
:label="itm.label ? itm.label : null"
:width="itm.width ? itm.width : null"
:sortable="itm.sortable ? itm.sortable : false"
:align="itm.align ? itm.align : 'center'"
:fixed="itm.fixed ? itm.fixed : null"
:formatter="itm.formatter"
:show-overflow-tooltip="itm.tooltip"
min-width="50"
/>
</template>
</el-table>
</template>
<script>
// 自定义内容的组件
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, context) => {
const params = {
row: context.props.row,
index: context.props.index
};
if (context.props.column) params.column = context.props.column;
return context.props.render(h, params);
}
};
export default {
components: { exSlot },
props: {
tableList: {
type: Array,
default: () => []
},
header: {
type: Array,
default: () => []
},
select: {
type: Boolean,
default: () => false
},
height: {
type: [Number, String, Function],
default: () => null
},
defaultSort: {
type: Object,
default: () => null
}
},
data() {
return {
inTableHeight: null
};
},
created() {
//该阶段可以接收父组件的传递参数
// console.log("created", this.height);
this.inTableHeight = this.height;
},
mounted() {
this.$nextTick(() => {
//表格高度自适应浏览器大小
this.changeTableHight();
if (!this.height) {
window.onresize = () => {
this.changeTableHight();
};
}
});
},
destroyed() {
//高度自适应事件注销
window.onresize = null;
},
watch: {
/**
* 数据变化后 高度自适应
*/
tableList() {
this.$nextTick(() => {
this.changeTableHight();
});
}
},
methods: {
/**
* 选择框选择后更改,事件分发
*/
selectionChange(selection) {
this.$emit("selection-change", selection);
},
/**
* 点击事件
*/
rowClick(row, column, event) {
this.$emit("row-click", row, column, event);
},
/**
* 高度自适应
* 当表格展示空间小于460按460px展示，大于的时候高度填充
*/
changeTableHight() {
if (this.height) {
//如果有传进来高度就取消自适应
this.inTableHeight = this.height;
this.$refs.table.doLayout();
return;
}
let tableHeight = window.innerHeight || document.body.clientHeight;
//高度设置
let disTop = this.$refs.table.$el;
//如果表格上方有元素则减去这些高度适应窗口，66是底下留白部分
tableHeight -= disTop.offsetTop + 66;
if (disTop.offsetParent) tableHeight -= disTop.offsetParent.offsetTop;
this.inTableHeight = tableHeight < 460 ? 460 : tableHeight;
//重绘表格
this.$refs.table.doLayout();
}
}
};
</script>
<style></style>
src/components/zx-ui/zx-date-picker.vue 0 → 100644
View file @ b0e89c51
<template>
<div>
<slot></slot>
<el-date-picker
v-model="queryDate"
:picker-options="pickerOptions"
type="daterange"
align="right"
unlink-panels
value-format="yyyy-MM-dd"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="$emit('change')"
/>
</div>
</template>
<script>
import moment from "moment";
export default {
name: "ZxDatePicker",
props: {
startDate: {
type: String,
required: false,
},
endDate: {
type: String,
required: true,
},
intervalDays: {
type: String,
required: false,
default: "0",
},
},
data() {
return {
queryDate: [],
pickerOptions: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const start = new Date();
picker.$emit("pick", [start, start]);
},
},
{
text: "昨天",
onClick(picker) {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit("pick", [start, start]);
},
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
};
},
created() {
let startDate = "";
let endDate = "";
if (this.endDate == "today") {
endDate = moment().format("YYYY-MM-DD");
} else if (this.endDate == "yesterday") {
endDate = moment().subtract(1, "days").format("YYYY-MM-DD");
} else {
endDate = this.endDate;
}
if (
this.startDate != "" &&
this.startDate != undefined &&
this.startDate != null
) {
startDate = this.startDate;
} else {
if (
this.intervalDays != "" &&
this.intervalDays != undefined &&
this.intervalDays != null
) {
startDate = moment(endDate)
.add(0 - this.intervalDays, "days")
.format("YYYY-MM-DD");
}
}
this.queryDate = [startDate, endDate];
},
// 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
watch: {
queryDate(val) {
this.$emit("input", val);
},
},
methods: {},
};
</script>
src/main.js
View file @ b0e89c51
...@@ -30,6 +30,18 @@ Vue.use(ElementUI, { locale }); ...@@ -30,6 +30,18 @@ Vue.use(ElementUI, { locale });
Vue.use(VCharts); Vue.use(VCharts);
Vue.use(ViewUI); Vue.use(ViewUI);
import ZxDatePicker from './components/zx-ui/index.js'
import ZxCommonTable from './components/zx-ui/index.js'
import ZxAppSelect from './components/zx-ui/index.js'
import ZxSourceSelect from './components/zx-ui/index.js'
import ZxGpaccountSelect from './components/zx-ui/index.js'
Vue.use(ZxDatePicker)
Vue.use(ZxCommonTable)
Vue.use(ZxAppSelect)
Vue.use(ZxSourceSelect)
Vue.use(ZxGpaccountSelect)
import Zxtable from "@/components/Table" import Zxtable from "@/components/Table"
Vue.component(Zxtable.name, Zxtable); Vue.component(Zxtable.name, Zxtable);
...@@ -47,7 +59,7 @@ Vue.filter("toFixed", function (price, limit) { ...@@ -47,7 +59,7 @@ Vue.filter("toFixed", function (price, limit) {
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.path == "/login" || to.path == "/materialUpload" || to.path == "/materialTag" || to.path == "/assetManagement/uploadYoutubeNew") { if (to.path == "/login" || to.path == "/materialUpload" || to.path == "/materialTag" || to.path == "/tools/uploadYoutubeNew") {
next(); next();
} else { } else {
gatewayUserRouters().then(res => { gatewayUserRouters().then(res => {
......
src/router/index.js
View file @ b0e89c51
...@@ -101,22 +101,28 @@ export const constantRouterMap = [ ...@@ -101,22 +101,28 @@ export const constantRouterMap = [
meta: { title: "创意素材", icon: "chart" } meta: { title: "创意素材", icon: "chart" }
}, },
{ {
path: "/assetManagement/googleOauthYoutube", path: "/tools/googleOauthYoutube",
name: "assetManagement.youtubeacountrights", name: "tools.youtubeacountrights",
component: () => import("@/views/authAccount/googleOauthYoutube"), component: () => import("@/views/authAccount/googleOauthYoutube"),
meta: { title: "Youtube账号授权", icon: "chart" } meta: { title: "Youtube账号授权", icon: "chart" }
}, },
{ {
path: "/assetManagement/uploadYoutube", path: "/tools/uploadYoutube",
name: "assetManagement.youtubeuploadvideo", name: "tools.youtubeuploadvideo",
component: () => import("@/views/uploadYoutube/uploadYoutube"), component: () => import("@/views/uploadYoutube/uploadYoutube"),
meta: { title: "Youtube视频上传", icon: "chart" } meta: { title: "Youtube视频上传", icon: "chart" }
},{ },{
path: "/assetManagement/YoutubeVideoManage", path: "/tools/YoutubeVideoManage",
name: "assetManagement.YoutubeVideoManage", name: "tools.YoutubeVideoManage",
component: () => import("@/views/uploadYoutube/YoutubeVideoManage"), component: () => import("@/views/uploadYoutube/YoutubeVideoManage"),
meta: { title: "Youtube视频管理", icon: "chart" } meta: { title: "Youtube视频管理", icon: "chart" }
}, },
{
path: "/assetManagement/copywritingLibrary",
name: "assetManagement.copywritingLibrary",
component: () => import("@/views/copywritingLibrary"),
meta: { title: "文案库", icon: "document" }
},
] ]
}, },
......
src/views/copywritingLibrary/index.vue 0 → 100644
View file @ b0e89c51
<template>
<div class="copywriting-library-container">
<!-- Filter section -->
<div class="filter-section">
<el-form :inline="true" :model="condition" class="filter-form">
<el-form-item label="关联应用">
<el-select v-model="condition.appId" placeholder="关联应用" @change="fetchData" filterable clearable>
<el-option
v-for="item in selectApps"
:key="item.id"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="日期范围">
<zx-date-picker end-date="today" interval-days="7" v-model="dateTime" @change="fetchData" clearable></zx-date-picker>
</el-form-item>
<el-form-item label="文案类型">
<el-select v-model="condition.type" placeholder="文案类型" @change="fetchData" clearable>
<el-option label="标题" value="1"></el-option>
<el-option label="描述" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="分类">
<app-category-selector v-model="condition.category" @change="fetchData" />
</el-form-item>
</el-form>
</div>
<el-divider></el-divider>
<!-- Table Header actions -->
<div class="header-actions">
<el-button type="primary" @click="showAddDialog">新增文案</el-button>
<div class="header-right">
<el-button icon="el-icon-refresh" @click="fetchData">刷新</el-button>
</div>
</div>
<!-- Main table -->
<el-table
:data="tableData"
border
style="width: 100%;"
v-loading="loading">
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="text" label="文案内容" min-width="350">
<template slot-scope="scope">
<div class="text-content">{{ scope.row.text }}</div>
</template>
</el-table-column>
<el-table-column prop="type" label="文案类型" width="120">
<template slot-scope="scope">
<el-tag :type="scope.row.type === 1 ? 'primary' : 'success'">
{{ scope.row.type === 1 ? '标题' : '描述' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="datadate" label="创建时间" width="180"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- Pagination -->
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
layout="total, prev, pager, next, sizes">
</el-pagination>
</div>
<!-- Add/Edit Dialog -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item label="文案类型" prop="type">
<el-select v-model="form.type" placeholder="请选择文案类型">
<el-option label="标题" value="1"></el-option>
<el-option label="描述" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="关联应用">
<el-select v-model="form.appId" filterable placeholder="请选择关联应用">
<el-option
v-for="item in selectApps"
:key="item.id"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分类">
<app-category-selector v-model="form.category" />
</el-form-item>
<el-form-item label="文案内容" prop="text">
<text-input-list
v-if="!form.id"
v-model="form.text"
placeholder="请输入文案内容"
:maxLength="form.type === 1 ? 30 : 90"
></text-input-list>
<el-input
v-if="form.id"
type="textarea"
:rows="4"
v-model="form.text"
placeholder="请输入文案内容"
:maxlength="form.type === 1 ? 30 : 90"
show-word-limit
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getBusinText,
getBusinTextDel,
getBusinTextEdit,
getBusinTextAdd,
getSelectApps
} from "@/api/cloud";
import AppCategorySelector from "@/components/Selectors/AppCategorySelector";
import TextInputList from "@/views/createDelivery/childComponents/TextInputList.vue";
export default {
name: 'CopywritingLibrary',
components: {
AppCategorySelector,
TextInputList
},
data() {
return {
// 表格数据
tableData: [],
loading: false,
total: 0,
currentPage: 1,
pageSize: 20,
// 筛选条件
condition: {
appId: "",
type: "1",
startDate: "",
endDate: "",
category: ""
},
// 应用选择器数据
selectApps: [],
// 日期选择器配置
pickerOptions2: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const start = new Date();
picker.$emit("pick", [start, start]);
}
},
{
text: "昨天",
onClick(picker) {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit("pick", [start, start]);
}
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
},
// 弹窗相关
dialogVisible: false,
dialogTitle: "",
form: {
id: "",
text: [],
type: "1",
appId: "",
category: ""
},
rules: {
text: [
{
required: true,
validator: (rule, value, callback) => {
if (this.form.id) {
// 编辑模式，检查文本是否为空
if (!value || value === '') {
callback(new Error('请输入文案内容'));
} else {
callback();
}
} else {
// 新增模式，检查数组是否为空
if (!value || value.length === 0) {
callback(new Error('请输入至少一条文案内容'));
} else {
callback();
}
}
},
trigger: "blur"
}
],
type: [
{ required: true, message: "请选择文案类型", trigger: "change" }
]
}
};
},
computed: {
dateTime: {
get() {
if (
this.condition.startDate &&
this.condition.endDate
) {
return [this.condition.startDate, this.condition.endDate];
} else {
return [];
}
},
set(v) {
if (v && v.length === 2) {
this.condition.startDate = v[0];
this.condition.endDate = v[1];
} else {
this.condition.startDate = "";
this.condition.endDate = "";
}
}
}
},
created() {
// 设置默认日期为最近7天
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.condition.startDate = start;
this.condition.endDate = end;
this.fetchApps();
this.fetchData();
},
methods: {
// 获取应用列表
async fetchApps() {
try {
const params = {
platformId: 5,
menuCode: "game.Overview,android",
};
const response = await getSelectApps(params);
if (response && response.result) {
this.selectApps = response.result.data || [];
}
} catch (error) {
console.error("获取应用列表失败:", error);
this.$message.error("获取应用列表失败");
}
},
// 获取文案列表
async fetchData() {
this.loading = true;
try {
const params = {
page: this.currentPage,
size: this.pageSize,
appId: this.condition.appId || '',
type: this.condition.type || '',
startDate: this.condition.startDate || '',
endDate: this.condition.endDate || '',
category: this.condition.category || ''
};
const response = await getBusinText(params);
if (response && response.result) {
this.tableData = response.result.data.content || [];
this.total = response.result.data.total || 0;
}
} catch (error) {
console.error("获取文案列表失败:", error);
this.$message.error("获取文案列表失败");
} finally {
this.loading = false;
}
},
// 分页处理
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData();
},
// 新增文案
showAddDialog() {
this.dialogTitle = "新增文案";
this.form = {
id: "",
text: [],
type: "1",
appId: "",
category: ""
};
this.dialogVisible = true;
},
// 编辑文案
handleEdit(row) {
this.dialogTitle = "编辑文案";
this.form = {
id: row.id,
text: row.text || "",
type: row.type + "",
appId: row.appId || "",
category: row.category || ""
};
this.dialogVisible = true;
},
// 删除文案
handleDelete(row) {
this.$confirm("确认删除该文案?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(async () => {
try {
const response = await getBusinTextDel({ id: row.id });
if (response.status === 200) {
this.$message.success("删除成功");
this.fetchData();
} else {
this.$message.error("删除失败");
}
} catch (error) {
console.error("删除文案失败:", error);
this.$message.error("删除文案失败");
}
})
.catch(() => {});
},
// 提交表单
submitForm() {
this.$refs.form.validate(async valid => {
if (valid) {
try {
let response;
if (this.form.id) {
// 编辑
response = await getBusinTextEdit({
id: this.form.id,
text: this.form.text,
type: this.form.type,
appId: this.form.appId,
category: this.form.category
});
} else {
// 新增
response = await getBusinTextAdd({
textList: this.form.text,
type: this.form.type,
appId: this.form.appId,
category: this.form.category
});
}
if (response && response.result) {
this.$message.success(this.form.id ? "编辑成功" : "添加成功");
this.dialogVisible = false;
this.fetchData();
} else {
this.$message.error(this.form.id ? "编辑失败" : "添加失败");
}
} catch (error) {
console.error(this.form.id ? "编辑文案失败:" : "添加文案失败:", error);
this.$message.error(this.form.id ? "编辑失败" : "添加失败");
}
}
});
}
}
};
</script>
<style scoped>
.copywriting-library-container {
padding: 20px;
}
.filter-section {
margin-bottom: 20px;
}
.header-actions {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.text-content {
word-break: break-all;
line-height: 1.5;
}
.pagination-container {
margin-top: 20px;
text-align: right;
}
</style>
src/views/layout/Layout.vue
View file @ b0e89c51
...@@ -26,18 +26,19 @@ ...@@ -26,18 +26,19 @@
<!-- 带子菜单的导航项 --> <!-- 带子菜单的导航项 -->
<el-submenu index="4"> <el-submenu index="4">
<template slot="title">资产管理</template> <template slot="title">资产管理</template>
<el-menu-item index="/intelligentDelivery/campaign-template">产品组</el-menu-item> <el-menu-item index="/assetManagement/copywritingLibrary">文案管理</el-menu-item>
<el-menu-item index="/intelligentDelivery/createDelivery">地域组</el-menu-item> <el-menu-item index="/assetManagement/campaign-template">产品组</el-menu-item>
<el-menu-item index="/intelligentDelivery/createDelivery">素材组</el-menu-item> <el-menu-item index="/assetManagement/createDelivery">地域组</el-menu-item>
<el-menu-item index="/intelligentDelivery/createDelivery">标题组</el-menu-item> <el-menu-item index="/assetManagement/createDelivery">素材组</el-menu-item>
<el-menu-item index="/intelligentDelivery/createDelivery">描述组</el-menu-item> <el-menu-item index="/assetManagement/createDelivery">标题组</el-menu-item>
<el-menu-item index="/assetManagement/createDelivery">描述组</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu index="3"> <el-submenu index="3">
<template slot="title">工具</template> <template slot="title">工具</template>
<el-menu-item index="/assetManagement/googleOauthYoutube">Youtube账号管理</el-menu-item> <el-menu-item index="/tools/googleOauthYoutube">Youtube账号管理</el-menu-item>
<el-menu-item index="/assetManagement/uploadYoutube">Youtube视频上传</el-menu-item> <el-menu-item index="/tools/uploadYoutube">Youtube视频上传</el-menu-item>
<el-menu-item index="/assetManagement/YoutubeVideoManage">Youtube视频管理</el-menu-item> <el-menu-item index="/tools/YoutubeVideoManage">Youtube视频管理</el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div> </div>
......
src/views/uploadYoutube/YoutubeVideoManage.vue
View file @ b0e89c51
...@@ -240,7 +240,7 @@ export default { ...@@ -240,7 +240,7 @@ export default {
methods: { methods: {
goToUpload() { goToUpload() {
window.open('/assetManagement/uploadYoutube'); window.open('/tools/uploadYoutube');
}, },
async retryUploadYoutube(row) { async retryUploadYoutube(row) {
this.$set(row, 'retryStatus', "running"); this.$set(row, 'retryStatus', "running");
......
src/views/uploadYoutube/uploadYoutube.vue
View file @ b0e89c51
...@@ -439,7 +439,7 @@ export default { ...@@ -439,7 +439,7 @@ export default {
// 清空视频列表 // 清空视频列表
this.videoList = []; this.videoList = [];
// 跳转到视频管理页面 // 跳转到视频管理页面
this.$router.push('/assetManagement/YoutubeVideoManage'); this.$router.push('/tools/YoutubeVideoManage');
} else { } else {
this.$message.error('上传视频失败: ' + response.message); this.$message.error('上传视频失败: ' + response.message);
} }
...@@ -457,7 +457,7 @@ export default { ...@@ -457,7 +457,7 @@ export default {
}, },
handleCancel() { handleCancel() {
this.$router.push('/assetManagement/YoutubeVideoManage'); this.$router.push('/tools/YoutubeVideoManage');
}, },
tableRowClassName({ rowIndex }) { tableRowClassName({ rowIndex }) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment