Files
ylst-pc/src/views/ProjectManage/fragment/TableList.vue
2022-11-15 11:55:26 +08:00

857 lines
21 KiB
Vue

<template>
<div class="pro-cont">
<Search
@create="
() => {
onCreate();
}
"
@temp="
() => {
onTemp();
}
"
@word="
() => {
onWord();
}
"
@update="handleSearch"
></Search>
<a-table
ref="table"
class="pro-table"
:columns="columns"
:data-source="tableData"
row-key="sn"
:scroll="{ x: 'max-content', y: 'calc(100vh - 268px)' }"
@change="handleChangeTable"
:pagination="false"
>
<template #status="{ record }">
<div
class="status-text"
:class="
record.status == 0 ? 'blue' : record.status == 1 ? 'green' : 'gray'
"
>
{{ record.status_txt }}
</div>
</template>
<template #action="{ record }">
<a-button
class="custom-button"
type="link"
@click="handleJumpTo($event, 'design', record.sn)"
>编辑</a-button
>
<a-button
class="custom-button"
type="link"
@click="handleJumpTo($event, 'link', record.sn)"
>发布</a-button
>
<a-button
class="custom-button"
type="link"
@click="handleJumpTo($event, 'particulars', record.sn)"
>分析</a-button
>
<a-dropdown>
<a
class="ant-dropdown-link"
style="display: inline-block"
@click.prevent
>
更多
<DownOutlined />
</a>
<template #overlay>
<SurveyAction
:info="record"
@click-action="actionClick"
@update="update"
/>
</template>
</a-dropdown>
</template>
<template #tag="{ record }">
<div
v-for="item in record.tags"
:key="item.id"
style="display: inline-block"
>
<!-- <div v-for="it in record.tag" :key="it.id" style="display:inline-block;"> -->
<a-tooltip
v-if="record.tag.length > 2"
placement="right"
:title="record.titles"
>
<div style="display: flex; flex-direction: row">
<div
:title="item.title"
:style="countColor(item.color)"
class="tagStyle"
>
{{ item.title }}
</div>
<div class="tagOmit" v-if="record.tags.length == 1">...</div>
</div>
</a-tooltip>
<div
v-else
:title="item.title"
:style="countColor(item.color)"
class="tagStyle"
>
{{ item.title }}
</div>
<!-- </div> -->
</div>
</template>
<template #titles="{ record }">
<a-tooltip placement="right" :title="record.remarks || ''">
<div>
<span>{{ record.project_name }}</span>
<span class="table-sell" v-if="record.template_tag"
>#{{ record.template_tag }}</span
>
</div>
</a-tooltip>
</template>
<!-- <template v-slot:footer>
<a-pagination class="pagination"
show-size-changer
v-model:current="page"
v-model:pageSize="pageSize"
v-model:defaultPageSize="pageSize"
:total="total"
@change="onPaginationChange"
@showSizeChange="onShowSizeChange" />
</template> -->
</a-table>
<div>
<a-pagination
class="pagination"
show-size-changer
v-model:current="page"
v-model:pageSize="pageSize"
v-model:defaultPageSize="pageSize"
:total="total"
@change="onPaginationChange"
@showSizeChange="onShowSizeChange"
/>
</div>
<CreateSurveySell
ref="createSurveySellRef"
:temp_sn="temp_sn"
:info="groupInfo"
:group-list="groupList"
:group-id="activeGroupId"
:curTemp="curTemp"
/>
<a-modal
v-model:visible="visible"
:title="groupInfo.sn ? '重命名问卷' : '新建问卷'"
:maskClosable="false"
:footer="null"
:zIndex="9999"
>
<CreateSurvey
v-if="visible"
ref="createSurveyRef"
:info="groupInfo"
:groupList="groupList"
:group-id="activeGroupId"
:temp_sn="temp_sn"
@cancel="visible = false"
@update="update"
@labelEdit="labelEdit"
@temPreview="handleTemPreview"
/>
</a-modal>
<a-modal
v-model:visible="wordVisible"
:title="groupInfo.sn ? '重命名问卷' : 'Word导入'"
:maskClosable="false"
:footer="null"
>
<CreateWord
:info="groupInfo"
:groupList="groupList"
:group-id="activeGroupId"
:temp_sn="temp_sn"
:zIndex="9999"
@cancel="wordVisible = false"
@update="update"
@labelEdit="labelEdit"
/>
</a-modal>
<a-modal
v-model:visible="visibleMove"
title="移动至分组"
:maskClosable="false"
:footer="null"
>
<MoveGroup
:group-id="activeGroupId"
:info="groupInfo"
@cancel="visibleMove = false"
@update="update"
/>
</a-modal>
<a-modal
v-model:visible="editLabelVisible"
title="编辑标签"
:footer="null"
:maskClosable="false"
:zIndex="100000"
>
<editLabel
:info="editLabelItem"
@cancel="editLabelVisible = false"
@update="editLabelUpdata"
/>
</a-modal>
<save-template-modal
:projectName="projectName"
v-model:visible="visibleSave"
:info="groupInfo"
@cancel="visibleSave = false"
@update="update"
/>
<a-modal
v-model:visible="tempVisible"
width="80%"
:maskClosable="false"
:footer="null"
>
<createFromTemplate @tempCreate="onTempCreate" />
</a-modal>
<SurveyDownload
v-model:visible="downloadVisible"
:sn="download_sn"
:name="projectName"
:type="1"
/>
</div>
</template>
<script>
import Search from "../components/Search";
import CreateSurvey from "../components/CreateSurvey";
import CreateWord from "../components/CreateWord";
import MoveGroup from "../components/MoveGroup";
import SurveyAction from "../components/SurveyAction";
import editLabel from "../components/editLabel.vue";
import SaveTemplateModal from "@views/ProjectManage/components/SaveTemplateModal";
import createFromTemplate from "@views/ProjectManage/components/createFromTemplate";
import SurveyDownload from "@/views/Answer/components/Modal/SurveyDownload";
import {
defineComponent,
ref,
nextTick,
onBeforeMount,
watch,
getCurrentInstance,
onBeforeUnmount,
computed,
} from "vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { getSurveyList, getSurveySorts } from "../api.js";
import { filter } from "lodash";
import CreateSurveySell from "@/views/TempMarket/components/CreateSurveySell.vue";
const columns = [
{
title: "问卷名称",
key: "project_name",
dataIndex: "project_name",
// align: "center",
sorter: true,
width: 260,
slots: {
customRender: "titles",
},
},
{
title: "问卷标签",
key: "tag[0].title",
dataIndex: "tag[0].title",
// align: "center",
slots: {
customRender: "tag",
},
width: 200,
},
{
title: "问卷状态",
key: "status",
dataIndex: "status",
// align: "center",
width: 120,
sorter: true,
slots: {
customRender: "status",
},
},
{
title: "答卷数",
key: "answer_num",
width: 100,
dataIndex: "answer_num",
// align: "center",
},
{
title: "所有者",
key: "owner",
width: 100,
dataIndex: "owner",
// align: "center",
},
{
title: "最近编辑",
key: "updated_user",
width: 100,
dataIndex: "updated_user",
// align: "center",
},
{
title: "创建时间",
key: "created_at",
width: 150,
dataIndex: "created_at",
// align: "center",
sorter: true,
},
{
title: "编辑时间",
key: "updated_at",
width: 150,
dataIndex: "updated_at",
// align: "center",
sorter: true,
},
{
title: "操作",
width: 200,
dataIndex: "action",
key: "action",
// align: "center",
fixed: "right",
slots: {
customRender: "action",
},
},
];
export default defineComponent({
name: "TableList",
components: {
Search,
CreateSurvey,
CreateWord,
DownOutlined,
SurveyAction,
MoveGroup,
editLabel,
SaveTemplateModal,
createFromTemplate,
SurveyDownload,
CreateSurveySell,
},
props: {
pageIndex: {
type: [Number, String],
default: undefined,
},
groupId: { type: Number, value: -1 },
groupList: {
type: Array,
required: true,
},
},
setup(props, context) {
const store = useStore();
const { proxy } = getCurrentInstance();
const downloadVisible = ref(false);
const download_sn = ref("");
const tableData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const visible = ref(false);
const visibleMove = ref(false);
const visibleSave = ref(false);
const tempVisible = ref(false);
const wordVisible = ref(false);
const activeGroupId = computed(() => store.state.groupName.groupId);
const search = ref({});
const groupInfo = ref({});
const createSurveyRef = ref();
const createSurveySellRef = ref();
const editLabelVisible = ref(false);
const editLabelItem = ref({});
const table = ref(null);
let isOverstep = ref(false);
const temp_sn = ref("");
const projectName = ref("");
const curTemp = ref({});
// const colorTagList = [
// {id:1,label:'颜色一',color:'#4DB8FA'},
// {id:2,label:'颜色二',color:'#0CC126'},
// {id:3,label:'颜色三',color:'#FF8800'},
// {id:4,label:'颜色四',color:'#FF374F'},
// {id:5,label:'颜色五',color:'#1C6FFF'},
// {id:6,label:'颜色六',color:'#11AEA7'},
// {id:7,label:'颜色七',color:'#25D8C8'},
// {id:8,label:'颜色八',color:'#FECB0D'},
// ]
watch(
() => props.groupId,
(newValue, oldValue) => {
console.log("修改右侧分组");
activeGroupId.value = newValue;
getSurveys();
}
);
// 标签颜色
const countColor = (value) => {
let style = {};
switch (value) {
case 1:
style = {
color: "#4DB8FA",
"border-color": "#4DB8FA",
};
break;
case 2:
style = {
color: "#0CC126",
"border-color": "#0CC126",
};
break;
case 3:
style = {
color: "#FF8800",
"border-color": "#FF8800",
};
break;
case 4:
style = {
color: "#FF374F",
"border-color": "#FF374F",
};
break;
case 5:
style = {
color: "#1C6FFF",
"border-color": "#1C6FFF",
};
break;
case 6:
style = {
color: "#11AEA7",
"border-color": "#11AEA7",
};
break;
case 7:
style = {
color: "#25D8C8",
"border-color": "#25D8C8",
};
break;
case 8:
style = {
color: "#FECB0D",
"border-color": "#FECB0D",
};
break;
case 9:
style = {
color: "4DB8FA",
"border-color": "4DB8FA",
};
}
return style;
};
const onPaginationChange = (current, perPage) => {
page.value = current;
pageSize.value = perPage;
getSurveys();
};
const onShowSizeChange = (current, perPage) => {
// window.localStorage.setItem('project_page', current)
page.value = current;
pageSize.value = perPage;
getSurveys();
};
// 列表操作
function actionClick(data) {
data.item.tag = data.item.tag.map((item) => {
return item.id;
});
groupInfo.value = data.item;
console.log(groupInfo.value, "groupInfo.value");
if (data.action === "renew") {
// 重命名问卷
visible.value = true;
}
if (data.action === "move") {
context.emit("getNewGroups");
visibleMove.value = true;
}
// if (data.action === 'build') {
// proxy.$router.push({
// path: '/survey/publish/link',
// query: { sn: data.item.sn }
// });
// }
if (data.action === "preview") {
proxy.$router.push({
path: "/preview",
query: {
sn: data.item.sn,
page: page.value,
name: data.item.project_name,
},
});
}
if (data.action === "analysis") {
proxy.$router.push({
path: "/survey/analyse/data-particulars",
query: { sn: data.item.sn },
});
}
if (data.action === "save") {
projectName.value = data.item.project_name;
visibleSave.value = true;
}
if (data.action === "download") {
console.log(data.item);
downloadVisible.value = true;
download_sn.value = data.item.sn;
projectName.value = data.item.project_name;
// projectName.value = data.item.project_name
// visibleSave.value = true
}
}
/** 排序 */
function handleChangeTable(pagination, filters, sorter) {
let sort = "asc";
switch (sorter.order) {
case "ascend":
sort = "asc";
break;
case "descend":
sort = "desc";
break;
default:
sort = "";
break;
}
search.value.sort = sort ? `${sorter.columnKey},${sort}` : null;
handleSearch(search.value);
}
/** 更新数据 */
function update() {
visibleMove.value = false;
visible.value = false;
handleSearch({});
}
/** 查询 */
function handleSearch(val) {
search.value = val || {};
page.value = 1;
pageSize.value = 10;
getSurveys();
}
/** 问卷列表 */
async function getSurveys() {
try {
const { data, meta } = await getSurveyList({
page: page.value,
per_page: pageSize.value,
group_id: activeGroupId.value,
...search.value,
});
data.forEach((iterator) => {
let info = iterator;
// console.log(info,'info');
for (const key in info) {
info.tags = [];
info.titles = "";
info.titles = info.tag
.map(function (obj) {
return obj.title;
})
.join("、");
if (key == "tag" && info.tag.length > 0) {
let item = info[key];
info.tags = [];
if (item.length > 1) {
if (item[0].title.length < 8 && item[1].title.length > 8) {
info.tags.push(item[0]);
isOverstep.value = false;
return;
} else if (item[0].title.length >= 5) {
info.tags.push(item[0]);
isOverstep.value = true;
info.tags.push({
id: "abc",
title: "...",
color: 9,
});
return;
} else if (
item.length > 2 &&
item[0].title.length < 5 &&
item[1].title.length < 5
) {
info.tags.push(item[0]);
info.tags.push(item[1]);
info.tags.push({
id: "abc",
title: "...",
color: 9,
});
isOverstep.value = false;
return;
} else {
info.tags.push(item[0]);
info.tags.push(item[1]);
isOverstep.value = false;
return;
}
} else {
info.tags.push(item[0]);
return;
}
}
info.tags = [...new Set(info.tags)];
}
});
// console.log(data, "列表数据");
// console.log(data, "data");
tableData.value = data;
nextTick(() => {
context.emit("tableheight", table.value.$el.offsetHeight);
});
total.value = meta.total;
} catch (error) {
console.log(error);
}
}
function labelEdit(item) {
editLabelItem.value = item;
editLabelVisible.value = true;
}
function editLabelUpdata() {
editLabelVisible.value = false;
createSurveyRef.value.getTagsListRequest();
}
onBeforeMount(async () => {
page.value = props.pageIndex ? props.pageIndex : 1;
const { data } = await getSurveySorts(0);
search.value.sort = data?.sort || "";
getSurveys();
});
onBeforeUnmount(() => {
console.log("sssdfsdfsddf");
});
const onCreate = () => {
temp_sn.value = "";
groupInfo.value.sn = "";
groupInfo.value.group_id = 0;
groupInfo.value.project_name = "";
groupInfo.value.remarks = "";
groupInfo.value.tag = [];
visible.value = true;
};
const onTempCreate = (activeRow) => {
temp_sn.value = activeRow.sn;
groupInfo.value.project_name = activeRow.title;
groupInfo.value.sn = "";
createSurveySellRef.value.openModal();
curTemp.value = JSON.parse(JSON.stringify(activeRow));
};
const onWord = () => {
temp_sn.value = "";
groupInfo.value.sn = "";
wordVisible.value = true;
};
const handleTemPreview = (data) => {
proxy.$router.push({
path: "/survey/planet/design",
query: { sn: data.sn },
});
};
const onTemp = () => {
tempVisible.value = true;
};
// 跳转
const handleJumpTo = (e, key, sn) => {
const urlJson = {
design: `/survey/planet/design?sn=${sn}&page=${page.value}`,
link: `/survey/publish/link?sn=${sn}&page=${page.value}`,
particulars: `/survey/analyse/diagram?sn=${sn}&page=${page.value}`,
};
proxy.$router.push({
path: urlJson[key],
query: {
sn,
page: page.value,
},
});
};
return {
table,
handleJumpTo,
handleChangeTable,
getSurveys,
handleSearch,
onPaginationChange,
onShowSizeChange,
actionClick,
update,
onCreate,
onWord,
wordVisible,
DownOutlined,
columns,
visible,
visibleMove,
visibleSave,
page,
pageSize,
total,
tableData,
activeGroupId,
groupInfo,
editLabelVisible,
editLabelItem,
labelEdit,
editLabelUpdata,
createSurveyRef,
createSurveySellRef,
onTemp,
tempVisible,
temp_sn,
onTempCreate,
countColor,
isOverstep,
projectName,
handleTemPreview,
downloadVisible,
download_sn,
curTemp,
};
},
});
</script>
<style lang="scss" scoped>
.pro-table {
overflow: hidden;
height: calc(100vh - 216px);
}
::v-deep .pro-table .ant-table-thead > tr > th {
color: #434343;
background: #f5f5f5;
}
.pro-table:deep(.ant-btn) {
padding: 0;
padding-right: 10px;
}
.pro-cont {
padding: 0 32px;
.tagStyle {
border-radius: 4px;
max-width: 120px;
padding: 0 5px;
margin: 0 5px;
display: inline-block;
border-width: 1px;
border-style: solid;
color: #4db8fa;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tagOmit {
border-radius: 4px;
padding: 0 5px;
margin: 0 5px;
display: inline-block;
border: 1px solid #4db8fa;
color: #4db8fa;
}
}
.status-text {
font-size: 14px;
display: flex;
// justify-content: center;
align-items: center;
&::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
}
}
.blue {
color: #32b0f6;
&::before {
background-color: #32b0f6;
}
}
.green {
color: #70b936;
&::before {
background-color: #70b936;
}
}
.gray {
color: #8c8c8c;
&::before {
background-color: #8c8c8c;
}
}
.pagination {
display: inline-flex;
justify-content: center;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 0;
padding: 13px 16px;
color: rgba(0, 0, 0, 0.85);
background: #fafafa;
border-top: 1px solid #f0f0f0;
border-radius: 0 0 2px 2px;
width: 100%;
}
.ant-dropdown-link {
color: #70b936;
}
:deep(.ant-table) {
width: 100%;
}
:deep(.ant-table-title) {
padding: 0 !important;
}
.ant-table-title {
padding: 0 !important;
}
.table-sell {
color: $yili-default-color;
word-break: keep-all;
}
</style>