|
@@ -0,0 +1,264 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="index">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
|
|
|
|
+ <el-col :span="24" class="one">
|
|
|
|
+ <div class="one_left" @click="toAdd">发布服务</div>
|
|
|
|
+ <div class="one_right">
|
|
|
|
+ <el-input v-model="searchForm.name" style="width: 250px" size="large" placeholder="搜索" @change="search" :suffix-icon="Search" />
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" class="two">
|
|
|
|
+ <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }">
|
|
|
|
+ <template #empty>
|
|
|
|
+ <el-empty description="暂无数据" />
|
|
|
|
+ </template>
|
|
|
|
+ <el-table-column prop="name" align="center" label="服务名称" />
|
|
|
|
+ <el-table-column prop="time" align="center" label="登记时间" width="180" />
|
|
|
|
+ <el-table-column prop="status" align="center" label="状态" width="180">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <div>{{ getDict(scope.row.status, 'status') }}</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column align="center" label="操作" width="180">
|
|
|
|
+ <template #default="{ row }">
|
|
|
|
+ <el-link v-if="row.status == '-2'" :underline="false" type="warning" size="mini" @click="toExam(row)" style="margin-right: 10px">提交审核</el-link>
|
|
|
|
+ <el-link :underline="false" type="primary" size="mini" @click="toEdit(row)" style="margin-right: 10px">修改</el-link>
|
|
|
|
+ <el-link :underline="false" type="danger" size="mini" @click="toDelete(row)"> 删除 </el-link>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" class="thr">
|
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24" v-if="dialog.type == '1'">
|
|
|
|
+ <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave" @draftSave="toDraftSave">
|
|
|
|
+ <template #file>
|
|
|
|
+ <custom-upload model="file" :list="form.file" :limit="3" listType="picture-card" url="/files/web/cxyy_support/upload" @change="onUpload"></custom-upload>
|
|
|
|
+ </template>
|
|
|
|
+ <template #is_use>
|
|
|
|
+ <el-radio v-for="i in isUseList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
|
|
|
|
+ </template>
|
|
|
|
+ <template #industry>
|
|
|
|
+ <el-option v-for="i in sectorList" :key="i.id" :label="i.title" :value="i.title"></el-option>
|
|
|
|
+ </template>
|
|
|
|
+ <template #area>
|
|
|
|
+ <el-cascader v-model="form.area" :props="{ value: 'name', label: 'name' }" :options="cityList" style="width: 100%" />
|
|
|
|
+ </template>
|
|
|
|
+ <template #tags>
|
|
|
|
+ <el-select v-model="form.tags" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="请选择标签" style="width: 100%">
|
|
|
|
+ <el-option v-for="item in tagsList" :key="item.id" :label="item.title" :value="item.title" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </template>
|
|
|
|
+ </custom-form>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
|
+import { cloneDeep, get } from 'lodash-es'
|
|
|
|
+const $checkRes = inject('$checkRes')
|
|
|
|
+import { UserStore } from '@/store/user'
|
|
|
|
+const userStore = UserStore()
|
|
|
|
+const user = computed(() => userStore.user)
|
|
|
|
+// 接口
|
|
|
|
+import { SupportStore } from '@/store/api/platform/support'
|
|
|
|
+import { DictDataStore } from '@/store/api/system/dictData'
|
|
|
|
+import { TagsStore } from '@/store/api/system/tags'
|
|
|
|
+import { SectorStore } from '@/store/api/platform/sector'
|
|
|
|
+import { RegionStore } from '@/store/api/system/region'
|
|
|
|
+const regionStore = RegionStore()
|
|
|
|
+const store = SupportStore()
|
|
|
|
+const dictDataStore = DictDataStore()
|
|
|
|
+const tagsStore = TagsStore()
|
|
|
|
+const sectorStore = SectorStore()
|
|
|
|
+// 加载中
|
|
|
|
+const loading = ref(false)
|
|
|
|
+
|
|
|
|
+const searchForm = ref({})
|
|
|
|
+// 列表
|
|
|
|
+const list = ref([])
|
|
|
|
+let skip = 0
|
|
|
|
+let limit = inject('limit')
|
|
|
|
+const total = ref(0)
|
|
|
|
+const currentPage = ref(1)
|
|
|
|
+// 字典表
|
|
|
|
+const isUseList = ref([])
|
|
|
|
+const statusList = ref([])
|
|
|
|
+const cityList = ref([])
|
|
|
|
+const tagsList = ref([])
|
|
|
|
+const sectorList = ref([])
|
|
|
|
+
|
|
|
|
+const form = ref({ file: [] })
|
|
|
|
+const dialog = ref({ type: '1', show: false, title: '发布服务' })
|
|
|
|
+const formFields = ref([
|
|
|
|
+ { label: '封面', model: 'file', custom: true },
|
|
|
|
+ { label: '名称', model: 'name' },
|
|
|
|
+ { label: '标签', model: 'tags', custom: true },
|
|
|
|
+ { label: '所属产业', model: 'industry', type: 'select' },
|
|
|
|
+ { label: '服务领域', model: 'field' },
|
|
|
|
+ { label: '登记时间', model: 'time', type: 'date' },
|
|
|
|
+ { label: '所在地区', model: 'area', custom: true },
|
|
|
|
+ { label: '地址', model: 'address', type: 'textarea' },
|
|
|
|
+ { label: '联系人', model: 'contacts' },
|
|
|
|
+ { label: '联系电话', model: 'phone' },
|
|
|
|
+ { label: '是否启用', model: 'is_use', type: 'radio' },
|
|
|
|
+ { label: '简介', model: 'brief', type: 'textarea' }
|
|
|
|
+])
|
|
|
|
+const rules = reactive({ name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }] })
|
|
|
|
+// 请求
|
|
|
|
+onMounted(async () => {
|
|
|
|
+ loading.value = true
|
|
|
|
+ await searchOther()
|
|
|
|
+ await search()
|
|
|
|
+ loading.value = false
|
|
|
|
+})
|
|
|
|
+const search = async (query = { skip, limit }) => {
|
|
|
|
+ skip = query.skip
|
|
|
|
+ limit = query.limit
|
|
|
|
+ const info = {
|
|
|
|
+ skip: query.skip,
|
|
|
|
+ limit: query.limit,
|
|
|
|
+ user: user.value.id,
|
|
|
|
+ ...searchForm.value
|
|
|
|
+ }
|
|
|
|
+ const res = await store.query(info)
|
|
|
|
+ if (res.errcode == '0') {
|
|
|
|
+ list.value = res.data
|
|
|
|
+ total.value = res.total
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const searchOther = async () => {
|
|
|
|
+ let result
|
|
|
|
+ // 是否使用
|
|
|
|
+ result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
|
|
|
|
+ if ($checkRes(result)) isUseList.value = result.data
|
|
|
|
+ // 状态
|
|
|
|
+ result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
|
|
|
|
+ if ($checkRes(result)) statusList.value = result.data
|
|
|
|
+ // 标签
|
|
|
|
+ result = await tagsStore.query({ is_use: '0' })
|
|
|
|
+ if ($checkRes(result)) tagsList.value = result.data
|
|
|
|
+ // 行业
|
|
|
|
+ result = await sectorStore.query({ is_use: '0' })
|
|
|
|
+ if ($checkRes(result)) sectorList.value = result.data
|
|
|
|
+ // 城市
|
|
|
|
+ result = await regionStore.area({ level: 'province', code: 22 })
|
|
|
|
+ if ($checkRes(result)) cityList.value = result.data
|
|
|
|
+}
|
|
|
|
+// 字典数据转换
|
|
|
|
+const getDict = (data, model) => {
|
|
|
|
+ if (data) {
|
|
|
|
+ let res
|
|
|
|
+ if (model == 'status') res = statusList.value.find((f) => f.value == data)
|
|
|
|
+ return get(res, 'label')
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// 添加
|
|
|
|
+const toAdd = () => {
|
|
|
|
+ dialog.value = { type: '1', show: true, title: '发布服务' }
|
|
|
|
+}
|
|
|
|
+// 修改
|
|
|
|
+const toEdit = (data) => {
|
|
|
|
+ form.value = data
|
|
|
|
+ dialog.value = { type: '1', show: true, title: '修改服务' }
|
|
|
|
+}
|
|
|
|
+// 删除
|
|
|
|
+const toDelete = (data) => {
|
|
|
|
+ ElMessageBox.confirm(`您确认删除${data.name}该数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
|
|
|
+ .then(async () => {
|
|
|
|
+ const res = await store.del(data.id)
|
|
|
|
+ if ($checkRes(res, true)) {
|
|
|
|
+ search({ skip, limit })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {})
|
|
|
|
+}
|
|
|
|
+const toSave = async () => {
|
|
|
|
+ const data = cloneDeep(form.value)
|
|
|
|
+ const other = { status: '0', user: user.value.id }
|
|
|
|
+ let res
|
|
|
|
+ if (get(data, 'id')) res = await store.update({ ...data, ...other })
|
|
|
|
+ else res = await store.create({ ...data, ...other })
|
|
|
|
+ if ($checkRes(res, true)) {
|
|
|
|
+ search({ skip, limit })
|
|
|
|
+ toClose()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const toDraftSave = async () => {
|
|
|
|
+ const data = cloneDeep(form.value)
|
|
|
|
+ const other = { status: '-2', user: user.value.id }
|
|
|
|
+ let res
|
|
|
|
+ if (get(data, 'id')) res = await store.update({ ...data, ...other })
|
|
|
|
+ else res = await store.create({ ...data, ...other })
|
|
|
|
+ if ($checkRes(res, true)) {
|
|
|
|
+ search({ skip, limit })
|
|
|
|
+ toClose()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// 审核保存
|
|
|
|
+const toExam = async (row) => {
|
|
|
|
+ ElMessageBox.confirm(`您确认保存并提交审核该数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
|
|
|
|
+ .then(async () => {
|
|
|
|
+ const data = cloneDeep(row)
|
|
|
|
+ let res = await store.update({ id: data.id, status: '0', user: user.value.id })
|
|
|
|
+ if ($checkRes(res, true)) {
|
|
|
|
+ search({ skip, limit })
|
|
|
|
+ toClose()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {})
|
|
|
|
+}
|
|
|
|
+// 上传图片
|
|
|
|
+const onUpload = (e) => {
|
|
|
|
+ const { model, value } = e
|
|
|
|
+ form.value[model] = value
|
|
|
|
+}
|
|
|
|
+const toClose = () => {
|
|
|
|
+ form.value = { file: [] }
|
|
|
|
+ dialog.value = { show: false }
|
|
|
|
+}
|
|
|
|
+// 分页
|
|
|
|
+const changePage = (page = currentPage.value) => {
|
|
|
|
+ search({ skip: (page - 1) * limit, limit: limit })
|
|
|
|
+}
|
|
|
|
+const sizeChange = (limits) => {
|
|
|
|
+ limit = limits
|
|
|
|
+ currentPage.value = 1
|
|
|
|
+ search({ skip: 0, limit: limit })
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.main {
|
|
|
|
+ .one {
|
|
|
|
+ height: 50px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin: 0 0 10px 0;
|
|
|
|
+ .one_left {
|
|
|
|
+ background: #1875df;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ cursor: default;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .thr {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin: 20px 0 0 0;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|