极客观点
项目管理
HarmonyOS
<style>
body {font-family: Helvetica, sans-serif;}
.ivu-btn-error{
color: #fff;
background-color: #7D7068;
border-color: #7D7068;
}
.ivu-btn-error:hover{
color: #fff;
background-color: #7D7068;
border-color: #7D7068;
}
.iconClassRoot {
width:15px;
height:15px;
display: inline-block;
background: url("../../assets/images/ztree/root.png") no-repeat center/100% auto;
}
.iconClassNode {
width:15px;
height:15px;
display: inline-block;
background: url("../../assets/images/ztree/node.png") no-repeat center/100% auto;
}
.operate{
display: flex;
}
.operate ul>li{
float:left;
margin:10px 10px;
list-style-type: none;
}
</style>
<template>
<el-tabs type="border-card" style="margin-left: 50px;height:100%;margin-right: 20px;border-color: #cfdbe2;border-top-width: 3px;">
<div style='width: 100%'>
<div>
<div style='width:100%;' v-if='ztreeDataSource.length>0'>
<vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :is-open='false'></vue-ztree>
<div style="width: 83%;float: left;margin-left: 1px">
<div id="user-container" style="margin:0 15px 0 15px">
<lable>岗位名称</lable> <Input v-model="value" placeholder="请输入..." style="width: 300px;margin-left:10px"></Input>
<lable style="margin-left:100px">所属单位</lable> <Select v-model="model1" style="width:200px;margin-left:10px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Button type="primary" style="margin-left:50px">查询</Button>
<div id="crud-container" style="margin-bottom: 10px">
<Button type="primary" @click="modal1 = true" style="margin:10px 0">添加</Button>
<!--
<Button type="primary" v-on:click="add" icon="ios-plus-outline">添加</Button>
-->
</div>
<Table border :columns="columns" :data="userConfig.list" style="width:100%;margin-bottom: 15px"></Table>
<Page :current="currentPage" :total="userConfig.totalCount" :page-size="10" show-total @on-change="change" id="page"></Page>
<!--添加-->
<Modal
v-model="modal1"
title="添加信息"
@on-ok="ok2"
@on-cancel="cancel2">
<Form :model="formItem" :label-width="80" class="user-form-add">
<FormItem label="岗位名称">
<Input placeholder="请输入" ></Input>
</FormItem>
<FormItem label="岗位职责">
<Input placeholder="请输入" ></Input>
</FormItem>
<FormItem label="所属单位">
<Input placeholder="请输入" ></Input>
</FormItem>
</Form>
</Modal>
<!--修改-->
<Modal
v-model="isShowModal"
title="修改信息"
:styles="{top: '20px'}"
@on-ok="ok"
@on-cancel="cancel">
<Form :model="formItem" :label-width="80" id="login-name" class="user-form-add">
<FormItem label="岗位名称">
<Input placeholder="请输入" v-model="risk.name"></Input>
</FormItem>
<FormItem label="所属机构">
<Input placeholder="请输入" v-model="risk.officeName"></Input>
</FormItem>
<FormItem label="所属部门">
<Input placeholder="请输入" v-model="risk.des"></Input>
</FormItem>
<FormItem label="所属生产线">
<Input placeholder="请输入" v-model="risk.newRecord"></Input>
</FormItem>
</Form>
</Modal>
</div>
</div>
</div>
</div>
</div>
</el-tabs>
</template>
<script>
import vueZtree from '../../components/vue-ztree.vue'
export default {
data () {
return {
cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
model1: '',
ztreeDataSource:[],
modal1: false,
currentPage: 1,
risk: {},
isShowModal: false,
userConfig: {},
formItem: {
input: ''
},
columns: [
{
title: '岗位名称',
key: 'name',
},
{
title: '所属机构',
key: 'officeName'
},
{
title: '所属部门',
key: 'des'
},
{
title: '所属生产线',
key: 'newRecord'
},
{
title: '操作',
key: 'action',
width:450,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.search(params.index)
}
}
}, 'SOP管理'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'PPE配置'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '培训信息'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '行为观察'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '查看'),
h('Button', {
props: {
type: 'warning',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.modify(params.index)
}
}
}, '修改'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
])
}
}
]
}
},
methods:{
add: function() {
this.$router.push({ path: '/newadd/UserAdds' })
},
search: function() {
this.$router.push({ path: '/newadd/NewSOP' })
},
addData: function(risk) {
this.axios.post('/posts', risk)
.then(response => {
if (response.data.success) {
this.userConfig.list.push(risk)
alert('添加成功')
} else {
alert('添加失败，请稍后再试')
}
})
.catch(function(error) {
console.log(error)
})
},
ok2 () {
this.$Message.info('添加成功');
},
cancel2 () {
this.$Message.info('添加失败');
},
show(index) {
this.$Modal.info({
title: '查看信息',
content: `岗位名称：${this.userConfig.list[index].name}<br>所属机构：${this.userConfig.list[index].officeName}<br>所属部门：${this.userConfig.list[index].des}<br>所属生产线：${this.userConfig.list[index].newRecord}`
})
},
modify(index) {
this.isShowModal = true
this.risk = this.userConfig.list[index]
},
modal1(index) {
this.risk = this.userConfig.list[index]
},
remove(index) {
this.removeData(index)
},
getData: function(pageNum, pageSize) {
this.axios.get('/posts', {
params: {
pageSize: pageSize,
pageNo: pageNum
}
})
.then(response => {
this.userConfig = response.data
})
.catch(function(error) {
console.log(error)
})
},
removeData: function(index) {
this.$confirm('此操作将永久删除 ' + this.userConfig.list[index].name + ', 是否继续?', '提示', { type: 'warning' })
.then(response => {
this.axios.delete('/posts/' + this.userConfig.list[index].id)
.then(response => {
if (response.data.success) {
this.userConfig.list.splice(index, 1)
} else {
alert('删除失败，请稍后再试')
}
})
.catch(function(error) {
console.log(error)
console.log(index)
})
})
},
modifyData: function(risk) {
this.axios.put('/posts', risk)
.then(response => {
if (response.data.success) {
alert('修改成功')
} else {
alert('修改失败，请稍后再试')
}
})
.catch(function(error) {
console.log(error)
})
},
change: function(page) {
// 改变数据重新给表格赋值
this.getData(page, 10)
},
refresh() {
this.currentPage = 1
// this.getData(1, 2)
},
ok() {
this.modifyData(this.risk)
},
cancel() {
this.$Message.info('点击了取消')
}
},
components:{
vueZtree
},
mounted (){
this.getData(1, 10)
// 异步获取数据操作
setTimeout(()=>{
this.ztreeDataSource = [{
id:220,
parentId:0,
name:"信息部",
iconClass:"iconClassRoot",
children:[{
id:221,
parentId:220,
name:"web前端",
iconClass:"iconClassRoot",
path:"",
children:[{
id:222,
parentId:221,
name:"vue",
iconClass:"iconClassNode",
path:"",
}],
}],
path:""
},{
id:1,
parentId:0,
name:"市场营销",
iconClass:"iconClassNode",
children:[],
path:""
},{
id:2,
parentId:0,
name:"市场部",
iconClass:"iconClassRoot",
children:[{
id:3,
parentId:2,
name:"市场调研",
iconClass:"iconClassRoot",
children:[{
id:4,
parentId:3,
name:"调研组1",
iconClass:"iconClassNode",
path:""
},{
id:5,
parentId:3,
name:"调研组2",
iconClass:"iconClassNode",
path:""
},{
id:6,
parentId:3,
name:"调研组3",
iconClass:"iconClassNode",
path:""
}]
},{
id:7,
parentId:2,
name:"市场研发",
iconClass:"iconClassRoot",
children:[{
id:9,
parentId:7,
name:"研发部1",
iconClass:"iconClassNode",
path:""
},{
id:10,
parentId:7,
name:"研发部2",
iconClass:"iconClassNode",
path:""
}]
}],
path:""
}]
},1000);
}
}
</script>我用iview写的后台管理系统，但是不知道怎么写增加和查询功能，修改和删除已经实现了，增加的功能是要点击增加的时候出一个弹窗，然后输入信息添加，但是我不知道怎么写了，求大神帮忙！
页面是这样的
点击增加按钮之后是这样的
代码中的请求数据都已经好了，就是不知道怎么写增加的，求帮忙！！！
用vue-resource 按照后台接口发过去就行了