no message
commit
fd10983400
|
|
@ -0,0 +1,174 @@
|
||||||
|
Table 隐藏列自动保存
|
||||||
|
|
||||||
|
页面中配置crudOperation :tableKey='tableKey'
|
||||||
|
|
||||||
|
```
|
||||||
|
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||||||
|
<crudOperation :permission="permission" :tableKey='tableKey' />
|
||||||
|
```
|
||||||
|
|
||||||
|
在data 中添加 tabkeKey
|
||||||
|
|
||||||
|
```
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryTypeOptions: [
|
||||||
|
{ key: 'code', display_name: '代码' },
|
||||||
|
{ key: 'name', display_name: '名称' },
|
||||||
|
{ key: 'enabled', display_name: '状态' },
|
||||||
|
{ key: 'heat', display_name: '热度' }
|
||||||
|
],
|
||||||
|
permission: {
|
||||||
|
add: ['admin', 'area:add'],
|
||||||
|
edit: ['admin', 'area:edit'],
|
||||||
|
del: ['admin', 'area:del']
|
||||||
|
},
|
||||||
|
tableKey:'api/area',
|
||||||
|
rules: {
|
||||||
|
code: [
|
||||||
|
{ required: true, message: '库区编号不能为空', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
全部代码
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!--工具栏-->
|
||||||
|
<div class="head-container">
|
||||||
|
<div v-if="crud.props.searchToggle">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<label class="el-form-item-label">编号</label>
|
||||||
|
<el-input v-model="query.code" clearable placeholder="编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
||||||
|
<label class="el-form-item-label">名称</label>
|
||||||
|
<el-input v-model="query.name" clearable placeholder="名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
||||||
|
<label class="el-form-item-label">状态</label>
|
||||||
|
<el-input v-model="query.enabled" clearable placeholder="状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
||||||
|
<label class="el-form-item-label">热度</label>
|
||||||
|
<el-input v-model="query.heat" clearable placeholder="热度" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
||||||
|
<rrOperation :crud="crud" />
|
||||||
|
</div>
|
||||||
|
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||||||
|
<crudOperation :permission="permission" :tableKey='tableKey' />
|
||||||
|
<!--表单组件-->
|
||||||
|
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||||
|
<el-form-item label="库区编号" prop="code">
|
||||||
|
<el-input v-model="form.code" style="width: 370px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库区名称" prop="name">
|
||||||
|
<el-input v-model="form.name" style="width: 370px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述">
|
||||||
|
<el-input v-model="form.description" style="width: 370px;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<!--表格渲染-->
|
||||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column prop="code" label="库区编号" />
|
||||||
|
<el-table-column prop="name" label="库区名称" />
|
||||||
|
<el-table-column prop="description" label="描述" />
|
||||||
|
<el-table-column prop="enabled" label="启用">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-switch
|
||||||
|
v-model="scope.row.enabled"
|
||||||
|
active-color="#409EFF"
|
||||||
|
inactive-color="#F56C6C"
|
||||||
|
@change="changeEnabled(scope.row, scope.row.enabled)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createBy" label="创建人" />
|
||||||
|
<el-table-column prop="createTime" label="创建时间" />
|
||||||
|
</el-table>
|
||||||
|
<!--分页组件-->
|
||||||
|
<div style="position:absolute;right: 0">
|
||||||
|
<pagination />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import crudArea from '@/api/area'
|
||||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
||||||
|
import rrOperation from '@crud/RR.operation'
|
||||||
|
import crudOperation from '@crud/CRUD.operation'
|
||||||
|
import udOperation from '@crud/UD.operation'
|
||||||
|
import pagination from '@crud/Pagination'
|
||||||
|
import { inject } from "vue";
|
||||||
|
|
||||||
|
const defaultForm = { id: null,enabled: 1,code: null,name: null,description: null}
|
||||||
|
export default {
|
||||||
|
name: 'Area',
|
||||||
|
// eslint-disable-next-line vue/no-unused-components
|
||||||
|
components: { pagination, crudOperation, rrOperation, udOperation },
|
||||||
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||||
|
dicts: ['base_staus'],
|
||||||
|
cruds() {
|
||||||
|
return CRUD({ title: '库区', url: 'api/area', idField: 'id', sort: 'id,desc', crudMethod: { ...crudArea }})
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryTypeOptions: [
|
||||||
|
{ key: 'code', display_name: '代码' },
|
||||||
|
{ key: 'name', display_name: '名称' },
|
||||||
|
{ key: 'enabled', display_name: '状态' },
|
||||||
|
{ key: 'heat', display_name: '热度' }
|
||||||
|
],
|
||||||
|
permission: {
|
||||||
|
add: ['admin', 'area:add'],
|
||||||
|
edit: ['admin', 'area:edit'],
|
||||||
|
del: ['admin', 'area:del']
|
||||||
|
},
|
||||||
|
tableKey:'api/area',
|
||||||
|
rules: {
|
||||||
|
code: [
|
||||||
|
{ required: true, message: '库区编号不能为空', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, mounted() {
|
||||||
|
//初始化数据
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||||
|
[CRUD.HOOK.beforeRefresh]() {
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
// 改变状态
|
||||||
|
changeEnabled(data, val) {
|
||||||
|
this.$confirm('此操作将 "' + this.dict.label.base_staus[val] + '" ' + data.code + ', 是否继续？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
crudArea.edit(data).then(res => {
|
||||||
|
this.crud.notify(this.dict.label.base_staus[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||||
|
}).catch(() => {
|
||||||
|
data.enabled = !data.enabled
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
data.enabled = !data.enabled
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,524 @@
|
||||||
|
对页面 新增 修改 删除等按钮进行隐藏，添加自定义按钮
|
||||||
|
|
||||||
|
```
|
||||||
|
cruds() {
|
||||||
|
return CRUD({
|
||||||
|
title: '出库明细',
|
||||||
|
url: 'api/pickDetail',
|
||||||
|
idField: 'id',
|
||||||
|
sort: 'id,desc',
|
||||||
|
crudMethod: {...crudPickDetail},
|
||||||
|
optShow: {
|
||||||
|
add: true,
|
||||||
|
edit: false,
|
||||||
|
del: false,
|
||||||
|
reset: true,
|
||||||
|
download: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
添加自定义按钮
|
||||||
|
|
||||||
|
[:disabled="show_fp” ]()为显示状态
|
||||||
|
|
||||||
|
[@click="allocate(crud.selections)"]() 为点击时间 [crud.selections]() 选中的数据
|
||||||
|
|
||||||
|
```
|
||||||
|
<el-button
|
||||||
|
slot="right"
|
||||||
|
class="filter-item"
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="show_fp"
|
||||||
|
@click="allocate(crud.selections)"
|
||||||
|
>
|
||||||
|
分配
|
||||||
|
</el-button>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show_fp: true,
|
||||||
|
show_jh: true,
|
||||||
|
show_cancelfp:true,
|
||||||
|
radio3: '全部',
|
||||||
|
items: [],
|
||||||
|
permission: {
|
||||||
|
add: ['admin', 'pickDetail:add'],
|
||||||
|
edit: ['admin', 'pickDetail:edit'],
|
||||||
|
del: ['admin', 'pickDetail:del']
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
item: [
|
||||||
|
{required: true, message: '物料必填', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
queryTypeOptions: [
|
||||||
|
{key: 'itemCode', display_name: '物料编码'},
|
||||||
|
{key: 'itemName', display_name: '物料名称'},
|
||||||
|
{key: 'po', display_name: '任务号'},
|
||||||
|
{key: 'status', display_name: '状态'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
allocate(datas) {
|
||||||
|
this.$confirm(`选中的${datas.length}条数据分配确认?`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
|
||||||
|
const ids = [];
|
||||||
|
for (let i = 0; i < datas.length; i++) {
|
||||||
|
ids.push(datas[i].id)
|
||||||
|
}
|
||||||
|
crudPickDetail.allocate(ids).then(res => {
|
||||||
|
DonMessage.success('分配成功！')
|
||||||
|
this.crud.toQuery();
|
||||||
|
}).catch(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}).catch(() => {
|
||||||
|
this.$refs.table.clearSelection()
|
||||||
|
DonMessage.info('取消成功！')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
修改选择框选中事件 [@selection-change="selectionChangeHandlerTwo"]()
|
||||||
|
|
||||||
|
```
|
||||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small"
|
||||||
|
style="width: 100%;"
|
||||||
|
|
||||||
|
height="58vh"
|
||||||
|
@selection-change="selectionChangeHandlerTwo">
|
||||||
|
```
|
||||||
|
|
||||||
|
根据选择的数据进行判断，新加的按钮是否可用
|
||||||
|
|
||||||
|
```
|
||||||
|
selectionChangeHandlerTwo(val) {
|
||||||
|
this.crud.selections = val
|
||||||
|
if (this.crud.selections.length > 1 || this.crud.selections.length == 0) {
|
||||||
|
this.show_jh = true;
|
||||||
|
this.show_fp = true;
|
||||||
|
this.show_cancelfp=true;
|
||||||
|
}
|
||||||
|
|
||||||
|
//分配
|
||||||
|
if (this.crud.selections.length == 1 && this.crud.selections[0].orderQty > this.crud.selections[0].allocatedQty) {
|
||||||
|
this.show_jh = true;
|
||||||
|
this.show_fp = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//取消分配
|
||||||
|
if (this.crud.selections.length == 1 && this.crud.selections[0].orderQty == this.crud.selections[0].allocatedQty&&this.crud.selections[0].pickedQty==0) {
|
||||||
|
this.show_jh = true;
|
||||||
|
this.show_fp = true;
|
||||||
|
this.show_cancelfp=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//拣货
|
||||||
|
if (this.crud.selections.length == 1 && this.crud.selections[0].orderQty == this.crud.selections[0].allocatedQty) {
|
||||||
|
this.show_jh = false;
|
||||||
|
this.show_fp = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
完整代码，请查看 /views/business-data/asnDetial/index
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!--工具栏-->
|
||||||
|
<div class="head-container">
|
||||||
|
<!-- 查询操作-->
|
||||||
|
<el-form ref="form" :inline="true" :model="form" label-width="70px">
|
||||||
|
<el-form-item label="物料编码">
|
||||||
|
<el-input v-model="query.itemCode" clearable placeholder="请输入物料编码" style="width: 140px;"
|
||||||
|
class="filter-item"
|
||||||
|
@keyup.enter.native="crud.toQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="物料名称">
|
||||||
|
<el-input v-model="query.itemName" clearable placeholder="请输入物料名称" style="width: 140px;"
|
||||||
|
class="filter-item"
|
||||||
|
@keyup.enter.native="crud.toQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="任务号">
|
||||||
|
|
||||||
|
<el-input v-model="query.po" clearable placeholder="请输入任务号" style="width: 140px;" class="filter-item"
|
||||||
|
@keyup.enter.native="crud.toQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
<rrOperation :crud="crud"/>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="statusButton" style="border-bottom: solid lightgray 1px;">
|
||||||
|
<el-radio-group v-model="radio3" @change="clickChange" size="small">
|
||||||
|
<el-radio-button label="全部"> 全部</el-radio-button>
|
||||||
|
<el-radio-button label="打开"> 打开</el-radio-button>
|
||||||
|
<el-radio-button label="已分配">已分配</el-radio-button>
|
||||||
|
<el-radio-button label="拣货完成"> 拣货完成</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 业务操作-->
|
||||||
|
<crudOperation :permission="permission">
|
||||||
|
<el-button
|
||||||
|
slot="right"
|
||||||
|
class="filter-item"
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="show_fp"
|
||||||
|
@click="allocate(crud.selections)"
|
||||||
|
>
|
||||||
|
分配
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
slot="right"
|
||||||
|
class="filter-item"
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:loading="crud.delAllLoading"
|
||||||
|
:disabled="show_cancelfp"
|
||||||
|
@click="cancelAllocate(crud.selections)"
|
||||||
|
>
|
||||||
|
取消分配
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
slot="right"
|
||||||
|
class="filter-item"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:loading="crud.delAllLoading"
|
||||||
|
:disabled="show_jh"
|
||||||
|
@click="getPickTask(crud.selections[0].id)"
|
||||||
|
>
|
||||||
|
拣货确认
|
||||||
|
</el-button>
|
||||||
|
</crudOperation>
|
||||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small"
|
||||||
|
style="width: 100%;"
|
||||||
|
|
||||||
|
height="58vh"
|
||||||
|
@selection-change="selectionChangeHandlerTwo">
|
||||||
|
<el-table-column type="selection" width="50"/>
|
||||||
|
<el-table-column
|
||||||
|
prop="date"
|
||||||
|
align="center"
|
||||||
|
label="序号"
|
||||||
|
:resizable="false"
|
||||||
|
type="index"
|
||||||
|
width="50"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column prop="po" label="任务号"/>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" prop="itemName" label="物料编码">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div>{{ scope.row.item.code }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" prop="itemCode" label="物料名称">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div>{{ scope.row.item.name }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ dict.label.pick_status[scope.row.status] }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="orderQty" label="订单数量"/>
|
||||||
|
<el-table-column prop="allocatedQty" label="分配数量"/>
|
||||||
|
<el-table-column prop="pickedQty" label="拣货数量"/>
|
||||||
|
<el-table-column prop="remark" label="备注"/>
|
||||||
|
|
||||||
|
<el-table-column prop="createBy" label="创建人"/>
|
||||||
|
<el-table-column prop="createTime" width="150px" label="创建时间"/>
|
||||||
|
<el-table-column v-if="checkPer(['admin','pickDetail:edit','pickDetail:del'])" label="操作" width="150px"
|
||||||
|
align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<udOperation
|
||||||
|
:data="scope.row"
|
||||||
|
:permission="permission"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!--拣货确认界面-->
|
||||||
|
<PickTask ref="pickTask"/>
|
||||||
|
|
||||||
|
<!--表单组件-->
|
||||||
|
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
|
||||||
|
:title="crud.status.title" width="500px">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||||
|
<el-form-item label="物料" prop="item">
|
||||||
|
<el-select v-model="form.item" @focus="getItem" filterable placeholder="请选择物料" value-key="id"
|
||||||
|
style="width: 370px;">
|
||||||
|
<el-option
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.code"
|
||||||
|
:value="item"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单数量">
|
||||||
|
<el-input v-model="form.orderQty" style="width: 370px;"/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" :rows="3" type="textarea" style="width: 370px;"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<!--表格渲染-->
|
||||||
|
|
||||||
|
<!--分页组件-->
|
||||||
|
<pagination/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import crudPickDetail, {cancelAllocate} from '@/api/pickDetail'
|
||||||
|
import CRUD, {presenter, header, form, crud} from '@crud/crud'
|
||||||
|
import rrOperation from '@crud/RR.operation'
|
||||||
|
import crudOperation from '@crud/CRUD.operation'
|
||||||
|
import udOperation from '@crud/UD.operation'
|
||||||
|
import pagination from '@crud/Pagination'
|
||||||
|
import {getItems} from "@/api/item"
|
||||||
|
import DonMessage from "@/utils/message";
|
||||||
|
import PickTask from "@/views/business-data/pickDetail/pickTicketTask.vue"
|
||||||
|
|
||||||
|
const defaultForm = {
|
||||||
|
id: null,
|
||||||
|
pickId: null,
|
||||||
|
item: null,
|
||||||
|
lineNo: null,
|
||||||
|
po: null,
|
||||||
|
status: 'OPEN',
|
||||||
|
orderQty: 0,
|
||||||
|
allocatedQty: 0,
|
||||||
|
pickedQty: 0,
|
||||||
|
shippedQty: 0,
|
||||||
|
weight: 0,
|
||||||
|
volume: 0,
|
||||||
|
remark: null,
|
||||||
|
propC1: null,
|
||||||
|
propC2: null,
|
||||||
|
propC3: null,
|
||||||
|
propC4: null,
|
||||||
|
propC5: null,
|
||||||
|
propC6: null,
|
||||||
|
propD1: null,
|
||||||
|
propD2: null,
|
||||||
|
deptId: null,
|
||||||
|
sourceName: null,
|
||||||
|
sourceId: null,
|
||||||
|
createBy: null,
|
||||||
|
updateBy: null,
|
||||||
|
createTime: null,
|
||||||
|
updateTime: null
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
name: 'PickDetail',
|
||||||
|
components: {PickTask, pagination, crudOperation, rrOperation, udOperation},
|
||||||
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||||
|
dicts: ['pick_status'],
|
||||||
|
cruds() {
|
||||||
|
return CRUD({
|
||||||
|
title: '出库明细',
|
||||||
|
url: 'api/pickDetail',
|
||||||
|
idField: 'id',
|
||||||
|
sort: 'id,desc',
|
||||||
|
crudMethod: {...crudPickDetail},
|
||||||
|
optShow: {
|
||||||
|
add: true,
|
||||||
|
edit: false,
|
||||||
|
del: false,
|
||||||
|
reset: true,
|
||||||
|
download: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show_fp: true,
|
||||||
|
show_jh: true,
|
||||||
|
show_cancelfp:true,
|
||||||
|
radio3: '全部',
|
||||||
|
items: [],
|
||||||
|
permission: {
|
||||||
|
add: ['admin', 'pickDetail:add'],
|
||||||
|
edit: ['admin', 'pickDetail:edit'],
|
||||||
|
del: ['admin', 'pickDetail:del']
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
item: [
|
||||||
|
{required: true, message: '物料必填', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
queryTypeOptions: [
|
||||||
|
{key: 'itemCode', display_name: '物料编码'},
|
||||||
|
{key: 'itemName', display_name: '物料名称'},
|
||||||
|
{key: 'po', display_name: '任务号'},
|
||||||
|
{key: 'status', display_name: '状态'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||||
|
[CRUD.HOOK.beforeRefresh]() {
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
getItem() {
|
||||||
|
getItems({}).then(res => {
|
||||||
|
this.items = res.content.map(function (obj) {
|
||||||
|
if (obj.hasChildren) {
|
||||||
|
obj.children = null
|
||||||
|
}
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
selectionChangeHandlerTwo(val) {
|
||||||
|
this.crud.selections = val
|
||||||
|
if (this.crud.selections.length > 1 || this.crud.selections.length == 0) {
|
||||||
|
this.show_jh = true;
|
||||||
|
this.show_fp = true;
|
||||||
|
this.show_cancelfp=true;
|
||||||
|
}
|
||||||
|
|
||||||
|
//分配
|
||||||
|
if (this.crud.selections.length == 1 && this.crud.selections[0].orderQty > this.crud.selections[0].allocatedQty) {
|
||||||
|
this.show_jh = true;
|
||||||
|
this.show_fp = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//取消分配
|
||||||
|
if (this.crud.selections.length == 1 && this.crud.selections[0].orderQty == this.crud.selections[0].allocatedQty&&this.crud.selections[0].pickedQty==0) {
|
||||||
|
this.show_jh = true;
|
||||||
|
this.show_fp = true;
|
||||||
|
this.show_cancelfp=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//拣货
|
||||||
|
if (this.crud.selections.length == 1 && this.crud.selections[0].orderQty == this.crud.selections[0].allocatedQty) {
|
||||||
|
this.show_jh = false;
|
||||||
|
this.show_fp = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
allocate(datas) {
|
||||||
|
this.$confirm(`选中的${datas.length}条数据分配确认?`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
|
||||||
|
const ids = [];
|
||||||
|
for (let i = 0; i < datas.length; i++) {
|
||||||
|
ids.push(datas[i].id)
|
||||||
|
}
|
||||||
|
crudPickDetail.allocate(ids).then(res => {
|
||||||
|
DonMessage.success('分配成功！')
|
||||||
|
this.crud.toQuery();
|
||||||
|
}).catch(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}).catch(() => {
|
||||||
|
this.$refs.table.clearSelection()
|
||||||
|
DonMessage.info('取消成功！')
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancelAllocate(datas){
|
||||||
|
this.$confirm(`选中的${datas.length}条数据取消分配确认?`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
|
||||||
|
const ids = [];
|
||||||
|
for (let i = 0; i < datas.length; i++) {
|
||||||
|
ids.push(datas[i].id)
|
||||||
|
}
|
||||||
|
crudPickDetail.cancelAllocate(ids).then(res => {
|
||||||
|
DonMessage.success('取消分配成功！')
|
||||||
|
this.crud.toQuery();
|
||||||
|
}).catch(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}).catch(() => {
|
||||||
|
this.$refs.table.clearSelection()
|
||||||
|
DonMessage.info('取消成功！')
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getPickTask(id) {
|
||||||
|
this.$refs.pickTask.dialog = true
|
||||||
|
this.$refs.pickTask.queryPickTask(id)
|
||||||
|
},
|
||||||
|
shuaxin() {
|
||||||
|
this.crud.toQuery();
|
||||||
|
},
|
||||||
|
clickChange(lab) {
|
||||||
|
if (lab === "全部") {
|
||||||
|
this.crud.resetQuery();
|
||||||
|
this.crud.toQuery();
|
||||||
|
}else if(lab === "打开"){
|
||||||
|
this.query.status = 'OPEN'
|
||||||
|
this.crud.toQuery();
|
||||||
|
}else if(lab === "已分配"){
|
||||||
|
this.query.status = 'ALLOCATE'
|
||||||
|
this.crud.toQuery();
|
||||||
|
}else if(lab === "拣货完成"){
|
||||||
|
this.query.status = 'PICK_ALL'
|
||||||
|
this.crud.toQuery();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,419 @@
|
||||||
|
# 大屏开发文档
|
||||||
|
|
||||||
|
demo下载地址 http://47.100.54.81:3000/LiuXue/Youchain_DaPinDemo.git
|
||||||
|
|
||||||
|
[Examples - Apache ECharts](https://echarts.apache.org/examples/zh/index.html)
|
||||||
|
|
||||||
|
关键代码地址：/src/router/index.js /src/router/router.js
|
||||||
|
|
||||||
|
router.js
|
||||||
|
|
||||||
|
你需要像login 页面一样给新页面添加访问路径，并配置标题（浏览器顶部显示）以及vue的路径
|
||||||
|
|
||||||
|
```
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Router from 'vue-router'
|
||||||
|
import Layout from '../layout/index'
|
||||||
|
|
||||||
|
Vue.use(Router)
|
||||||
|
|
||||||
|
export const constantRouterMap = [
|
||||||
|
{ path: '/login',
|
||||||
|
meta: { title: '登录', noCache: true },
|
||||||
|
component: (resolve) => require(['@/views/login'], resolve),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{ path: '/home',
|
||||||
|
meta: { title: '登录', noCache: true },
|
||||||
|
component: (resolve) => require(['@/views/home'], resolve),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{ path: '/test',
|
||||||
|
meta: { title: '测试', noCache: true },
|
||||||
|
component: (resolve) => require(['@/views/app-dashboard/index'], resolve),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{ path: '/test2',
|
||||||
|
meta: { title: '测试2', noCache: true },
|
||||||
|
component: (resolve) => require(['@/views/zhongwei-daping/index'], resolve),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/404',
|
||||||
|
component: (resolve) => require(['@/views/features/404'], resolve),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/401',
|
||||||
|
component: (resolve) => require(['@/views/features/401'], resolve),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/redirect',
|
||||||
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/redirect/:path*',
|
||||||
|
component: (resolve) => require(['@/views/features/redirect'], resolve)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
component: (resolve) => require(['@/views/home'], resolve),
|
||||||
|
name: 'Dashboard',
|
||||||
|
meta: { title: '首页', icon: 'index', affix: true, noCache: true }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user',
|
||||||
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
|
redirect: 'noredirect',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'center',
|
||||||
|
component: (resolve) => require(['@/views/system/user/center'], resolve),
|
||||||
|
name: '个人中心',
|
||||||
|
meta: { title: '个人中心' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default new Router({
|
||||||
|
// mode: 'hash',
|
||||||
|
mode: 'history',
|
||||||
|
scrollBehavior: () => ({ y: 0 }),
|
||||||
|
routes: constantRouterMap
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
index.js
|
||||||
|
|
||||||
|
whiteList 为白名单列表，你需要把 访问路径添加到白名单
|
||||||
|
|
||||||
|
import router from './routers'
|
||||||
|
import store from '@/store'
|
||||||
|
import Config from '@/settings'
|
||||||
|
import NProgress from 'nprogress' // progress bar
|
||||||
|
import 'nprogress/nprogress.css'// progress bar style
|
||||||
|
import { buildMenus } from '@/api/system/menu'
|
||||||
|
import { filterAsyncRouter } from '@/store/modules/permission'
|
||||||
|
|
||||||
|
NProgress.configure({ showSpinner: false })// NProgress Configuration
|
||||||
|
|
||||||
|
const whiteList = ['/login', '/401', '/404', '/home', '/test', '/test2']// no redirect whitelist
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
if (to.meta.title) {
|
||||||
|
document.title = to.meta.title + ' - ' + Config.title
|
||||||
|
}
|
||||||
|
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
next(`/login`) // 否则全部重定向到登录页
|
||||||
|
NProgress.done()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export const loadMenus = (next, to) => {
|
||||||
|
buildMenus().then(res => {
|
||||||
|
const sdata = JSON.parse(JSON.stringify(res))
|
||||||
|
const rdata = JSON.parse(JSON.stringify(res))
|
||||||
|
const sidebarRoutes = filterAsyncRouter(sdata)
|
||||||
|
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
|
||||||
|
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
|
||||||
|
|
||||||
|
store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由
|
||||||
|
router.addRoutes(rewriteRoutes) // 动态添加可访问路由表
|
||||||
|
next({ ...to, replace: true })
|
||||||
|
})
|
||||||
|
store.dispatch('SetSidebarRouters', sidebarRoutes)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
router.afterEach(() => {
|
||||||
|
NProgress.done() // finish progress bar
|
||||||
|
})
|
||||||
|
|
||||||
|
/src/view/zhongwei-daping/index.vue
|
||||||
|
|
||||||
|
使用el-row 对页面进行布局
|
||||||
|
|
||||||
|
.mian-container / background-image 为背景图片
|
||||||
|
|
||||||
|
.divmao 单块背景模糊
|
||||||
|
|
||||||
|
backdrop-filter 模糊像素，越大越模糊
|
||||||
|
|
||||||
|
background 背景色，最后两位是透明度
|
||||||
|
|
||||||
|
box-shadow 边缘阴影
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<div class="mian-container">
|
||||||
|
<el-row style="height: 20px">
|
||||||
|
<el-col :span="24"><div style="height: 100px;background: #f4516c00" /></el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="height: 100%">
|
||||||
|
<el-col :span="8" style="height: 95%">
|
||||||
|
<el-row class="divmao" style="height: 30%; margin: 5px;">
|
||||||
|
<RadarChart />
|
||||||
|
</el-row>
|
||||||
|
<el-row class="divmao" style="height: 30%; margin: 5px;">
|
||||||
|
<RadarChart />
|
||||||
|
</el-row>
|
||||||
|
<el-row class="divmao" style="height: 40%; margin: 5px;">
|
||||||
|
<RadarChart />
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" style="height: 95%">
|
||||||
|
<el-row class="divmao" style="height: 100%; margin: 5px 5px 5px 5px;">
|
||||||
|
<BarChart />
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" style="height: 95%">
|
||||||
|
<el-row class="divmao" style="height: 30%; margin: 5px ;">
|
||||||
|
<RightChart1 />
|
||||||
|
</el-row>
|
||||||
|
<el-row class="divmao" style="height: 30%; margin: 5px;">
|
||||||
|
<RadarChart />
|
||||||
|
</el-row>
|
||||||
|
<el-row class="divmao" style="height: 40%; margin: 5px;">
|
||||||
|
<RadarChart />
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import RadarChart from './RadarChart.vue'
|
||||||
|
import BarChart from '@/views/zhongwei-daping/BarChart.vue'
|
||||||
|
import RightChart1 from '@/views/zhongwei-daping/RightChart1.vue'
|
||||||
|
export default {
|
||||||
|
name: 'DataView',
|
||||||
|
components: {
|
||||||
|
BarChart,
|
||||||
|
RightChart1,
|
||||||
|
// eslint-disable-next-line vue/no-unused-components
|
||||||
|
RadarChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.mian-container{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url('./img/bg2.png');
|
||||||
|
display: flex;
|
||||||
|
background-size:cover;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.divmao{
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
backdrop-filter: blur(1px);
|
||||||
|
background: #ffffff10;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
页面添加雷达图
|
||||||
|
|
||||||
|
import RadarChart from './RadarChart.vue'
|
||||||
|
|
||||||
|
在components 中引用
|
||||||
|
|
||||||
|
```
|
||||||
|
export default {
|
||||||
|
name: 'DataView',
|
||||||
|
components: {
|
||||||
|
BarChart,
|
||||||
|
RightChart1,
|
||||||
|
// eslint-disable-next-line vue/no-unused-components
|
||||||
|
RadarChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
直接在 EL 中添加
|
||||||
|
|
||||||
|
```
|
||||||
|
<el-row class="divmao" style="height: 30%; margin: 5px ;">
|
||||||
|
<RightChart1 />
|
||||||
|
</el-row>
|
||||||
|
```
|
||||||
|
|
||||||
|
/src/zhongwei-daping/RadarChatr 雷达图
|
||||||
|
|
||||||
|
静态数据
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<div :class="className" :style="{height:height,width:width}" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts' // echarts theme
|
||||||
|
import { debounce } from '@/utils'
|
||||||
|
require('echarts/theme/macarons')
|
||||||
|
|
||||||
|
const animationDuration = 3000
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '200px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initChart()
|
||||||
|
this.__resizeHandler = debounce(() => {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize()
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
window.addEventListener('resize', this.__resizeHandler)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
window.removeEventListener('resize', this.__resizeHandler)
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
radius: '66%',
|
||||||
|
center: ['50%', '42%'],
|
||||||
|
splitNumber: 8,
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: 'rgba(127,95,132,.3)',
|
||||||
|
opacity: 1,
|
||||||
|
shadowBlur: 45,
|
||||||
|
shadowColor: 'rgba(0,0,0,.5)',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: [
|
||||||
|
{ name: 'Sales', max: 10000 },
|
||||||
|
{ name: 'Administration', max: 20000 },
|
||||||
|
{ name: 'Information Techology', max: 20000 },
|
||||||
|
{ name: 'Customer Support', max: 20000 },
|
||||||
|
{ name: 'Development', max: 20000 },
|
||||||
|
{ name: 'Marketing', max: 20000 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '10',
|
||||||
|
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'radar',
|
||||||
|
symbolSize: 0,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
shadowBlur: 13,
|
||||||
|
shadowColor: 'rgba(0,0,0,.2)',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 10,
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||||
|
name: 'Allocated Budget'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||||
|
name: 'Expected Spending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||||
|
name: 'Actual Spending'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
animationDuration: animationDuration
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
动态数据的话，修改 initChart()部分为
|
||||||
|
|
||||||
|
```
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
crudSysAppUpdate.get().then(res => {
|
||||||
|
this.chart.setOption(res)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,281 @@
|
||||||
|
ubuntu 部署项目
|
||||||
|
|
||||||
|
安装桌面
|
||||||
|
|
||||||
|
```
|
||||||
|
1.sudo apt-get update
|
||||||
|
|
||||||
|
2.sudo apt-get install ubuntu-desktop
|
||||||
|
```
|
||||||
|
|
||||||
|
安装远程工具
|
||||||
|
|
||||||
|
```markup
|
||||||
|
sudo apt-get install xrdp
|
||||||
|
```
|
||||||
|
|
||||||
|
然后用win+R 键输入mstsc，进入下面远程桌面连接，输入之前的IP；
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
同样的输入账号和密码，就可以进入了，这个看起来就舒服多了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 步骤1：安装 MySQL
|
||||||
|
|
||||||
|
在 Ubuntu 上通过以下步骤安装 MySQL 服务器及客户端：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
sudo apt-get update
|
||||||
|
sudo apt-get install mysql-server mysql-client
|
||||||
|
```
|
||||||
|
|
||||||
|
安装过程中，您可能会被要求设置 root 用户的密码。如果没有出现该对话框，请继续执行下面的步骤。
|
||||||
|
|
||||||
|
## 步骤2：修改用户密码
|
||||||
|
|
||||||
|
要修改 root 用户的密码，请按照以下步骤操作：
|
||||||
|
|
||||||
|
1. 打开终端，并以 root 用户身份登录到 MySQL shell：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
sudo mysql -u root
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 输入 root 密码以登录到 MySQL shell。
|
||||||
|
|
||||||
|
3. 在 MySQL shell 中，执行以下命令来更改 root 用户的密码（将 `new_password` 替换为您要设置的新密码）：
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'new_password';
|
||||||
|
FLUSH PRIVILEGES;
|
||||||
|
```
|
||||||
|
|
||||||
|
4. 退出 MySQL shell：
|
||||||
|
|
||||||
|
```sql
|
||||||
|
EXIT;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 步骤3：配置 MySQL 允许远程连接
|
||||||
|
|
||||||
|
要允许来自其他主机的连接，请按照以下步骤进行配置：
|
||||||
|
|
||||||
|
1. 编辑 MySQL 配置文件：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 找到 `bind-address` 行并注释掉（在行前添加 `#` 符号），以允许来自任何 IP 地址的连接。
|
||||||
|
|
||||||
|
3. 保存并关闭文件。
|
||||||
|
|
||||||
|
4. 重新启动 MySQL 服务器：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
sudo systemctl restart mysql
|
||||||
|
```
|
||||||
|
|
||||||
|
## 步骤4：修改配置,使其可以被navicat连接
|
||||||
|
|
||||||
|
1. 打开终端，并以 root 用户身份登录到 MySQL shell：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
sudo mysql -u root -p
|
||||||
|
```
|
||||||
|
|
||||||
|
选择数据库
|
||||||
|
|
||||||
|
```php
|
||||||
|
use mysql;
|
||||||
|
```
|
||||||
|
|
||||||
|
更新root用户host字段 让所有ip都可以连接
|
||||||
|
|
||||||
|
```bash
|
||||||
|
update user set host = '%' where user = 'root';
|
||||||
|
```
|
||||||
|
|
||||||
|
刷新修改
|
||||||
|
|
||||||
|
```undefined
|
||||||
|
FLUSH PRIVILEGES;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 步骤5：连接 MySQL 数据库
|
||||||
|
|
||||||
|
现在我们可以使用 Navicat 连接到 MySQL 数据库：
|
||||||
|
|
||||||
|
1. 打开 Navicat 工具，并点击 "连接"（Connect）按钮。
|
||||||
|
|
||||||
|
2. 在新建连接窗口中，输入以下信息：
|
||||||
|
|
||||||
|
- 连接名（Connection Name）：自定义名称。
|
||||||
|
- 主机名或 IP 地址（Host）：MySQL 服务器的 IP 地址或主机名。
|
||||||
|
- 端口号（Port）：默认为 3306。
|
||||||
|
- 用户名（Username）：root 或您创建的其他用户。
|
||||||
|
- 密码（Password）：之前设置的密码。
|
||||||
|
|
||||||
|
3. 点击 "测试连接"（Test Connection）按钮以验证连接是否成功。
|
||||||
|
|
||||||
|
4. 如果连接测试通过，点击 "连接"（Connect）按钮以建立与 MySQL 数据库的连接。
|
||||||
|
|
||||||
|
恭喜！您已经成功安装了 MySQL 并使用 Navicat 连接到 MySQL 数据库。现在您可以开始管理和操作数据库了。
|
||||||
|
|
||||||
|
请注意，在执行上述步骤时，请根据实际情况调整参数和配置信息，确保正确设置密码和允许远程连接。
|
||||||
|
|
||||||
|
### 卸载MySQL [在Ubuntu中删除mysql_ubuntu卸载mysql_ccbbaaap的博客-CSDN博客](https://blog.csdn.net/ccbbaaap/article/details/130657186)
|
||||||
|
|
||||||
|
# # Reids 安装
|
||||||
|
|
||||||
|
一、安装
|
||||||
|
1.1 更新仓库(非必须)
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt update
|
||||||
|
```
|
||||||
|
|
||||||
|
1.2 使用 apt 从官方 Ubuntu 存储库来安装 Redis
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt-get install redis-server
|
||||||
|
```
|
||||||
|
|
||||||
|
二、设置密码
|
||||||
|
2.1 打开Redis配置文件redis.conf
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo vi /etc/redis/redis.conf
|
||||||
|
```
|
||||||
|
|
||||||
|
2.2 找到# requirepass foobared这一行，将注释符号#去掉，将后面修改成自己的密码，例如，设置密码为123abc
|
||||||
|
|
||||||
|
```
|
||||||
|
requirepass 123abc
|
||||||
|
```
|
||||||
|
|
||||||
|
三、开启远程访问
|
||||||
|
默认情况下，Redis服务器不允许远程访问，只允许本机访问，所以我们需要设置打开远程访问的功能。
|
||||||
|
|
||||||
|
1、打开Redis服务器的配置文件redis.conf
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo vi /etc/redis/redis.conf
|
||||||
|
```
|
||||||
|
|
||||||
|
2、使用注释符号#注释bind 127.0.0.1这行
|
||||||
|
|
||||||
|
#注释bind
|
||||||
|
#bind 127.0.0.1
|
||||||
|
四、Redis服务控制命令
|
||||||
|
|
||||||
|
```
|
||||||
|
/etc/init.d/redis-server start #启动
|
||||||
|
/etc/init.d/redis-server stop #关闭
|
||||||
|
/etc/init.d/redis-server restart #重启
|
||||||
|
```
|
||||||
|
|
||||||
|
vim 搜索 / 加搜索关键词
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# nginx 安装
|
||||||
|
|
||||||
|
```
|
||||||
|
apt-get install nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
其他命令
|
||||||
|
|
||||||
|
```
|
||||||
|
查看版本
|
||||||
|
nginx -v
|
||||||
|
启动nginx
|
||||||
|
service nginx start
|
||||||
|
查看运行状态
|
||||||
|
service nginx status
|
||||||
|
重启nginx
|
||||||
|
service nginx restart
|
||||||
|
sudo systemctl restart nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
安装后的文件目录
|
||||||
|
|
||||||
|
```
|
||||||
|
/usr/sbin/nginx：主程序
|
||||||
|
/etc/nginx：存放配置文件
|
||||||
|
/usr/share/nginx：存放静态文件
|
||||||
|
/var/log/nginx：存放日志
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 安装JDK1.8
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt install openjdk-8-jre-headless
|
||||||
|
java -version
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 后端启动
|
||||||
|
|
||||||
|
```
|
||||||
|
nohup java -jar eladmin-system-2.6.jar --spring.profiles.active=prod > nohup.out 2>&1 &o
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 后端停止
|
||||||
|
|
||||||
|
```
|
||||||
|
PID=$(ps -ef | grep eladmin-system-2.6.jar | grep -v grep | awk '{ print $2 }')
|
||||||
|
if [ -z "$PID" ]
|
||||||
|
then
|
||||||
|
echo Application is already stopped
|
||||||
|
else
|
||||||
|
echo kill -9 $PID
|
||||||
|
kill -9 $PID
|
||||||
|
fi
|
||||||
|
```
|
||||||
|
|
||||||
|
# **查看日志脚本**
|
||||||
|
|
||||||
|
```
|
||||||
|
tail -f nohup.out
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 前端部署nginx 配置
|
||||||
|
|
||||||
|
在http{} 中添加server
|
||||||
|
|
||||||
|
```
|
||||||
|
server{
|
||||||
|
listen 8091;
|
||||||
|
server_name 101.35.240.82;
|
||||||
|
root /home/ubuntu/dist;
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ @router;
|
||||||
|
index index.html;
|
||||||
|
}
|
||||||
|
location @router {
|
||||||
|
rewrite ^.*$ /index.html last;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
listen 为端口号
|
||||||
|
server_name 域名/当前服务器外网IP;
|
||||||
|
root /home/wwwroot/eladmin/dist; #dist上传的路径
|
||||||
|
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue