<script setup lang="ts">
import { ref, reactive, onMounted, watch, CSSProperties } from 'vue';
import { useI18n } from 'vue-i18n';
import { debounce } from 'lodash-es';
import { useLabelColor } from '@/stores/index';
import ISSUE_CONFIG from '@/data/quick-issue/quick-issue';
import {
getRepoIssue,
getIssueSelectOption,
getReposData,
} from '@/api/api-quick-issue';
import { OptionList } from '@/shared/@types/type-quick-issue';
import { type CheckboxValueType } from 'element-plus'
import IconTraingleUp from '~icons/app/icon-arrow-traingle-up.svg';
import IconTraingleDown from '~icons/app/icon-arrow-traingle-down.svg';
import IconFilter from '~icons/app/icon-filter.svg';
import IconTag from '~icons/app/icon-tag';
import IconRefresh from '~icons/app/icon-refresh';
import IconSetting from '~icons/app/icon-setting';
import ODropdown from 'opendesign/dropdown/ODropdown.vue';
import OIcon from 'opendesign/icon/OIcon.vue';
import { ElOption } from 'element-plus';
const props = defineProps({
issueType: {
type: String,
default: '',
},
userName: {
type: String,
default: '',
},
});
const { t } = useI18n();
interface TypeTitelT {
[key: string]: string;
}
const typeTitel: TypeTitelT = {
submitted: t('quickIssue.MY_SUBMISSIONS'),
pending: t('quickIssue.MY_ASSIGNMENTS'),
all: t('quickIssue.ALL'),
};
const labelColor = useLabelColor();
const isShowLabel = ref(false);
const inputValue = ref('');
const optionValue = ref('');
const openDropDown = ref('');
const isOpen = ref(false);
const issueData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const totalPage = ref(0);
const checkAll = ref(false);
const isIndeterminate = ref(false);
const layout = ref('sizes, prev, pager, next, slot, jumper');
const keyArr = [
'authorsList',
'assigneesList',
'labelsList',
'branchesList',
'reposList',
'typesList',
'exLabelsList',
'milestonesList',
];
const filterList = ref(new Map());
for (let i = 0; i < keyArr.length; i++) {
filterList.value.set(keyArr[i], { page: 1, total: 0, keyword: '', data: [] });
}
const titleList = ref(
new Map([
[
'id',
{
value: 'ID',
},
],
[
'repo',
{
value: t('quickIssue.REPO_NAME'),
},
],
[
'title',
{
value: t('quickIssue.TITLE'),
},
],
[
'state',
{
value: t('quickIssue.STATE'),
},
],
[
'type',
{
value: t('quickIssue.TYPE'),
},
],
[
'author',
{
value: t('quickIssue.SUBMITTER'),
},
],
[
'assignee',
{
value: t('quickIssue.ASSIGNER'),
},
],
[
'priority',
{
value: t('quickIssue.PRIORITY'),
},
],
[
'milestone',
{
value: t('quickIssue.MILESTONE'),
},
],
[
'label',
{
value: t('quickIssue.LABEL'),
},
],
[
'branch',
{
value: t('quickIssue.BRANCH'),
},
],
[
'create_at',
{
value: t('quickIssue.CREATED_AT'),
},
],
[
'updata_at',
{
value: t('quickIssue.UPDATE_AT'),
},
],
])
);
const checkedTitle = ref([
'id',
'repo',
'type',
'title',
'state',
'author',
'label',
'create_at',
]);
const queryData = reactive({
page: 1,
per_page:
props.issueType === 'submitted' || props.issueType === 'pending' ? 5 : 10,
search: '',
issue_type: '',
priority: '',
direction: 'desc',
create: '',
author: props.issueType === 'submitted' ? props.userName : '',
sort: 'created_at',
assignee: props.issueType === 'pending' ? props.userName : '',
label: [],
branch: '',
repo: '',
issue_state:
props.issueType === 'pending'
? ['待办的', '进行中', '设计中', '开发中', '修复中', '新建']
: [],
milestone: [],
exclusion: [],
});
const optionQuery = reactive({
page: 1,
per_page: 40,
keyword: '',
});
const handleTitleClick = (title: string) => {
if (checkedTitle.value.includes(title)) {
const index = checkedTitle.value.indexOf(title);
checkedTitle.value.splice(index, 1);
} else {
checkedTitle.value.push(title);
}
};
const queryUserData = () => {
if (props.issueType === 'submitted' && props.userName) {
queryData.author === props.userName;
} else if (props.issueType === 'pending' && props.userName) {
queryData.assignee === props.userName;
}
};
queryUserData();
const handleCheckedValueChange = (value: CheckboxValueType[]) => {
const checkedCount = value.length;
checkAll.value = checkedCount === ISSUE_CONFIG.ISSUE_STATE.length;
isIndeterminate.value =
checkedCount > 0 && checkedCount < ISSUE_CONFIG.ISSUE_STATE.length;
};
const handleSizeChange = (val: number) => {
queryData.per_page = val;
totalPage.value = Math.ceil(total.value / val);
};
const handleCheckAllChange = (val: CheckboxValueType) => {
queryData.issue_state = val ? ISSUE_CONFIG.ISSUE_STATE : [];
isIndeterminate.value = false;
};
const handleCurrentChange = (val: number) => {
queryData.page = val;
currentPage.value = val;
};
function searchValchange() {
queryData.search = inputValue.value;
}
const valueChangeDebounced = debounce(
(val: string) => {
if (val !== optionQuery.keyword) {
filterList.value.get(`${openDropDown.value}List`).data = [];
filterList.value.get(`${openDropDown.value}List`).page = 1;
optionQuery.keyword = val;
optionQuery.page = 1;
}
},
500,
{
trailing: true,
}
);
function getLabelColor(label: string) {
const result: CSSProperties = {};
result.color = `#${
labelColor?.labelColor?.find((item: { name: string }) => {
return item.name === label;
})?.color
}`;
return result;
}
function getRepoIssueData() {
getRepoIssue(queryData).then((res) => {
if (res.data) {
total.value = res.total;
issueData.value = res.data;
totalPage.value = Math.ceil(total.value / queryData.per_page);
} else {
total.value = 0;
issueData.value = [];
}
});
}
function handleCommand(command: string | Array<string>, key: string) {
(queryData as any)[key] = command;
}
function getNextPage() {
filterList.value.get(`${openDropDown.value}List`).total >
filterList.value.get(`${openDropDown.value}List`).page * optionQuery.per_page
? (optionQuery.page = ++filterList.value.get(`${openDropDown.value}List`)
.page)
: '';
}
function changeVisible(stash: boolean, type: string) {
isOpen.value = stash;
if (!stash) {
optionQuery.page = 1;
optionQuery.keyword = '';
optionValue.value = '';
openDropDown.value = '';
} else {
openDropDown.value = type;
if (filterList.value.get(`${openDropDown.value}List`).keyword) {
filterList.value.get(`${openDropDown.value}List`).data = [];
optionQuery.keyword = filterList.value.get(
`${openDropDown.value}List`
).keyword;
}
}
}
function sortClick(sort: string) {
if (queryData.sort === sort) {
queryData.direction === 'desc'
? (queryData.direction = 'asc')
: (queryData.direction = 'desc');
}
queryData.sort = sort;
}
function clickLabel() {
getOption('exLabels');
isShowLabel.value = true;
}
function getOption(type: string) {
if (type === 'repos') {
getReposData(optionQuery).then((res: OptionList) => {
filterList.value.get(`${type}List`).data = [
...filterList.value.get(`${type}List`).data,
...res.data,
];
filterList.value.get(`${type}List`).total = res.total;
});
} else {
getIssueSelectOption(type, optionQuery).then((res: OptionList) => {
filterList.value.get(`${type}List`).data = [
...filterList.value.get(`${type}List`).data,
...res.data,
];
filterList.value.get(`${type}List`).total = res.total;
});
}
}
onMounted(() => {
try {
if (window.localStorage?.getItem('title')) {
checkedTitle.value = JSON.parse(
window.localStorage.getItem('title') as string
);
}
} catch {
checkedTitle.value = [
'id',
'repo',
'type',
'title',
'state',
'author',
'label',
'create_at',
];
}
getRepoIssueData();
getOption('authors');
getOption('assignees');
getOption('labels');
getOption('branches');
getOption('types');
getOption('repos');
getOption('milestones');
});
watch(
() => checkedTitle,
() => {
window.localStorage.setItem('title', JSON.stringify(checkedTitle.value));
},
{
deep: true,
}
);
const maxTag = 5;
watch(
() => [queryData.label, queryData.exclusion],
(oldValue, newValue) => {
if (
(oldValue[0].length === newValue[0].length &&
oldValue[0].length === maxTag &&
oldValue[1].length === newValue[1].length) ||
(oldValue[1].length === newValue[1].length &&
oldValue[1].length === maxTag &&
oldValue[0].length === newValue[0].length)
) {
return;
}
getRepoIssueData();
},
{
deep: true,
}
);
watch(
() => [
queryData.assignee,
queryData.author,
queryData.create,
queryData.direction,
queryData.page,
queryData.per_page,
queryData.branch,
queryData.repo,
queryData.search,
queryData.priority,
queryData.sort,
queryData.issue_state,
queryData.milestone,
queryData.issue_type,
],
() => {
getRepoIssueData();
}
);
watch(
() => optionQuery,
() => {
if (isOpen.value) {
getOption(openDropDown.value);
}
},
{
deep: true,
}
);
</script>
<template>
<div class="table-content" :class="props.userName ? 'login-style' : ''">
<div class="input-container">
<h2
v-show="props.userName"
:id="typeTitel[props.issueType]"
class="table-title"
>
{{ typeTitel[props.issueType] }}
</h2>
<div class="data-amount">（{{ total }}）</div>
<OSearch
v-model="inputValue"
:placeholder="t('quickIssue.PLACEHOLDER')"
:maxlength="100"
@change="searchValchange"
></OSearch>
</div>
<OTable class="quick-issue-table" :data="issueData" style="width: 100%">
<transition-group name="hello">
<el-table-column
v-if="checkedTitle.includes('id')"
key="id"
min-width="90"
>
<template #header>
<span>{{ t('quickIssue.ID') }}</span>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.number }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('repo')"
key="repo"
min-width="130"
>
<template #header>
<span :class="queryData.repo ? 'active' : ''">{{
queryData.repo || t('quickIssue.REPO_NAME')
}}</span>
<ODropdown
:max-height="250"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@command="(val: string) => handleCommand(val, 'repo')"
@visible-change="(val: boolean) => changeVisible(val, 'repos')"
>
<OIcon
class="filter-icon"
:class="queryData.repo ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<div class="search-box">
<ODropdownItem v-if="queryData.repo" :command="''">{{
t('quickIssue.CANCEL')
}}</ODropdownItem>
<OSearch
v-model="filterList.get('reposList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
@input="valueChangeDebounced"
></OSearch>
</div>
<ul v-if="filterList.get('reposList').data.length">
<ODropdownItem
v-for="item in filterList.get('reposList').data"
:key="item.repo"
:command="item.repo"
:class="queryData.repo === item.repo ? 'is-active' : ''"
>{{ item.repo }}</ODropdownItem
>
</ul>
<ODropdownItem v-else disabled class="empty-option"
>No Data</ODropdownItem
>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.repo }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('title')"
key="title"
min-width="350"
>
<template #header>
<span>{{ t('quickIssue.TITLE') }}</span>
</template>
<template #default="scope">
<span class="detail-page">
<a :href="scope.row.link" target="_blank">{{
scope.row.title
}}</a>
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('type')"
key="type"
min-width="100"
>
<template #header>
<span :class="queryData.issue_type ? 'active' : ''">{{
queryData.issue_type || t('quickIssue.TYPE')
}}</span>
<ODropdown
:max-height="250"
@command="(val: string) => handleCommand(val, 'issue_type')"
>
<OIcon
class="filter-icon"
:class="queryData.issue_type ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<ODropdownItem v-if="queryData.issue_type" :command="''">{{
t('quickIssue.CANCEL')
}}</ODropdownItem>
<ODropdownItem
v-for="item in filterList.get('typesList').data"
:key="item.name"
:command="item.name"
:class="queryData.issue_type === item.name ? 'is-active' : ''"
>{{ item.name }}</ODropdownItem
>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.issue_type }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('state')"
key="state"
min-width="100"
>
<template #header>
<span :class="queryData.issue_state.length ? 'active' : ''">{{
queryData.issue_state.join(', ') || t('quickIssue.STATE')
}}</span>
<ODropdown
:max-height="250"
@command="(val: string) => handleCommand(val, 'issue_state')"
>
<OIcon
class="filter-icon"
:class="queryData.issue_state.length ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<el-dropdown-menu>
<ElCheckbox
v-model="checkAll"
:indeterminate="isIndeterminate"
class="o-checkbox"
@change="handleCheckAllChange"
>{{ t('quickIssue.SELECT_ALL') }}</ElCheckbox
>
<ElCheckboxGroup
v-model="queryData.issue_state"
@change="handleCheckedValueChange"
>
<ElCheckbox
v-for="item in ISSUE_CONFIG.ISSUE_STATE"
:key="item"
:label="item"
:value="item"
>
{{ item }}
</ElCheckbox>
</ElCheckboxGroup>
</el-dropdown-menu>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.issue_state }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('milestone')"
key="milestone"
min-width="200"
>
<template #header>
<span
:class="queryData.milestone.length ? 'active' : ''"
:title="queryData.milestone.join(', ')"
>{{
queryData.milestone.join(', ') || t('quickIssue.MILESTONE')
}}</span
>
<ODropdown
:max-height="250"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@visible-change="(val: boolean) => changeVisible(val, 'milestones')"
@command="(val: string) => handleCommand(val, 'milestone')"
>
<OIcon
class="filter-icon"
:class="queryData.issue_state.length ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<div class="search-box">
<ODropdownItem
v-if="queryData.milestone.length"
:command="[]"
>{{ t('quickIssue.CANCEL') }}</ODropdownItem
>
<OSearch
v-model="filterList.get('milestonesList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
@input="valueChangeDebounced"
></OSearch>
</div>
<ElCheckboxGroup
v-if="filterList.get('milestonesList').data.length"
:max="5"
v-model="queryData.milestone"
>
<ElCheckbox
v-for="item in filterList.get('milestonesList').data"
:key="item"
:label="item"
:value="item"
>
{{ item }}
</ElCheckbox>
</ElCheckboxGroup>
<ODropdownItem v-else disabled class="empty-option"
>No Data</ODropdownItem
>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.milestone }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="
checkedTitle.includes('author') && props.issueType !== 'submitted'
"
key="author"
min-width="130"
>
<template #header>
<span
:title="queryData.author"
:class="queryData.author ? 'active' : ''"
>{{
queryData.author.replaceAll(',', ',\n') ||
t('quickIssue.SUBMITTER')
}}</span
>
<ODropdown
:max-height="250"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@command="(val: string) => handleCommand(val, 'author')"
@visible-change="(val: boolean) => changeVisible(val, 'authors')"
>
<OIcon
class="filter-icon"
:class="queryData.author ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<div class="search-box">
<ODropdownItem v-if="queryData.author" :command="''">{{
t('quickIssue.CANCEL')
}}</ODropdownItem>
<OSearch
v-model="filterList.get('authorsList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
@input="valueChangeDebounced"
></OSearch>
</div>
<ul v-if="filterList.get('authorsList').data.length">
<ODropdownItem
v-for="item in filterList.get('authorsList').data"
:key="item"
:command="item"
:class="queryData.author === item ? 'is-active' : ''"
>{{ item }}</ODropdownItem
>
</ul>
<ODropdownItem v-else disabled class="empty-option"
>No Data</ODropdownItem
>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
<template v-if="scope.row.reporter">
{{ scope.row.reporter }}
</template>
<template v-else-if="scope.row.author">
<a
v-if="scope.row.author_link"
:key="scope.row.author"
:href="scope.row.author_link"
:title="scope.row.author"
class="link"
target="_blank"
>
{{ scope.row.author }}
</a>
<span v-else>{{ scope.row.author }}</span>
</template>
</span>
</template>
</el-table-column>
<el-table-column
v-if="
checkedTitle.includes('assignee') && props.issueType !== 'pending'
"
key="assignee"
min-width="110"
>
<template #header>
<span
:title="queryData.assignee"
:class="queryData.assignee ? 'active' : ''"
>{{
queryData.assignee.replaceAll(',', ',\n') ||
t('quickIssue.ASSIGNER')
}}</span
>
<ODropdown
:max-height="250"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@command="(val: string) => handleCommand(val, 'assignee')"
@visible-change="(val: boolean) => changeVisible(val, 'assignees')"
>
<OIcon
class="filter-icon"
:class="queryData.assignee ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<div class="search-box">
<ODropdownItem v-if="queryData.assignee" :command="''">{{
t('quickIssue.CANCEL')
}}</ODropdownItem>
<OSearch
v-model="filterList.get('assigneesList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
@input="valueChangeDebounced"
></OSearch>
</div>
<ul v-if="filterList.get('assigneesList').data.length">
<ODropdownItem
v-for="item in filterList.get('assigneesList').data"
:key="item"
:command="item"
:class="queryData.assignee === item ? 'is-active' : ''"
>{{ item }}</ODropdownItem
>
</ul>
<ODropdownItem v-else disabled class="empty-option"
>No Data</ODropdownItem
>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
<a
v-if="scope.row.assignee_link"
:key="scope.row.assignee"
:href="scope.row.assignee_link"
:title="scope.row.assignee"
class="link"
target="_blank"
>
{{ scope.row.assignee }}
</a>
<span v-else>{{ scope.row.assignee }}</span>
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('priority')"
key="priority"
min-width="100"
>
<template #header>
<span :class="queryData.priority ? 'active' : ''">{{
queryData.priority || t('quickIssue.PRIORITY')
}}</span>
<ODropdown
@command="(val: string) => handleCommand(val, 'priority')"
>
<OIcon
class="filter-icon"
:class="queryData.priority ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<el-dropdown-menu>
<ODropdownItem v-if="queryData.priority" :command="''">{{
t('quickIssue.CANCEL')
}}</ODropdownItem>
<ODropdownItem
v-for="item in ISSUE_CONFIG.PRIORITY"
:key="item.value"
:command="item.value"
:class="
queryData.priority === item.value ? 'is-active' : ''
"
>{{ item.value }}</ODropdownItem
>
</el-dropdown-menu>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.priority }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('label')"
key="label"
min-width="180"
>
<template #header>
<div
class="filter-box"
:class="
queryData.label.length || queryData.exclusion.length
? 'active'
: ''
"
>
<p v-if="queryData.label.length || queryData.exclusion.length">
<span class="label-title" :title="queryData.label.join(',')">{{
queryData.label.join(',')
}}</span>
<span
class="label-title label-exclusion"
:title="queryData.exclusion.join(',')"
>{{ queryData.exclusion.join(',') }}</span
>
</p>
<span v-else>{{ t('quickIssue.LABEL') }}</span>
</div>
<OIcon
class="filter-icon"
:class="queryData.label.length ? 'active' : ''"
@click="clickLabel()"
>
<IconFilter></IconFilter>
</OIcon>
</template>
<template #default="scope">
<span class="detail-page">
<p
v-for="item in scope.row.labels?.split(',')"
:key="item"
:title="item"
:style="getLabelColor(item)"
>
<OIcon v-if="item">
<IconTag></IconTag>
</OIcon>
{{ item }}
</p>
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('branch')"
key="branch"
min-width="100"
>
<template #header>
<span :class="queryData.branch ? 'active' : ''">{{
queryData.branch || t('quickIssue.BRANCH')
}}</span>
<ODropdown
:max-height="250"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@command="(val: string) => handleCommand(val, 'branch')"
@visible-change="(val: boolean) => changeVisible(val, 'branches')"
>
<OIcon
class="filter-icon"
:class="queryData.branch ? 'active' : ''"
>
<IconFilter></IconFilter>
</OIcon>
<template #dropdown>
<div class="search-box">
<ODropdownItem v-if="queryData.branch" :command="''">{{
t('quickIssue.CANCEL')
}}</ODropdownItem>
<OSearch
v-model="filterList.get('branchesList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
@input="valueChangeDebounced"
></OSearch>
</div>
<ul v-if="filterList.get('branchesList').data.length">
<ODropdownItem
v-for="item in filterList.get('branchesList').data"
:key="item"
:command="item"
:class="queryData.branch === item ? 'is-active' : ''"
>{{ item }}</ODropdownItem
>
</ul>
<ODropdownItem v-else disabled class="empty-option"
>No Data</ODropdownItem
>
</template>
</ODropdown>
</template>
<template #default="scope">
<span class="detail-page">
{{ scope.row.branch }}
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('create_at')"
key="create_at"
min-width="120"
>
<template #header>
<span>{{ t('quickIssue.CREATED_AT') }}</span>
<div class="sort-time" @click="sortClick('created_at')">
<OIcon
class="icon-up"
:class="
queryData.direction === 'asc' &&
queryData.sort === 'created_at'
? 'slot-active'
: ''
"
>
<IconTraingleUp></IconTraingleUp>
</OIcon>
<OIcon
class="icon-down"
:class="
queryData.direction === 'desc' &&
queryData.sort === 'created_at'
? 'slot-active'
: ''
"
>
<IconTraingleDown></IconTraingleDown>
</OIcon>
</div>
</template>
<template #default="scope">
<span class="detail-page">
<p>{{ scope.row.created_at?.split(' ')[0] }}</p>
<p>{{ scope.row.created_at?.split(' ')[1] }}</p>
</span>
</template>
</el-table-column>
<el-table-column
v-if="checkedTitle.includes('updata_at')"
key="updata_at"
min-width="120"
>
<template #header>
<span>{{ t('quickIssue.UPDATE_AT') }}</span>
<div class="sort-time" @click="sortClick('updated_at')">
<OIcon
class="icon-up"
:class="
queryData.direction === 'asc' &&
queryData.sort === 'updated_at'
? 'slot-active'
: ''
"
>
<IconTraingleUp></IconTraingleUp>
</OIcon>
<OIcon
class="icon-down"
:class="
queryData.direction === 'desc' &&
queryData.sort === 'updated_at'
? 'slot-active'
: ''
"
>
<IconTraingleDown></IconTraingleDown>
</OIcon>
</div>
</template>
<template #default="scope">
<span class="detail-page">
<p>{{ scope.row.updated_at?.split(' ')[0] }}</p>
<p>{{ scope.row.updated_at?.split(' ')[1] }}</p>
</span>
</template>
</el-table-column>
<el-table-column
key="setting"
width="50"
fixed="right"
class-name="setting-title"
>
<template #header>
<el-popover width="286" trigger="click">
<template #reference>
<OIcon :class="queryData.assignee ? 'active' : ''">
<IconSetting></IconSetting>
</OIcon>
</template>
<div class="filter-title">
<OTag
v-for="(item, index) in titleList"
v-show="
!(
item[0] === 'author' && props.issueType === 'submitted'
) &&
!(item[0] === 'assignee' && props.issueType === 'pending')
"
:key="index"
checkable
checked
:type="checkedTitle.includes(item[0]) ? 'primary' : 'text'"
@click="handleTitleClick(item[0])"
>
{{ item[1].value }}
</OTag>
</div>
</el-popover>
</template>
</el-table-column>
</transition-group>
</OTable>
<OPagination
v-model:page-size="queryData.per_page"
v-model:currentPage="queryData.page"
class="pagination"
:page-sizes="[5, 10, 20, 40, 80]"
:layout="layout"
:total="total"
:background="true"
:hide-on-single-page="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
<span class="slot-content">{{ currentPage }}/{{ totalPage }}</span>
</OPagination>
</div>
<ODialog v-model="isShowLabel" :show-close="true" :lock-scroll="true">
<h1 class="title">{{ t('quickIssue.LABEL') }}</h1>
<div class="label-select">
<span class="label">{{ t('quickIssue.SELECT_LABEL') }}</span>
<OSelect
v-model="queryData.label"
multiple
:placeholder="t('quickIssue.SELECT')"
popper-class="remove-scrollbar"
:multiple-limit="5"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@visible-change="(val: boolean) => changeVisible(val, 'labels')"
>
<OSearch
v-model="filterList.get('labelsList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
style="padding: 0 8px"
@input="valueChangeDebounced"
></OSearch>
<el-scrollbar class="Escrollbar">
<ElOption
v-if="!filterList.get('labelsList').data.length"
:key="''"
:label="'no date'"
:value="''"
:disabled="true"
style="text-align: center"
/>
<ElOption
v-for="item in filterList.get('labelsList').data"
:key="item"
:label="item"
:value="item"
/>
</el-scrollbar>
</OSelect>
<OIcon class="icon-refresh" @click="queryData.label = []">
<IconRefresh> </IconRefresh>
</OIcon>
</div>
<p class="label-tip">
{{ t('quickIssue.LABER_TIP', [t('quickIssue.ISSUE')]) }}
</p>
<div class="label-select">
<span class="label">{{ t('quickIssue.EXCLUDE') }}</span>
<OSelect
v-model="queryData.exclusion"
multiple
:placeholder="t('quickIssue.SELECT')"
:multiple-limit="5"
popper-class="remove-scrollbar"
:listener-scorll="true"
@scorll-bottom="getNextPage"
@visible-change="(val: boolean) => changeVisible(val, 'exLabels')"
>
<OSearch
v-model="filterList.get('exLabelsList').keyword"
:placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
style="padding: 0 8px"
@input="valueChangeDebounced"
></OSearch>
<ElOption
v-if="!filterList.get('exLabelsList').data.length"
:key="''"
:label="'no date'"
:value="''"
:disabled="true"
style="text-align: center"
/>
<ElOption
v-for="item in filterList.get('exLabelsList').data"
:key="item"
:label="item"
:value="item"
/>
</OSelect>
<OIcon class="icon-refresh" @click="queryData.exclusion = []">
<IconRefresh> </IconRefresh>
</OIcon>
</div>
<p class="label-tip">
{{ t('quickIssue.LABER_TIP1', [t('quickIssue.ISSUE')]) }}
</p>
</ODialog>
</template>
<style lang="scss" scoped>
.app-content {
position: relative;
}
.table-content {
margin-bottom: 40px;
.table-title {
flex-shrink: 0;
font-weight: 300;
font-size: var(--o-font-size-h4);
&::before {
content: '';
display: block;
height: 40px;
margin-top: -40px;
visibility: hidden;
}
}
.data-amount {
margin: 0 24px 0 0;
display: none;
}
}
.login-style {
padding: 40px;
background-color: var(--o-color-bg2);
.input-container {
align-items: center;
:deep(.o-search) {
height: 40px;
}
.data-amount {
display: flex;
align-items: center;
font-weight: 300;
font-size: var(--o-font-size-h4);
}
}
.quick-issue-table {
margin-top: var(--o-spacing-h4);
}
.o-pagination {
margin-top: 40px;
margin-bottom: 0;
}
}
.el-popper.el-select__popper {
--el-popper-border-radius: 0;
.el-input {
position: relative;
padding: 0px 8px;
position: sticky;
top: 8px;
background-color: #fff;
z-index: 1;
&::before {
position: absolute;
content: '';
height: 10px;
width: 100%;
top: -10px;
left: 0;
background-color: #fff;
}
}
.el-input__wrapper {
padding: 0 32px 0 20px;
box-shadow: 0 0 0 1px var(--o-color-border1) inset;
&:hover {
box-shadow: 0 0 0 1px var(--o-color-border1) inset;
}
}
}
.issue-btn {
border-color: var(--o-color-white);
color: var(--o-color-white);
@media (max-width: 767px) {
padding: 3px 16px;
font-size: var(--o-font-size-text);
line-height: var(--o-line-height-text);
}
}
:deep(.el-popover.el-popper) {
border-radius: 0;
}
.filter-title {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 260px;
background-color: #fff;
}
.active {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-spacing: 100vw;
color: var(--o-color-brand1);
.label-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.label-exclusion {
text-decoration: line-through;
}
}
:deep(.quick-issue-table) {
margin-top: var(--o-spacing-h3);
box-shadow: none;
.el-table__body-wrapper {
transform: scaleY(-1);
.el-scrollbar__view {
transform: scaleY(-1);
}
}
.el-table__inner-wrapper {
width: 100%;
}
tr {
.cell {
display: flex;
align-items: center;
.detail-page {
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
.o-icon {
display: inline-block;
}
}
.active {
color: var(--o-color-warning1);
}
}
.filter-icon {
cursor: pointer;
flex-shrink: 0;
margin-left: 5px;
color: var(--o-color-text1);
}
.select-icon {
font-size: 24px;
}
.sort-time {
cursor: pointer;
display: flex;
flex-direction: column;
color: #999;
.icon-up {
margin-bottom: -4px;
}
.icon-down {
margin-top: -4px;
}
.slot-active {
color: var(--o-color-text1);
}
}
}
}
.setting-title {
.cell {
justify-content: center;
padding: 0;
}
.o-icon {
cursor: pointer;
font-size: 20px;
}
}
}
.input-container {
display: flex;
.table-title {
flex-shrink: 0;
}
@media screen and (max-width: 768px) {
margin-bottom: var(--o-spacing-h5);
}
:deep(.o-search) {
height: 48px;
@media screen and (max-width: 768px) {
height: 36px;
}
}
}
.pagination {
margin-top: var(--o-spacing-h2);
.el-pager {
.is-active {
background-color: var(--o-color-brand2) !important;
}
.number:hover,
.more:hover {
background-color: var(--o-color-brand2);
}
}
.slot-content {
color: var(--o-color-white);
}
}
.el-dropdown__popper {
.o-dropdown-item:empty {
display: none;
}
.o-checkbox-group {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.o-checkbox {
display: flex;
align-items: center;
margin: 4px 8px;
}
.el-checkbox {
display: flex;
align-items: center;
margin: 4px 8px;
height: 22px;
:deep(.el-checkbox__label) {
color: var(--o-color-text1);
}
}
}
</style>
<style lang="scss">
.o-dialog {
max-width: 500px;
width: 100%;
border-radius: 0;
.el-dialog__header {
padding: 0;
.el-dialog__headerbtn {
top: var(--o-spacing-h4);
right: var(--o-spacing-h4);
font-size: var(--o-font-size-h5);
width: fit-content;
height: fit-content;
z-index: 10;
.el-dialog__close {
color: var(--o-color-text1);
}
}
}
.el-dialog__body {
padding: var(--o-spacing-h4);
.title {
font-weight: 500;
line-height: var(--o-line-height-h8);
font-size: var(--o-font-size-h8);
}
.label-select {
display: flex;
align-items: center;
justify-content: flex-start;
.label {
margin-right: var(--o-spacing-h6);
word-break: break-word;
min-width: 58px;
}
.icon-refresh {
cursor: pointer;
margin-left: var(--o-spacing-h8);
font-size: var(--o-font-size-h7);
color: var(--o-color-text1);
}
}
.label-tip {
margin: 12px 0 0 68px;
color: var(--o-color-brand1);
}
.label-select:nth-of-type(1) {
margin-top: var(--o-spacing-h4);
}
.label-tip:nth-of-type(1) {
margin-bottom: 24px;
}
.o-select {
.el-input__wrapper {
min-width: 350px;
box-shadow: 0 0 0 1px var(--o-color-border1) inset;
&:hover {
box-shadow: 0 0 0 1px var(--o-color-border1) inset;
}
.o-icon {
font-size: var(--o-font-size-h7);
}
}
}
}
}
</style>
