提交 469afd3a authored 作者: matian's avatar matian

代码提交

上级 0b64eae9
<template> <template>
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" top="40vh" title="创建客户组"> <el-dialog v-bind="$attrs" v-on="$listeners" width="80%" title="添加客户">
<app-card> <app-card>
<app-list v-bind="tableOptions" ref="list"> </app-list> <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<template #footer>
<el-button type="primary" @click="submit">提交</el-button>
<el-button @click="$emit('update:visible', false)" style="margin-left: 20px">取消</el-button>
</template>
</app-list>
</app-card> </app-card>
<el-button type="primary"> 提交</el-button>
<el-button> 取消</el-button>
</el-dialog> </el-dialog>
</template> </template>
...@@ -12,6 +15,11 @@ ...@@ -12,6 +15,11 @@
import AppList from '@/components/base/AppList.vue' import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue' import AppCard from '@/components/base/AppCard.vue'
export default { export default {
data() {
return {
multipleSelection: []
}
},
components: { AppCard, AppList }, components: { AppCard, AppList },
computed: { computed: {
// 列表配置 // 列表配置
...@@ -39,6 +47,7 @@ export default { ...@@ -39,6 +47,7 @@ export default {
} }
], ],
columns: [ columns: [
{ type: 'selection', minWidth: '50px', fixed: 'left' },
{ label: '客户名称', prop: 'group_name', align: 'center' }, { label: '客户名称', prop: 'group_name', align: 'center' },
{ label: '合作项目', prop: 'customer_num', align: 'center' }, { label: '合作项目', prop: 'customer_num', align: 'center' },
{ label: '所在地区', prop: 'employees_num', align: 'center' }, { label: '所在地区', prop: 'employees_num', align: 'center' },
...@@ -46,6 +55,39 @@ export default { ...@@ -46,6 +55,39 @@ export default {
{ label: '创建人', prop: 'creater', align: 'center' } { label: '创建人', prop: 'creater', align: 'center' }
], ],
data: [ data: [
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{
group_name: '1213'
},
{ {
group_name: '1213' group_name: '1213'
} }
...@@ -57,7 +99,17 @@ export default { ...@@ -57,7 +99,17 @@ export default {
// this.getStudent() // this.getStudent()
}, },
methods: { methods: {
submit() {} handleSelectionChange(val) {
this.multipleSelection = val
},
submit() {
// const params = this.multipleSelection
// addCustomer(params).then(res => {
// this.$message.success('添加客户成功')
// this.$emit('update:visible', false)
// this.$emit('success')
// })
}
} }
} }
</script> </script>
<template> <template>
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" top="40vh" title="创建客户组"> <el-dialog v-bind="$attrs" v-on="$listeners" width="30%" top="40vh" :title="title">
<el-form ref="formRef" :model="form"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="客户组名称" prop="group_name"> <el-form-item label="客户组名称" prop="group_name">
<el-input type="text" v-model="form.group_name" /> <el-input v-model="form.group_name" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" style="margin-left: 20px" @click="submit">提交</el-button> <el-button type="primary" style="margin-left: 20px" @click="submit">提交</el-button>
...@@ -16,17 +16,63 @@ ...@@ -16,17 +16,63 @@
export default { export default {
data() { data() {
return { return {
detail: [],
form: { form: {
group_name: '' group_name: ''
},
rules: {
group_name: [
{ required: true, message: '请输入客户组名称', trigger: 'blur' },
{ min: 0, max: 20, message: '您最多可输入20个字符', trigger: 'blur' }
]
} }
} }
}, },
mounted() { props: {
// this.getStudent() id: {
type: String,
default: ''
}
},
computed: {
title() {
if (this.id !== '') {
return '编辑客户组'
} else {
return '新建客户组'
}
}
}, },
methods: { methods: {
submit() {} // 提交
submit() {
this.$refs.form.validate().then(() => {
if (this.id !== '') {
//编辑
this.edit()
} else {
//新建
this.create()
}
})
},
// 编辑/更新客户组
edit() {
console.log('222')
// editGroup(Object.assign({ id: this.id }, this.form)).then(res => {
// this.$message.success('客户组创建成功')
// this.$emit('update:visible', false)
// this.$emit('success')
// })
},
//新建客户组
create() {
console.log('111')
// createGroup(this.form).then(res => {
// this.$message.success('客户组创建成功')
// this.$emit('update:visible', false)
// this.$emit('success')
// })
}
} }
} }
</script> </script>
<template> <template>
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" top="40vh" title="创建客户组"> <el-dialog v-bind="$attrs" v-on="$listeners" width="20%" top="40vh" title="添加员工">
<el-form ref="formRef" :model="form"> <el-form ref="form" :model="form" :rules="rules">
<el-form-item label="客户组名称" prop="group_name"> <el-form-item label="员工名称" prop="group_name">
<el-input type="text" v-model="form.group_name" placeholder="搜索员工" /> <el-select
type="text"
v-model="form.employee_name"
placeholder="输入员工姓名/手机号码搜索"
filterable
remote
:remote-method="fetchEmployeeList"
:loading="loading"
>
<el-option v-for="item in employeeList" :key="item.id" :label="item.employee_name" :value="item.id">
<span style="float: left">
{{ item.employee_name }}
<template v-if="item.mobile">(手机号:{{ item.mobile }})</template>
</span>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" style="margin-left: 20px" @click="submit">提交</el-button> <el-button type="primary" style="margin-left: 20px" @click="submit">提交</el-button>
...@@ -16,17 +31,36 @@ ...@@ -16,17 +31,36 @@
export default { export default {
data() { data() {
return { return {
detail: [], loading: false,
form: { form: {
group_name: '' employee_name: ''
} },
rules: {
employee_name: [
{ required: true, message: '请输入员工名称', trigger: 'blur' },
{ min: 0, max: 20, message: '您最多可输入20个字符', trigger: 'blur' }
]
},
employeeList: []
} }
}, },
mounted() {
// this.getStudent()
},
methods: { methods: {
submit() {} fetchEmployeeList() {
this.loading = true
// searchUsers().then(res => {
// this.loading = false
// this.employeeList = res.data.list
// })
},
submit() {
this.$refs.form.validate().then(() => {
// addEmployee(this.form).then(res => {
// this.$message.success('添加员工成功')
// this.$emit('update:visible', false)
// this.$emit('success')
// })
})
}
} }
} }
</script> </script>
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</el-row> </el-row>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="danger" @click="onRemove(row)" style="margin-left: 10px" size="mini" plain>删除</el-button> <el-button type="text" @click="onRemove(row)">删除</el-button>
</template> </template>
</app-list> </app-list>
<AddCustomer :visible.sync="isShowDialog" /> <AddCustomer :visible.sync="isShowDialog" @success="success" />
</app-card> </app-card>
</template> </template>
...@@ -25,6 +25,12 @@ export default { ...@@ -25,6 +25,12 @@ export default {
} }
}, },
components: { AppList, AppCard, AddCustomer }, components: { AppList, AppCard, AddCustomer },
props: {
id: {
type: String,
default: ''
}
},
computed: { computed: {
// 列表配置 // 列表配置
tableOptions() { tableOptions() {
...@@ -40,7 +46,7 @@ export default { ...@@ -40,7 +46,7 @@ export default {
// }, // },
columns: [ columns: [
{ label: '客户名称', prop: 'group_name', align: 'center' }, { label: '客户名称', prop: 'group_name', align: 'center' },
{ label: '创建时间', prop: 'customer_num', align: 'center' }, { label: '创建时间', prop: 'customer_num', align: 'center' },
{ label: '创建人', prop: 'employees_num', align: 'center' }, { label: '创建人', prop: 'employees_num', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' } { label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' }
], ],
...@@ -53,8 +59,26 @@ export default { ...@@ -53,8 +59,26 @@ export default {
} }
}, },
methods: { methods: {
success() {
// this.$parent.$parent.getDetail()
},
// 删除客户
onRemove(row) {
this.$confirm('确认要删除此项吗?', '确认删除', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleRemove(row)
})
},
// 删除 // 删除
onRemove() {} handleRemove(row) {
// deleteGroup({ id: row.id }).then(res => {
// this.$message({ type: 'success', message: '删除成功' })
// this.$refs.list.refetch()
// })
}
} }
} }
</script> </script>
......
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</el-row> </el-row>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="danger" @click="onRemove(row)" style="margin-left: 10px" size="mini" plain>删除</el-button> <el-button type="text" @click="onRemove(row)">删除</el-button>
</template> </template>
</app-list> </app-list>
<AddEmployees :visible.sync="isShowDialog" /> <AddEmployees :visible.sync="isShowDialog" @success="success" />
</app-card> </app-card>
</template> </template>
...@@ -25,6 +25,12 @@ export default { ...@@ -25,6 +25,12 @@ export default {
} }
}, },
components: { AppList, AppCard, AddEmployees }, components: { AppList, AppCard, AddEmployees },
props: {
id: {
type: String,
default: ''
}
},
computed: { computed: {
// 列表配置 // 列表配置
tableOptions() { tableOptions() {
...@@ -54,8 +60,26 @@ export default { ...@@ -54,8 +60,26 @@ export default {
} }
}, },
methods: { methods: {
success() {
// this.$parent.$parent.getDetail()
},
// 删除 // 删除
onRemove() {} onRemove(row) {
this.$confirm('确认要删除此项吗?', '确认删除', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleRemove(row)
})
},
// 删除
handleRemove(row) {
// deleteGroup({ id: row.id }).then(res => {
// this.$message({ type: 'success', message: '删除成功' })
// this.$refs.list.refetch()
// })
}
} }
} }
</script> </script>
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div> <div>
<el-tabs type="card"> <el-tabs type="card">
<el-tab-pane label="客户"> <el-tab-pane label="客户">
<Customer /> <Customer :id="id" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="员工"> <el-tab-pane label="员工">
<Employees /> <Employees :id="id" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -15,9 +15,24 @@ ...@@ -15,9 +15,24 @@
import Customer from '../components/Customer.vue' import Customer from '../components/Customer.vue'
import Employees from '../components/Employees.vue' import Employees from '../components/Employees.vue'
export default { export default {
data() {
return {
id: ''
}
},
components: { components: {
Customer, Customer,
Employees Employees
},
mounted() {
this.id = this.$route.query.id
this.getDetail()
},
methods: {
getDetail() {
// getGroupDetail().then(res => {
// })
}
} }
} }
</script> </script>
......
...@@ -3,20 +3,19 @@ ...@@ -3,20 +3,19 @@
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<template> <template>
<el-row style="margin-bottom: 20px"> <el-row style="margin-bottom: 20px">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="isShowDialog = true">新建客户组</el-button> <el-button type="primary" icon="el-icon-plus" size="mini" @click="addGroup">新建客户组</el-button>
</el-row> </el-row>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<router-link :to="{ path: 'customergroup/detail', query: { id: row.id } }"> <router-link :to="{ path: 'customergroup/detail', query: { id: row.id } }">
<el-button type="primary" style="margin-left: 10px" size="mini" plain>查看</el-button> <el-button type="text" style="margin-left: 10px">查看</el-button>
</router-link> </router-link>
<el-button type="success" style="margin-left: 10px" size="mini" plain @click="isShowDialog = true" <el-button type="text" style="margin-left: 10px" @click="edit(row)">编辑</el-button>
>编辑</el-button <el-button type="text" @click="onRemove(row)" style="margin-left: 10px">删除</el-button>
>
<el-button type="danger" @click="onRemove(row)" style="margin-left: 10px" size="mini" plain>删除</el-button>
</template> </template>
</app-list> </app-list>
<AddCustomerGroup :visible.sync="isShowDialog" /> <!-- 新建客户组弹框 -->
<AddCustomerGroup :visible.sync="isShowDialog" :id="id" @success="success" />
</app-card> </app-card>
</template> </template>
...@@ -29,6 +28,7 @@ export default { ...@@ -29,6 +28,7 @@ export default {
components: { AppCard, AppList, AddCustomerGroup }, components: { AppCard, AppList, AddCustomerGroup },
data() { data() {
return { return {
id: '',
isShowDialog: false isShowDialog: false
} }
}, },
...@@ -49,8 +49,8 @@ export default { ...@@ -49,8 +49,8 @@ export default {
{ label: '客户组名称', prop: 'group_name', align: 'center' }, { label: '客户组名称', prop: 'group_name', align: 'center' },
{ label: '客户数量', prop: 'customer_num', align: 'center' }, { label: '客户数量', prop: 'customer_num', align: 'center' },
{ label: '员工数量', prop: 'employees_num', align: 'center' }, { label: '员工数量', prop: 'employees_num', align: 'center' },
{ label: '创建时间', prop: 'created_name', align: 'center' }, { label: '创建时间', prop: 'created_at', align: 'center' },
{ label: '创建人', prop: 'creater', align: 'center' }, { label: '创建人', prop: 'created_by', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' } { label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' }
], ],
data: [ data: [
...@@ -62,10 +62,34 @@ export default { ...@@ -62,10 +62,34 @@ export default {
} }
}, },
methods: { methods: {
// success() { addGroup() {
// this.$refs.list.refetch() this.isShowDialog = true
// } },
edit(row) {
this.id = row.id
this.isShowDialog = true
},
success() {
//刷新页面
// this.$refs.list.refetch()
},
// 删除客户组
onRemove(row) {
this.$confirm('确认要删除此项吗?', '确认删除', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleRemove(row)
})
},
// 删除 // 删除
handleRemove(row) {
// deleteGroup({ id: row.id }).then(res => {
// this.$message({ type: 'success', message: '删除成功' })
// this.$refs.list.refetch()
// })
}
} }
} }
</script> </script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论