hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

场景化优化

Browse Source
This commit is contained in:
liuzanying
2023-09-13 18:19:26 +08:00
parent 706366a248
commit afde02e35a
9 changed files with 264 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/router/index.js
View File

@@ -9,7 +9,7 @@ import { jsonp } from "vue-jsonp";
import { jsonpUrl } from "../config.js";
import { useStore } from "vuex";
import Creative from "./route.creative"; // 创作中心路由
import MarketList from "@/views/TempMarket/components/TempMarketLayout"
const store = useStore();
const constantRoutes = [
@@ -45,7 +45,12 @@ const constantRoutes = [
component: () => import(/* webpackChunkName: 'home' */ '@views/Home/Index.vue'),
children: [...ProjectManage, ...TemplateMarket, ...Contact, ...DocumentLibrary, ...DataStatistics, ...Creative]
},
{
path: '/market',
name: 'Market',
meta: { title: '模板库' },
component: MarketList,
},
{
path: '/edit-creative-scene',
name: 'editCreativeScene',

236
src/views/ProjectManage/components/NewSearch.vue
View File

@@ -5,6 +5,9 @@
class="search-layout"
>
<div style="display: flex;">
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-input class="custom-input" placeholder="请输入问卷名称" v-model:value="ruleForm.project_name" />
</a-form-item>
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-select
v-model:value="ruleForm.scene_code_info"
@@ -27,7 +30,6 @@
</a-select>
</a-form-item>
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-space>
<a-select
mode="tags"
v-model:value="ruleForm.tags"
@@ -52,42 +54,10 @@
</div>
</a-select-option>
</a-select>
</a-space>
</a-form-item>
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-space>
<a-select
mode="multiple"
v-model:value="ruleForm.template_tags"
placeholder="请选择模板标签"
:max-tag-count="1"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
class="custom-select"
>
<a-select-option
:value="item.id"
:label="item.title"
v-for="item in templateTagsList"
:key="item.id"
>
<div style="display: flex; justify-content: space-between">
<span :style="countColor(item.color)" :title="item.title">{{
item.title
}}</span>
</div>
</a-select-option>
<!-- <a-select-option v-for="item in tagsList" :key="item.id">
{{ item.title }}
</a-select-option> -->
</a-select>
</a-space>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-space>
<a-select
v-model:value="ruleForm.status"
style="border-radius: 4px;"
@@ -107,73 +77,97 @@
{{ item.label }}
</a-select-option>
</a-select>
</a-space>
</a-form-item>
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-space>
<a-select
mode="multiple"
label-in-value
:max-tag-count="1"
v-model:value="ruleForm.owner_id"
placeholder="请选择所有者"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
class="custom-select"
>
<!-- <template v-if="fetching" #notFoundContent>-->
<!-- <a-spin size="small" />-->
<!-- </template>-->
<a-select-option v-for="item in userList" :key="item.id">
{{ item.nickname }}
</a-select-option>
</a-select>
</a-space>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="width: 220px;margin-right: 16px;">
<a-space>
<a-range-picker
v-model:value="ruleForm.created_at"
:placeholder="['创建开始日期', '结束日期']"
@change="onChange"
class="custom-date-picker"/>
</a-space>
</a-form-item>
</div>
<!-- <div style="display: flex">-->
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- v-model:value="ruleForm.template_tags"-->
<!-- placeholder="请选择模板标签"-->
<!-- :max-tag-count="1"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- <a-select-option-->
<!-- :value="item.id"-->
<!-- :label="item.title"-->
<!-- v-for="item in templateTagsList"-->
<!-- :key="item.id"-->
<!-- >-->
<!-- <div style="display: flex; justify-content: space-between">-->
<!-- <span :style="countColor(item.color)" :title="item.title">{{-->
<!-- item.title-->
<!-- }}</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- &lt;!&ndash; <a-select-option v-for="item in tagsList" :key="item.id">-->
<!-- {{ item.title }}-->
<!-- </a-select-option> &ndash;&gt;-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- label-in-value-->
<!-- :max-tag-count="1"-->
<!-- v-model:value="ruleForm.owner_id"-->
<!-- placeholder="请选择所有者"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- &lt;!&ndash; <template v-if="fetching" #notFoundContent>&ndash;&gt;-->
<!-- &lt;!&ndash; <a-spin size="small" />&ndash;&gt;-->
<!-- &lt;!&ndash; </template>&ndash;&gt;-->
<!-- <a-select-option v-for="item in userList" :key="item.id">-->
<!-- {{ item.nickname }}-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <a-form-item style="width: 220px;margin-right: 16px;">-->
<!-- <a-range-picker-->
<!-- v-model:value="ruleForm.updated_at"-->
<!-- @change="handleUpdated"-->
<!-- :placeholder="['编辑开始日期', '结束日期']"-->
<!-- class="custom-date-picker"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </div>-->
<div style="display: flex">
<a-form-item style="width: 220px;margin-right: 16px;">
<a-space>
<a-range-picker
v-model:value="ruleForm.updated_at"
@change="handleUpdated"
:placeholder="['编辑开始日期', '结束日期']"
class="custom-date-picker"
/>
</a-space>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="min-width: 150px;margin-right: 16px;">
<a-space>
<a-input class="custom-input" placeholder="请输入问卷名称" v-model:value="ruleForm.project_name" />
</a-space>
</a-form-item>
<a-form-item class="button">
<a-button style="margin-right: 16px;" ghost type="primary" @click="onSubmit">查询</a-button>
<a-button ghost type="primary" @click="cancel">重置</a-button>
<a-button style="margin-right: 16px;" ghost type="primary" @click="cancel">重置</a-button>
<a-button ghost type="primary" @click="filter">更多筛选</a-button>
</a-form-item>
</div>
</a-form>
<a-modal v-model:visible="visible" title="筛选" :footer="null">
<ScreenBox :info="ruleForm" @cancel="visible = false" @update="update" />
</a-modal>
</template>
<script>
import { defineComponent, ref, onBeforeMount } from 'vue';
import { debounce } from 'lodash-es';
import {getUserList, getTagsList, getSceneList} from '../api';
import {message} from "ant-design-vue";
import ScreenBox from "./ScreenBox";
const statusOptions = [
{ label: '编辑中', value: 0 },
@@ -187,7 +181,12 @@ export default defineComponent({
default: () => {},
},
},
components: {
ScreenBox,
// SearchOutlined
},
setup(props, context) {
const visible = ref();
const formRef = ref();
const ruleForm = ref({
owner_id: undefined,
@@ -222,26 +221,26 @@ export default defineComponent({
/** 搜索用户防抖 */
const fetchUser = debounce(value => {
lastFetchId += 1;
userList.value = [];
// userList.value = [];
fetching.value = true;
tagsList.value = [];
getUsers(value);
// getUsers(value);
}, 500);
/** 获取用户列表 */
const getUsers = async (val)=> {
try {
const { data } = await getUserList({nickname: val || ''});
const fetchId = lastFetchId;
if (fetchId !== lastFetchId) {
return;
}
userList.value = data;
} catch(error) {
context.message.error(
error.data?.message || error.message || "服务器错误"
);
}
}
// const getUsers = async (val)=> {
// try {
// const { data } = await getUserList({nickname: val || ''});
// const fetchId = lastFetchId;
// if (fetchId !== lastFetchId) {
// return;
// }
// userList.value = data;
// } catch(error) {
// context.message.error(
// error.data?.message || error.message || "服务器错误"
// );
// }
// }
// 标签颜色
const countColor = (value) => {
let style = {}
@@ -361,23 +360,23 @@ export default defineComponent({
);
}
}
/** 获取项目标签列表 */
const getTemplateTagList = async () => {
try {
const { data } = await getTagsList({
type: 2
});
const fetchId = lastFetchId;
if (fetchId !== lastFetchId) {
return;
}
templateTagsList.value = data;
} catch (error) {
context.message.error(
error.data?.message || error.message || "服务器错误"
);
}
};
// /** 获取项目标签列表 */
// const getTemplateTagList = async () => {
// try {
// const { data } = await getTagsList({
// type: 2
// });
// const fetchId = lastFetchId;
// if (fetchId !== lastFetchId) {
// return;
// }
// templateTagsList.value = data;
// } catch (error) {
// context.message.error(
// error.data?.message || error.message || "服务器错误"
// );
// }
// };
const getScenes = async () => {
const data = await getSceneList();
if (data?.code) {
@@ -439,11 +438,21 @@ export default defineComponent({
};
context.emit('update', ruleForm.value);
};
const filter = () => {
visible.value = true;
}
function update(val) {
ruleForm.value = val;
console.log(12233,ruleForm.value);
// context.emit("update", ruleForm.value);
visible.value = false;
onSubmit();
}
onBeforeMount(()=> {
getUsers();
// getUsers();
getTagList();
getScenes();
getTemplateTagList();
// getTemplateTagList();
})
return {
formRef,
@@ -460,6 +469,9 @@ export default defineComponent({
scenesList,
statusOptions,
templateTagsList,
filter,
visible,
update,
}
},
})

2
src/views/ProjectManage/components/ProfessionalTempCard.vue
View File

@@ -34,7 +34,7 @@ const emit = defineEmits(['create']);
justify-content: flex-start;
border-radius: 8px;
border: 1px #DFDFDF solid;
height: 246px;
height: 265px;
img{
width: 100%;
height: 132px;

188
src/views/ProjectManage/components/ScreenBox.vue
View File

@@ -5,47 +5,47 @@
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item label="状态">
<a-checkbox-group
v-model:value="ruleForm.status"
:options="statusOptions"
/>
</a-form-item>
<a-form-item label="问卷标签">
<a-select
mode="multiple"
v-model:value="ruleForm.tags"
placeholder="选择问卷标签"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
class="custom-select"
>
<!-- <template v-if="fetching" #notFoundContent>
<a-spin size="small" />
</template> -->
<a-select-option
:value="item.id"
:label="item.title"
v-for="item in tagsList"
:key="item.id"
>
<div style="display: flex; justify-content: space-between">
<span :style="countColor(item.color)" :title="item.title">{{
item.title
}}</span>
</div>
</a-select-option>
<!-- <a-select-option v-for="item in tagsList" :key="item.id">
{{ item.title }}
</a-select-option> -->
</a-select>
</a-form-item>
<!-- <a-form-item label="状态">-->
<!-- <a-checkbox-group-->
<!-- v-model:value="ruleForm.status"-->
<!-- :options="statusOptions"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="问卷标签">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- v-model:value="ruleForm.tags"-->
<!-- placeholder="选择问卷标签"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- &lt;!&ndash; <template v-if="fetching" #notFoundContent>-->
<!-- <a-spin size="small" />-->
<!-- </template> &ndash;&gt;-->
<!-- <a-select-option-->
<!-- :value="item.id"-->
<!-- :label="item.title"-->
<!-- v-for="item in tagsList"-->
<!-- :key="item.id"-->
<!-- >-->
<!-- <div style="display: flex; justify-content: space-between">-->
<!-- <span :style="countColor(item.color)" :title="item.title">{{-->
<!-- item.title-->
<!-- }}</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- &lt;!&ndash; <a-select-option v-for="item in tagsList" :key="item.id">-->
<!-- {{ item.title }}-->
<!-- </a-select-option> &ndash;&gt;-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<a-form-item label="模板标签">
<a-select
mode="multiple"
v-model:value="ruleForm.templateTags"
placeholder="选择问卷标签"
v-model:value="ruleForm.template_tags"
placeholder="选择模板标签"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
@@ -87,13 +87,13 @@
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="创建时间">
<a-range-picker
v-model:value="ruleForm.created_at"
@change="handleCreated"
class="custom-date-picker"
/>
</a-form-item>
<!-- <a-form-item label="创建时间">-->
<!-- <a-range-picker-->
<!-- v-model:value="ruleForm.created_at"-->
<!-- @change="handleCreated"-->
<!-- class="custom-date-picker"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="编辑时间">
<a-range-picker
v-model:value="ruleForm.updated_at"
@@ -113,15 +113,15 @@
</a-form>
</template>
<script>
import { defineComponent, reactive, ref, onBeforeMount } from "vue";
import { defineComponent, reactive, ref, onBeforeMount, watch } from "vue";
import { debounce } from "lodash-es";
import { getUserList, getTagsList } from "../api";
const statusOptions = [
{ label: "编辑中", value: 0 },
{ label: "收集中", value: 1 },
{ label: "已结束", value: 2 },
];
// const statusOptions = [
// { label: "编辑中", value: 0 },
// { label: "收集中", value: 1 },
// { label: "已结束", value: 2 },
// ];
export default defineComponent({
props: {
info: {
@@ -129,34 +129,30 @@ export default defineComponent({
default: () => {},
},
},
setup(props, context) {
const formRef = ref();
const ruleForm = reactive({
status: [0],
owner_id: undefined,
created_at: "",
updated_at: "",
tags: [],
templateTags: [],
});
const ruleForm = ref(props.info);
// ruleForm.value = props.info;
let lastFetchId = 0;
const fetching = ref(false);
const userList = ref([]);
const tagsList = ref([]);
// const tagsList = ref([]);
const templateTagsList = ref([]);
const handleCreated = (value, dateString) => {
console.log("dateString", dateString);
ruleForm.created_at = dateString;
};
// const handleCreated = (value, dateString) => {
// console.log("dateString", dateString);
// ruleForm.created_at = dateString;
// };
const handleUpdated = (value, dateString) => {
ruleForm.updated_at = dateString;
ruleForm.value.updated_at = dateString;
};
/** 搜索用户防抖 */
const fetchUser = debounce((value) => {
lastFetchId += 1;
userList.value = [];
fetching.value = true;
tagsList.value = [];
templateTagsList.value = [];
// tagsList.value = [];
getUsers(value);
}, 500);
/** 获取用户列表 */
@@ -175,21 +171,21 @@ export default defineComponent({
}
};
/** 获取项目标签列表 */
const getTagList = async () => {
try {
const { data } = await getTagsList();
console.log(data);
const fetchId = lastFetchId;
if (fetchId !== lastFetchId) {
return;
}
tagsList.value = data;
} catch (error) {
context.message.error(
error.data?.message || error.message || "服务器错误"
);
}
};
// const getTagList = async () => {
// try {
// const { data } = await getTagsList();
// console.log(data);
// const fetchId = lastFetchId;
// if (fetchId !== lastFetchId) {
// return;
// }
// tagsList.value = data;
// } catch (error) {
// context.message.error(
// error.data?.message || error.message || "服务器错误"
// );
// }
// };
/** 获取项目标签列表 */
const getTemplateTagList = async () => {
try {
@@ -317,24 +313,7 @@ export default defineComponent({
formRef.value
.validate()
.then(() => {
const params = {
owner_id: ruleForm.owner_id
? ruleForm.owner_id.map((e) => e.key).join(",")
: "",
status: ruleForm.status ? ruleForm.status.join(",") : "",
created_at: ruleForm.created_at
? ruleForm.created_at.join(",")
: "",
updated_at: ruleForm.updated_at
? ruleForm.updated_at.join(",")
: "",
tags: ruleForm.tags ? ruleForm.tags.join(",") : "",
templates_tags: ruleForm.templateTags
? ruleForm.templateTags.join(",")
: "",
};
console.log("values", params);
context.emit("update", params);
context.emit("update", ruleForm.value);
})
.catch((error) => {
console.log("error", error);
@@ -342,22 +321,25 @@ export default defineComponent({
};
onBeforeMount(() => {
getUsers();
getTagList();
// getTagList();
getTemplateTagList();
});
watch(() => props.info, (val) => {
ruleForm.value = val;
},{immediate:true})
return {
formRef,
ruleForm,
onSubmit,
fetchUser,
handleCreated,
// handleCreated,
handleUpdated,
statusOptions,
// statusOptions,
labelCol: { style: { width: "150px" } },
wrapperCol: { span: 14 },
userList,
fetching,
tagsList,
// tagsList,
templateTagsList,
countColor,
};

23
src/views/ProjectManage/create/Index.vue
View File

@@ -60,13 +60,13 @@
:key="child.code"
:cardWidth="cardWidth"
@create="createProfessionalSurvey"/>
<div :style="`width:${cardWidth}px;height:246px;content:''`"
<div :style="`width:${cardWidth}px;height:260px;content:''`"
v-if="cardCount-item.children.slice(0 + cardCount * professionalCurrentPage,cardCount + cardCount * professionalCurrentPage).length > 0" />
<div :style="`width:${cardWidth}px;height:246px;content:''`"
<div :style="`width:${cardWidth}px;height:260px;content:''`"
v-if="cardCount-item.children.slice(0 + cardCount * professionalCurrentPage,cardCount + cardCount * professionalCurrentPage).length > 1" />
<div :style="`width:${cardWidth}px;height:246px;content:''`"
<div :style="`width:${cardWidth}px;height:260px;content:''`"
v-if="cardCount-item.children.slice(0 + cardCount * professionalCurrentPage,cardCount + cardCount * professionalCurrentPage).length > 2" />
<div :style="`width:${cardWidth}px;height:246px;content:''`"
<div :style="`width:${cardWidth}px;height:260px;content:''`"
v-if="cardCount-item.children.slice(0 + cardCount * professionalCurrentPage,cardCount + cardCount * professionalCurrentPage).length > 3" />
<div v-if="professionalCurrentPage > 0" class="back-button" @click="professionalPrev">
@@ -80,7 +80,7 @@
</div>
</div>
</div>
<TempMarketModal v-model:visible="tempVisible"></TempMarketModal>
<!-- <TempMarketModal v-model:visible="tempVisible"></TempMarketModal>-->
<a-modal
v-model:visible="visible"
:title="groupInfo.sn ? '重命名问卷' : '新建问卷'"
@@ -270,6 +270,7 @@ function normalizeScenes(list) {
if (!parent.children) {
parent.children = [];
}
if(item.title !== '其他场景'){
if(item.title === '报名'){
item.color = '#68AF47';
}else if(item.title === '签到'){
@@ -288,6 +289,7 @@ function normalizeScenes(list) {
item.color = '';
}
parent.children.push(item);
}
list.splice(index, 1);
}
@@ -326,7 +328,10 @@ function createCustom(item) {
function moreTemplate(){
console.log('模板中心');
tempVisible.value = true;
// tempVisible.value = true;
router.push({
path: '/market',
});
}
function createNormalSurvey(item){
@@ -613,16 +618,16 @@ function professionalPrev(){
margin: 0 auto 12px;
font-size: 24px;
font-weight: 600;
color: #70B936;
color: #68AF47;
}
.desc {
width: 20px;
line-height: 18px;
margin: 0 auto;
font-size: 12px;
font-size: 13px;
font-weight: 400;
color: #262626;
color: #000000;
opacity: 0.6;
}

4
src/views/ProjectManage/fragment/TableList.vue
View File

@@ -309,14 +309,14 @@ const columns = [
slots: {
customRender: "tag",
},
width: 200,
width: 120,
},
{
title: "问卷状态",
key: "status",
dataIndex: "status",
// align: "center",
width: 100,
width: 120,
sorter: true,
slots: {
customRender: "status",

3
src/views/TempMarket/components/TempMarketLayout.vue
View File

@@ -37,7 +37,8 @@ const list = ref([
])
const activeKey = ref(1);
function back() {
emits('back');
router.back();
// emits('back');
}
</script>

6
src/views/TempMarket/components/TempPublicLayout.vue
View File

@@ -39,6 +39,12 @@ async function getScenes() {
list.value = [];
data?.data.forEach(item => {
if(item.parentCode > 0){
if(item.parentCode === 1 && item.title === '其他场景'){
item.title = '日常-其他场景';
}
if(item.parentCode === 2 && item.title === '其他场景'){
item.title = '专业-其他场景';
}
list.value.push(item);
}
})

10
src/views/TempMarket/fragment/NewTableList.vue
View File

@@ -224,6 +224,7 @@ const columns = [
key: "quote_nums",
dataIndex: "quote_nums",
// align: "center",
sorter: true,
},
{
title: "模板标签",
@@ -502,10 +503,11 @@ export default defineComponent({
const ProjectGroupList = ref([]);
onBeforeMount(async () => {
page.value = props.pageIndex ? props.pageIndex : 1;
const { data } = await getSurveySorts(1);
if (data) {
search.value.sort = data.sort || "";
}
// const { data } = await getSurveySorts(1);
// if (data) {
// search.value.sort = data.sort || "";
// }
search.value.sort = 'quote_nums,desc';
getTemplates();
getGroupData();
});