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> <template>
<a-form ref="formRef" :model="ruleForm" class="search-layout"> <div class="flex">
<div style="display: flex"> <a-form ref="formRef" :model="ruleForm" class="search-layout">
<a-form-item style="min-width: 150px; margin-right: 16px"> <div style="display: flex">
<a-input <a-form-item style="min-width: 150px; margin-right: 16px">
class="custom-input" <a-input
placeholder="请输入问卷名称" class="custom-input"
v-model:value="ruleForm.project_name" placeholder="请输入问卷名称"
@keydown.enter="onSubmit" v-model:value="ruleForm.project_name"
/> @keydown.enter="onSubmit"
</a-form-item> />
<a-form-item style="min-width: 150px; margin-right: 16px"> </a-form-item>
<a-select <a-form-item style="min-width: 150px; margin-right: 16px">
v-model:value="ruleForm.scene_code_info" <a-select
style="border-radius: 4px" v-model:value="ruleForm.scene_code_info"
:max-tag-count="1" style="border-radius: 4px"
placeholder="请选择调研场景" :max-tag-count="1"
mode="multiple" placeholder="请选择调研场景"
:filter-option="false" mode="multiple"
:not-found-content="fetching ? undefined : null" :filter-option="false"
class="custom-select show-select" :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}`"
> >
{{ item.label }} <a-select-option :value="`${item.code}`" :label="item.title" v-for="item in scenesList" :key="`${item.code}`">
</a-select-option> {{ item.parentTitle }}-{{ item.title }}
</a-select> </a-select-option>
</a-form-item> </a-select>
</div> </a-form-item>
<div style="display: flex"> <a-form-item style="min-width: 150px; margin-right: 16px">
<a-form-item style="width: 220px; margin-right: 16px"> <a-select
<a-range-picker mode="tags"
v-model:value="ruleForm.created_at" v-model:value="ruleForm.tags"
:placeholder="['创建开始日期', '结束日期']" placeholder="请选择问卷标签"
@change="onChange" :filter-option="false"
class="custom-date-picker" :max-tag-count="1"
/> :not-found-content="fetching ? undefined : null"
</a-form-item> @search="fetchUser"
</div> class="custom-select"
<!-- <div style="display: flex">--> >
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">--> <template v-if="fetching" #notFoundContent>
<!-- <a-select--> <a-spin size="small" />
<!-- mode="multiple"--> </template>
<!-- v-model:value="ruleForm.template_tags"--> <a-select-option :value="item.id" :label="item.title" v-for="item in tagsList" :key="item.id">
<!-- placeholder="请选择模板标签"--> <div style="display: flex; justify-content: space-between">
<!-- :max-tag-count="1"--> <span :style="countColor(item.color)" :title="item.title">{{ item.title }}</span>
<!-- :filter-option="false"--> </div>
<!-- :not-found-content="fetching ? undefined : null"--> </a-select-option>
<!-- @search="fetchUser"--> </a-select>
<!-- class="custom-select"--> </a-form-item>
<!-- >--> </div>
<!-- <a-select-option--> <div style="display: flex">
<!-- :value="item.id"--> <a-form-item style="min-width: 150px; margin-right: 16px">
<!-- :label="item.title"--> <a-select
<!-- v-for="item in templateTagsList"--> v-model:value="ruleForm.status"
<!-- :key="item.id"--> style="border-radius: 4px"
<!-- >--> placeholder="请选择问卷状态"
<!-- <div style="display: flex; justify-content: space-between">--> mode="multiple"
<!-- <span :style="countColor(item.color)" :title="item.title">{{--> :max-tag-count="1"
<!-- item.title--> :filter-option="false"
<!-- }}</span>--> :not-found-content="fetching ? undefined : null"
<!-- </div>--> class="custom-select show-select"
<!-- </a-select-option>--> >
<!-- &lt;!&ndash; <a-select-option v-for="item in tagsList" :key="item.id">--> <a-select-option
<!-- {{ item.title }}--> :value="`${item.value}`"
<!-- </a-select-option> &ndash;&gt;--> :label="item.label"
<!-- </a-select>--> v-for="item in statusOptions"
<!-- </a-form-item>--> :key="`${item.value}`"
<!-- </div>--> >
<!-- <div style="display: flex">--> {{ item.label }}
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">--> </a-select-option>
<!-- <a-select--> </a-select>
<!-- mode="multiple"--> </a-form-item>
<!-- label-in-value--> </div>
<!-- :max-tag-count="1"--> <div style="display: flex">
<!-- v-model:value="ruleForm.owner_id"--> <a-form-item style="width: 220px; margin-right: 16px">
<!-- placeholder="请选择所有者"--> <a-range-picker
<!-- :filter-option="false"--> v-model:value="ruleForm.created_at"
<!-- :not-found-content="fetching ? undefined : null"--> :placeholder="['创建开始日期', '结束日期']"
<!-- @search="fetchUser"--> @change="onChange"
<!-- class="custom-select"--> class="custom-date-picker"
<!-- >--> />
<!-- &lt;!&ndash; <template v-if="fetching" #notFoundContent>&ndash;&gt;--> </a-form-item>
<!-- &lt;!&ndash; <a-spin size="small" />&ndash;&gt;--> </div>
<!-- &lt;!&ndash; </template>&ndash;&gt;--> <!-- <div style="display: flex">-->
<!-- <a-select-option v-for="item in userList" :key="item.id">--> <!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- {{ item.nickname }}--> <!-- <a-select-->
<!-- </a-select-option>--> <!-- mode="multiple"-->
<!-- </a-select>--> <!-- v-model:value="ruleForm.template_tags"-->
<!-- </a-form-item>--> <!-- placeholder="请选择模板标签"-->
<!-- </div>--> <!-- :max-tag-count="1"-->
<!-- <div style="display: flex">--> <!-- :filter-option="false"-->
<!-- <a-form-item style="width: 220px;margin-right: 16px;">--> <!-- :not-found-content="fetching ? undefined : null"-->
<!-- <a-range-picker--> <!-- @search="fetchUser"-->
<!-- v-model:value="ruleForm.updated_at"--> <!-- class="custom-select"-->
<!-- @change="handleUpdated"--> <!-- >-->
<!-- :placeholder="['编辑开始日期', '结束日期']"--> <!-- <a-select-option-->
<!-- class="custom-date-picker"--> <!-- :value="item.id"-->
<!-- />--> <!-- :label="item.title"-->
<!-- </a-form-item>--> <!-- v-for="item in templateTagsList"-->
<!-- </div>--> <!-- :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"> <div style="display: flex">
<a-form-item class="button"> <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="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="cancel">重置</a-button>
<a-button style="margin-right: 16px" ghost type="primary" @click="filter">更多筛选</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> </a-form-item>
</div> </div>
</a-form> </div>
<a-modal v-model:visible="visible" title="筛选" :footer="null"> <a-modal v-model:visible="visible" title="筛选" :footer="null">
<ScreenBox :info="ruleForm" @cancel="visible = false" @update="update" /> <ScreenBox :info="ruleForm" @cancel="visible = false" @update="update" />
</a-modal> </a-modal>