1.快捷代码
1，调整el-tree被点击样式
node-key="value"
highlight-current
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.treeOptions[0].value)
})
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #7aabdc;
}
2.el-input输入框type=text 校验
非中文
oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
整数
oninput="value=value.replace(/[^\d]/g,'')"
两位小数
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
N位小数
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d{n}).*$/, '$1$2.$3').replace(/^\./g, '')"
文件下载
//api/download.js
export function fileDownload (data) {
return request({
url: '/system/file/download',
method: "GET",
responseType: 'blob', //blob文件
params: data
});
}
down.vue
import { fileDownload } from '@/api/download'
download(val) {
const { fileName, filePath } = val
// 调用
let query = {
fileName: fileName,
fileUrl: filePath
}
console.log(query)
fileDownload(query)
.then(res => {
console.log(res, '------')
this.handleSaveAs(res, query.fileName)
})
.catch(err => {
console.log(err)
this.$message.warning('下载错误')
})
},
//下载文件并重新命名
handleSaveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
const link = document.createElement('a')
const body = document.querySelector('body')
console.log(new Blob([blob]))
link.href = window.URL.createObjectURL(new Blob([blob], { type: 'text/plain' }))
link.download = filename
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
},
数据过滤
html
<el-select
:disabled="disableds"
@change="res => getMater(res, 1)"
v-model="form.productNumber"
filterable
:filter-method="userFilter"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in MaterialList"
:key="item.id"
:label="item.materialCode"
:value="item.materialCode"
>
</el-option>
</el-select>
data{
MateriaCent: [],
}
created{
this.getMaterial()
}
// 数据过滤
userFilter(query = '') {
let arr = this.MateriaCent.filter(item => {
return item.materialCode.includes(query)
})
if (arr.length > 50) {
this.MaterialList = arr.slice(0, 50)
} else {
this.MaterialList = arr
}
},
// 获取
getMaterial() {
getMaterialByLikeCode('').then(res => {
// this.MaterialList = res.data
this.MateriaCent = res.data
this.userFilter()
})
},
// 选择xx获取xx1
getMater(e, index) {
this.supplierList = []
this.supplier = []
this.getmaterialSupplier()
this.MaterialList.forEach(item => {
if (item.materialCode == e) {
if (index == 1) {
this.form.xxx= item.xxx
// 新增弹窗数据
} else if (index == 2) {
this.form1.materialName = item.materialName
}
}
})
},
Vue模板
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
<el-form-item>
<el-input
v-model.trim="queryParams.condition1"
placeholder="请输入xxx"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
<!-- oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" -->
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
> -->
</el-form-item>
</el-form>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新建</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableData" style="width: 100%;maxWidth: 100%;">
<el-table-column label="序号" type="index" width="80" />
<el-table-column label="xxxx" prop="content" width="180" />
<el-table-column label="xxxx" prop="content" width="180" :show-overflow-tooltip="true" />
<el-table-column label="xxxx" prop="content" align="center" :show-overflow-tooltip="true" />
<el-table-column label="xxxx" prop="content" width="60" :formatter="statusFormat" />
<el-table-column label="xxxx" prop="content" width="180" />
<el-table-column label="xxxx" prop="content" width="180" />
<el-table-column label="操作" width="150" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleDetail(scope.row)">查看</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.pageNum"
:page-sizes="[100, 200, 300, 400]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
v-show="total > 0"
>
</el-pagination>
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item label="xxxx：" prop="parameter1">
<el-input v-model.trim="form.parameter1" :disabled="disableds" placeholder="请输入xxxx" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="xxxxx：" prop="categoryName">
<el-input :disabled="disabled" v-model.trim="form.categoryName" placeholder="请输入cccc" maxlength="20" />
<!-- oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" -->
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="状态：">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{
dict.dictLabel
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注：" prop="remark">
<el-input
:disabled="disabled"
type="textarea"
resize="none"
:autosize="{ minRows: 4, maxRows: 8 }"
placeholder="请输入备注"
v-model="form.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-if="form.id" @click="open = false" round>取 消</el-button>
<el-button v-else @click="resetQuery" round>重 置</el-button>
<el-button type="primary" @click="submitForm" v-if="disabled != true" round>确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { 引入的接口 } from '@/api/xxx/xxx/xxx.js'
export default {
name: 'materialQuery',
data() {
// 自定义CategoryCode
var validateCategoryCode = (rule, value, callback) => {
const regCode = /^[A-Za-z]([0-9]{2})$/
if (regCode.test(value)) {
return callback()
} else {
callback(new Error("请按照'大写字母/小写字母+2位数字'输入"))
}
}
return {
disableds: false,
// true禁止修改
disabled: false,
// 表单参数
form: {},
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 表单校验
rules: {
categoryCode: [
{ required: true, message: '请输入物料类别编号', trigger: 'blur' },
{ validator: validateCategoryCode, trigger: 'blur' }
],
categoryName: { required: true, message: '请输入物料类别名称', trigger: 'blur' }
},
total: 0,
// 类别数据
queryParams: {
pageNum: 1,
pageSize: 10
},
showSearch: true,
loading: false,
tableData: [], //列表
statusOptions: [
{
dictValue: 0,
dictLabel: '启动'
},
{
dictValue: 1,
dictLabel: '停用'
}
] // 状态
}
},
created() {
this.getList()
// 类别数据
this.getDicts('sys_normal_disable').then(response => {
this.statusOptions = response.data
})
},
methods: {
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status)
},
// 分页-------
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.queryParams.pageSize = val
this.getList()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.queryParams.pageNum = val
this.getList()
},
// 分页----------
/** 查询列表 */
getList() {
this.loading = true
查询接口(this.queryParams).then(res => {
this.tableData = res.data
this.total = res.page.total
this.loading = false
})
},
//查询
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
//重置
resetQuery() {
this.reset()
},
//新增
handleAdd(row) {
this.reset()
this.disabled = false
this.disableds = false
this.open = true
this.title = '添加'
},
//编辑
handleEdit(row) {
this.disabled = false
this.disableds = true
this.open = true
this.title = '修改'
const id = row.id
this.form = row
this.form.status = row.status + ''
// 查询接口({ id }).then(response => {
// this.form = response.data
// this.form.status = response.data.status + ''
// this.$forceUpdate()
// this.open = true
// this.title = '修改'
// })
},
// 提交
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
编辑接口(this.form).then(res => {
if (res.code === 0) {
this.$message.success(res.msg)
this.open = false
this.getList()
}
})
} else {
添加接口(this.form).then(res => {
if (res.code === 0) {
this.$message.success(res.msg)
this.open = false
this.getList()
}
})
}
}
})
},
//删除
handleDelete(row) {
const id = row.id
this.$confirm('是否确认删除', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return 删除接口({ id })
})
.then(() => {
this.getList()
this.msgSuccess('删除成功')
})
.catch(function() {})
},
// 查看
handleDetail(row) {
this.disabled = false
this.open = true
this.title = '查看'
const id = row.id
查看接口({ id }).then(response => {
this.form = response.data
})
},
// 表单重置
reset() {
this.form = {}
this.resetForm('form')
}
}
}
</script>
表单多选项添加----------------------------------
<template>
<div class="app-container">
<el-dialog @close="changeClose" :title="title" :visible.sync="open" width="70%" append-to-body>
<el-form :model="form" label-width="160px" ref="form" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item label="名称1：" prop="name1">
<el-input v-model.trim="form.name1" placeholder="请输入名称1" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称2：" prop="name2">
<el-input v-model.trim="form.name2" placeholder="请输入名称2" />
</el-form-item>
</el-col>
</el-row>
<el-scrollbar>
<el-row
class="box_group box_group1"
style="margin:40px 0"
v-for="(item, index) in form.machineChangeStationList"
:key="index"
>
<div class="flex">
<el-button
v-if="index == 0"
type="primary"
icon="el-icon-plus"
circle
@click.native="addMoreForm()"
></el-button>
<el-button v-else type="danger" icon="el-icon-delete" circle @click.native="deleteItem(item)"></el-button>
</div>
<el-col :span="12">
<el-form-item
label="xx："
:prop="'machineChangeStationList.' + index + '.station'"
:rules="{
required: true,
message: 'xx不能为空',
trigger: 'blur'
}"
>
<el-input v-model.trim="item.station" placeholder="请输入xx" />
</el-form-item>
</el-col>
</el-row>
</el-scrollbar>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false" round>取 消</el-button>
<el-button type="primary" @click="submitForm" v-if="disabled != true" round>确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { 接口引入} from '@/api/xx/xx'
export default {
name: 'machineChangeoverTable',
data() {
// 自定义validateStandardCapacity
var validateStandardCapacity = (rule, value, callback) => {
const regCode = /^[1-9]*[1-9][0-9]*$/
if (regCode.test(value)) {
return callback()
} else {
callback(new Error("请按照'非零正整数'输入"))
}
}
return {
queryParams: {
productCode: '',
pageNum: 1,
pageSize: 10
},
loading: false,
open: false,
form: {
deviceName: '',
productSpecifications: '',
machineChangeStationList: [
{
station: ''
}
]
},
rules: {
name1: { required: true, message: '请输入名称1', trigger: 'blur' },
name2: { required: true, message: '请输入名称2', trigger: 'blur' }
},
title: '',
// --------------------------
disabled: false,
productCode: '', //产线
// -----------------------------
num: 0,
glueQuantityTestList: [], //胶量测试数据
glueQuantityDetailData: [], //胶量明细数据
tabTable: false,
deleteArr: [],
flag: false //删除标记
}
},
created() {},
methods: {
// 添加表单
addMoreForm(num) {
this.form.machineChangeStationList.push({
station: undefined
})
},
//删除表单
deleteItem(item) {
console.log(item, ' && item.delFlag')
this.flag = false
if (item.id && item.delFlag == 0) {
this.deleteArr = []
console.log('删除标记')
this.flag = true
this.deleteArr.push(item)
item.delFlag = 1
console.log(this.deleteArr)
}
let index = this.form.machineChangeStationList.indexOf(item)
if (index !== -1) {
this.form.machineChangeStationList.splice(index, 1)
}
},
changeClose() {
this.reset()
},
handleCurrentChange(val) {
console.log(val)
if (val) {
this.num = val.delFlag
this.tabTable = true
this.glueQuantityDetailData = val.machineChangeStationList ? val.machineChangeStationList : []
}
},
//新增
handleAdd() {
this.disabled = false
this.open = true
this.title = '添加'
this.num = 1
this.form = Object.assign(
{},
{
machineChangeStationList: [
{
station: undefined
}
]
}
)
},
// 表单重置
reset() {
this.form = {
deviceName: undefined,
productSpecifications: undefined,
machineChangeStationList: [
{
station: undefined
}
]
}
this.resetForm('form')
},
// 提交
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
let params = this.form
console.log(params)
if (this.form.id != undefined) {
if (this.flag) {
params.machineChangeStationList.push(...this.deleteArr)
编辑接口(params).then(res => {
if (res.code === 0) {
this.open = false
this.num = 1
this.$message.success(res.msg)
this.getList()
}
})
} else {
console.log('正常编辑')
console.log(params, 'params')
编辑接口(params).then(res => {
if (res.code === 0) {
this.$message.success(res.msg)
this.num = 1
this.open = false
this.getList()
}
})
}
} else {
params.productCode = this.productCode
添加接口(params).then(res => {
if (res.code === 0) {
this.$message.success(res.msg)
this.open = false
this.getList()
}
})
}
}
})
}
}
}
</script>
<style scoped lang="scss">
.flex {
height: 35px;
display: flex !important;
margin: 20px 0;
.flex_inp {
margin: 0 10px;
}
}
// 修改页面底部滚动条显示效果，可根据实际需要引入
::v-deep .el-scrollbar {
height: 650px;
.el-scrollbar__wrap {
overflow-x: hidden;
}
.el-scrollbar__bar {
// 默认展示滚动条
opacity: 0.1;
}
.el-scrollbar__thumb {
// 改变滚动条颜色
background: rgb(20, 20, 20);
opacity: 0.1;
}
}
.box_group {
width: 99%;
border: 1px solid #000;
margin: 75px 0;
padding: 15px 15px 0 0;
height: 420px;
position: relative;
.flex {
position: absolute;
top: -58px;
right: 0;
font-size: 30px;
}
}
.box_group1 {
height: 460px;
}
.box_group {
margin: 15px;
}
</style>
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
