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

feat:列表操作按钮靠右展示

Browse Source
This commit is contained in:
du.meimei
2025-05-18 19:12:39 +08:00
parent 8e4659f9e0
commit feafe2c201
1 changed files with 150 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,156 +1,162 @@
<template>
<a-form ref="formRef" :model="ruleForm" 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"
@keydown.enter="onSubmit"
/>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.scene_code_info"
style="border-radius: 4px"
:max-tag-count="1"
placeholder="请选择调研场景"
mode="multiple"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
<a-select-option :value="`${item.code}`" :label="item.title" v-for="item in scenesList" :key="`${item.code}`">
{{ item.parentTitle }}-{{ item.title }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
mode="tags"
v-model:value="ruleForm.tags"
placeholder="请选择问卷标签"
:filter-option="false"
:max-tag-count="1"
: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>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.status"
style="border-radius: 4px"
placeholder="请选择问卷状态"
mode="multiple"
:max-tag-count="1"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
<a-select-option
:value="`${item.value}`"
:label="item.label"
v-for="item in statusOptions"
:key="`${item.value}`"
<div class="flex">
<a-form ref="formRef" :model="ruleForm" 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"
@keydown.enter="onSubmit"
/>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.scene_code_info"
style="border-radius: 4px"
:max-tag-count="1"
placeholder="请选择调研场景"
mode="multiple"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
{{ item.label }}
</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.created_at"
:placeholder="['创建开始日期', '结束日期']"
@change="onChange"
class="custom-date-picker"
/>
</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>-->
<a-select-option :value="`${item.code}`" :label="item.title" v-for="item in scenesList" :key="`${item.code}`">
{{ item.parentTitle }}-{{ item.title }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
mode="tags"
v-model:value="ruleForm.tags"
placeholder="请选择问卷标签"
:filter-option="false"
:max-tag-count="1"
: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>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.status"
style="border-radius: 4px"
placeholder="请选择问卷状态"
mode="multiple"
:max-tag-count="1"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
<a-select-option
:value="`${item.value}`"
:label="item.label"
v-for="item in statusOptions"
:key="`${item.value}`"
>
{{ item.label }}
</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.created_at"
:placeholder="['创建开始日期', '结束日期']"
@change="onChange"
class="custom-date-picker"
/>
</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>-->
</a-form>
<div style="display: flex">
<a-form-item class="button">
<a-button style="margin-right: 16px" ghost type="primary" @click="onSubmit">查询</a-button>
<a-button style="margin-right: 16px" ghost type="primary" @click="cancel">重置</a-button>
<a-button style="margin-right: 16px" ghost type="primary" @click="filter">更多筛选</a-button>
<a-button ghost type="primary" @click="configVisible = true">列表配置</a-button>
<a-button ghost type="primary"
class="download-btn share-button" @click="configVisible = true">列表配置</a-button>
</a-form-item>
</div>
</a-form>
</div>
<a-modal v-model:visible="visible" title="筛选" :footer="null">
<ScreenBox :info="ruleForm" @cancel="visible = false" @update="update" />
</a-modal>