Commit 82429922 authored by 小费同学阿's avatar 小费同学阿 💬

进度信息模块封装ui代码优化

parent 4fae7d9c
......@@ -14,7 +14,10 @@ export function listAllArticle(data) {
return request({
url: '/business/article/list-all',
method: 'post',
data
data,
headers: {
repeatSubmit: false
}
})
}
......
......@@ -56,7 +56,7 @@ export default {
// 大小限制(MB)
fileSize: {
type: Number,
default: 5
default: 4
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
......
......@@ -59,6 +59,13 @@ export default {
type: 'warning'
})
},
confirmAllConfig(content, title = '系统提示', options = {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}) {
return MessageBox.confirm(content, title, options)
},
// 提交内容
prompt(content) {
return MessageBox.prompt(content, '系统提示', {
......
......@@ -141,51 +141,6 @@ export const constantRoutes = [
}
]
},
// 文章
{
path: '/article-management',
component: Layout,
hidden: true,
permissions: ['*:*:*'],
children: [
{
path: 'index',
props: true,
component: () => import('@/views/article-management/article-management'),
name: 'Article-management',
meta: { title: '文章管理', icon: 'component' }
},
// 文章编辑路由
{
path: 'article-edit/:id',
props: true,
component: () => import('@/views/article-management/article-edit'),
name: 'Article-edit',
meta: { title: '文章编辑', icon: 'component' }
},
// 文章详情路由
{
path: 'article-detail/:id',
component: () => import('@/views/article-management/article-detail'),
name: 'ArticleDetail',
props: true,
meta: {
title: '文章详情', icon: 'component'
}
},
// 文章添加路由
{
path: 'article-insert',
component: () => import('@/views/article-management/article-insert'),
name: 'ArticleInsert',
props: true,
meta: {
title: '新增文章',
activeMenu: '/article-management'
}
}
]
},
// 病历管理
{
path: '/medical-record-management',
......@@ -301,7 +256,7 @@ export const constantRoutes = [
},
// 文章
{
path: '/article-management',
path: '/article/management',
component: Layout,
hidden: true,
permissions: ['*:*:*'],
......
......@@ -23,7 +23,7 @@ color: #333333;"
<div style="display:flex;">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="文章标题" prop="articleTitle">
<el-input v-model="form.articleTitle" placeholder="请输入文章标题" />
<el-input v-model="form.articleTitle" maxlength="60" placeholder="请输入文章标题" />
</el-form-item>
<el-form-item label="权重" prop="articleWeight">
<el-input-number
......
......@@ -23,13 +23,13 @@ color: #333333;"
<div style="display:flex;">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="文章标题" prop="articleTitle">
<el-input v-model="form.articleTitle" maxlength="40" placeholder="请输入文章标题" show-word-limit />
<el-input v-model.trim="form.articleTitle" maxlength="60" placeholder="请输入文章标题" />
</el-form-item>
<el-form-item label="权重" prop="articleWeight">
<el-input-number v-model="form.articleWeight" :max="9999" :min="1" controls-position="right" />
<el-input-number v-model="form.articleWeight" :max="9999" :min="0" controls-position="right" />
</el-form-item>
<el-form-item label="文章封面" prop="articleCover">
<image-upload v-model="form.articleCover" limit="1" />
<image-upload v-model="form.articleCover" :limit="1" />
</el-form-item>
<el-form-item label="状态" prop="articleStatus">
<div style="display: flex;">
......@@ -47,13 +47,17 @@ color: #333333;"
</div>
</el-form-item>
<el-form-item label="文章内容" prop="articleContent">
<editor v-model="form.articleContent" :min-height="192" />
<editor
v-model.trim="form.articleContent"
:min-height="192"
@change="changeQuillEditor('articleContent')"
/>
</el-form-item>
</el-form>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button class="queryBtn" @click="submitForm">提交</el-button>
<el-button :loading="submitLoading" class="queryBtn" @click="submitForm">提交</el-button>
<el-button class="resetBtn" @click="goBack">返回</el-button>
</div>
</div>
......@@ -75,8 +79,7 @@ export default {
props: {
id: {
// 防止接受状态类型不兼容
type: [Number, String],
required: true
type: [Number, String]
}
},
data() {
......@@ -90,12 +93,14 @@ export default {
// 表单参数
form: {
// 权重
articleWeight: '0',
articleWeight: 0,
// 状态位
articleStatus: '0',
// 创建时间
articleCreateTime: ''
},
// 提交中状态
submitLoading: false,
// 表单校验
rules: {
// 文章标题判空校验
......@@ -104,7 +109,8 @@ export default {
],
// 文章权重判空校验
articleWeight: [
{ required: true, message: '文章权重不能为空', trigger: 'change' }
{ required: true, message: '文章权重不能为空', trigger: 'change' },
{ min: 1, max: 9999, type: 'number', message: '文章权重需要在1~9999之间', trigger: 'change' }
],
// 文章封面判空校验
articleCover: [
......@@ -125,6 +131,10 @@ export default {
this.addDate()
},
methods: {
// change事件,验证表单内容,val是当前需要验证的字段名
changeQuillEditor(val) {
this.$refs['form'].validateField(val)
},
// 获取当前年月日
addDate() {
const nowDate = new Date()
......@@ -141,19 +151,15 @@ export default {
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
this.$confirm('确认新增?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.submitLoading = true
addArticle(this.form).then(response => {
this.$message({
type: 'success',
message: '新增成功!'
})
this.goBack()
})
this.getList()
}).finally(_ => {
this.submitLoading = false
})
}
})
......@@ -162,9 +168,7 @@ export default {
selectDictLabel,
/** 返回跳转列表页 */
goBack() {
this.$router.push({
path: '/article-management/index'
})
this.$router.back()
}
}
}
......
<template>
<div style="background-color: #FFFFFF;">
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane name="article" label="文章管理">
<!--顶部搜索区-->
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
<el-form-item prop="articleTitle">
<el-input
v-model="queryParams.articleTitle"
v-model.trim="queryParams.articleTitle"
clearable
placeholder="请输入文章标题关键字"
@keyup.enter.native="handleQuery"
......@@ -13,7 +15,7 @@
</el-form-item>
<el-form-item prop="articleCreateTime">
<el-date-picker
v-model="queryParams.articleCreateTime"
v-model.trim="queryParams.articleCreateTime"
clearable
placeholder="请选择创建时间"
type="date"
......@@ -21,7 +23,7 @@
/>
</el-form-item>
<el-form-item prop="articleStatus">
<el-select v-model="queryParams.articleStatus" clearable placeholder="请选择文章状态">
<el-select v-model.trim="queryParams.articleStatus" clearable placeholder="请选择文章状态">
<el-option
v-for="item in dict.type.article_status"
:key="item.value"
......@@ -32,7 +34,7 @@
</el-form-item>
<el-form-item prop="sort">
<el-select
v-model="queryParams.params.sort"
v-model.trim="queryParams.params.sort"
clearable
placeholder="请选择排序方式"
>
......@@ -44,6 +46,7 @@
/>
</el-select>
</el-form-item>
<div>
<!--顶部操作按钮-->
<el-form-item>
<!--新增文章-->
......@@ -55,9 +58,6 @@
@click="handleAdd"
>新增文章
</el-button>
<!--搜索 重置-->
<el-button class="queryBtn" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<!--选择全部-->
<el-button
v-hasPermi="['system:manage:export']"
......@@ -95,8 +95,13 @@
>批量导出
</el-button>
</el-form-item>
<el-form-item style="position: absolute;right: 0.6%;">
<!--搜索 重置-->
<el-button class="queryBtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</div>
</el-form>
<!--列表-->
<el-table
ref="table"
......@@ -105,7 +110,6 @@
:header-cell-style="{background:'#E8E9E8'}"
border
row-key="id"
:header-cell-class-name="cellClass"
@selection-change="handleSelectionChange"
@select-all="selectAll($event, false)"
>
......@@ -201,6 +205,8 @@
:total="total"
@pagination="getList"
/>
</el-tab-pane>
</el-tabs>
<!-- 添加或修改文章对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="60%">
......@@ -250,22 +256,31 @@
<script>
import { listArticle, delArticle, addArticle, updateArticle, listAllArticle } from '@/api/business/article'
import { parseTime } from '../../utils/ruoyi'
import dict from '@/utils/dict'
export default {
name: 'Article',
dicts: ['article_status'],
data() {
return {
// tab激活
activeName: 'article',
// 排序方式下拉框字典写死
sortList: [
{
label: '按创建时间倒序',
value: '1'
value: '01'
},
{
label: '按创建时间正序',
value: '2'
value: '02'
},
{
label: '按权重倒序',
value: '11'
},
{
label: '按权重正序',
value: '12'
}
],
// 遮罩层
......@@ -317,7 +332,6 @@ export default {
return 'disabledCheck'
}
},
dict,
parseTime,
/** 首先进界面---查询文章列表 */
getList() {
......@@ -357,7 +371,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除文章编号为"' + ids + '"的数据项?').then(function() {
this.$modal.confirmAllConfig('是否确认删除此条数据,删除后不可恢复', '删除').then(function() {
return delArticle(ids)
}).then(() => {
this.getList()
......@@ -367,19 +381,17 @@ export default {
},
/** 下架操作(改变状态位) */
handleChange(row) {
// eslint-disable-next-line no-unused-vars
const ids = row.id || this.ids
// 创建对象给修改接口
const articleObj = {
id: row.id,
articleStatus: '1'
}
console.log('articleobj', articleObj)
this.$modal.confirm('是否确认下架文章编号为"' + ids + '"的数据项?').then(
// 调用修改接口
updateArticle(articleObj).then(rows => {
console.log('这是调取出来的内容:', rows)
})
).then(() => {
}).then(() => {
this.$modal.msgSuccess('下架成功')
this.getList()
}).catch(() => {
......@@ -504,6 +516,10 @@ export default {
}
</script>
<style lang="scss" scoped>
.app-container {
padding: 0 0.5rem;
margin-bottom: 0.5em;
}
/*表格超出行宽省略号显示并悬浮状态显示全文*/
::v-deep .el-tooltip__popper .is-dark {
background: #f1f1f1 !important;
......@@ -526,6 +542,7 @@ export default {
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: #F6FCF5 !important;
}
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
display: none;
}
......
......@@ -105,13 +105,16 @@
<template slot-scope="scope">
<span
v-if="scope.row.status === '1'"
style="color: #5FB54B;">{{ showStatus(scope.row.status)}}</span>
style="color: #5FB54B;"
>{{ showStatus(scope.row.status) }}</span>
<span
v-else-if="scope.row.status === '2'"
style="color: #FF9D4E;">{{ showStatus(scope.row.status)}}</span>
style="color: #FF9D4E;"
>{{ showStatus(scope.row.status) }}</span>
<span
v-else
style="color: #DB4747;">{{ showStatus(scope.row.status) || '-' }}</span>
style="color: #DB4747;"
>{{ showStatus(scope.row.status) || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="left" class-name="small-padding fixed-width">
......
<template>
<!-- -->
<!-- -->
<div class="app-container">
<div style="background-color: #fff">
<div class="headerTitle">
......
......@@ -129,7 +129,7 @@
</el-row>
</el-form>
<!-- 设备表格 -->
<el-table >
<el-table>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="设备名称" align="center" prop="petNickname" />
<el-table-column label="检查日期" align="center" prop="petBreed" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment