<template>
<div>
<div style="width: 100%;height: 100px;">
<!-- 搜索 -->
<div style="margin-top: 30px;margin-left: 30px;float: left;width: 600px;">
<div style="float: left;margin-top: 10px;">
请输入名称:
</div>
<div style="width: 300px;float: left">
<!-- 搜索 -->
<el-input v-model="quere.input" placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
</el-input>
</div>
</div>
</div>
<!-- 添加拼团商品 -->
<el-button type="primary" @click="addto" style="float: left; margin-left: 30px;margin-bottom: 25px;">添加拼团商品</el-button>
<!-- 表格 -->
<el-table :data="DataList" style="width: 100%">
<el-table-column label="登录账号" prop="number">
</el-table-column>
<el-table-column label="姓名" prop="name">
</el-table-column>
<el-table-column label="权限组" prop="permission">
</el-table-column>
<el-table-column label="简单说明" prop="desc">
</el-table-column>
<el-table-column label="状态">
<template slot-scope="{row}">
<el-switch v-model="row.state" class="switch" :active-value="1" :inactive-value="0"
@change="handleStatusChange($event, row)" />
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 页码 -->
<div>
<pagination v-show="total>0" :page-sizes="[3,5,7]" :total="total" :page.sync="quere.page" :limit.sync="quere.limit" @pagination="getData" />
</div>
<!-- 弹出的页面内容 -->
<div>
<!-- 新增 -->
<el-dialog :visible.sync="getmessage">
<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="登陆账号" prop="pass">
<el-input v-model="ruleForm.number"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="checkPass">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="age">
<el-input v-model="ruleForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="简单说明" prop="checkPass">
<el-input v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
<!-- 弹出的页面内容 -->
<div>
<!-- 修改 -->
<el-dialog :visible.sync="modify">
<el-form :model="ruleItem" label-width="100px" class="demo-ruleForm">
<el-form-item label="登陆账号" prop="pass">
<el-input v-model="ruleItem.number"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="checkPass">
<el-input v-model="ruleItem.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="age">
<el-input v-model="ruleItem.password" type="password"></el-input>
</el-form-item>
<el-form-item label="简单说明" prop="checkPass">
<el-input v-model="ruleItem.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitModify(ruleItem)">提交</el-button>
<el-button @click="resetForm('ruleItem')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</template>
<script>
import {CustomerList,handleDelete,CustomerAdd,getItem,submitModify,handleStatusChange} from '@/api/charts'
import Pagination from '@/components/Pagination'
export default {
components:{ Pagination },
data() {
return {
value: '',
DataList:[],
total:0,
quere:{
page:1,
limit:3,
input:'',
},
//新增弹框
getmessage:false,
ruleForm: {
number: '',
name: '',
password: '',
desc:''
},
//修改弹框
modify:false,
ruleItem:{
number: '',
name: '',
password: '',
desc:''
}
}
},
created() {
this.getData()
},
methods: {
//弹框新增
addto(){
this.getmessage = true
},
//新增
submitForm() {
CustomerAdd(this.ruleForm).then((Response) => {
if(Response.code == 20000){
this.getmessage = false
this.getData()
this.$notify({ title: '新增', message: '新增成功!', type: 'success', duration: 2000 })
}
})
},
//状态
handleStatusChange($event, row){
console.log($event,row.id)
handleStatusChange($event,row.id).then((response)=>{
console.log(response)
if(response.code == 20000){
this.getData()
this.$notify({ title: '状态', message: '状态修改成功!', type: 'success', duration: 2000 })
}
})
},
//修改弹框
handleEdit(row){
getItem(row.id).then((response)=>{
if(response.code == 20000){
this.modify = true
this.ruleItem = response.data
}
})
},
//修改数据
submitModify(){
console.log(this.ruleItem)
submitModify(this.ruleItem).then((response)=>{
console.log(response)
if(response.code == 20000){
this.modify = false
this.getData()
this.$notify({ title: '修改', message: '修改成功!', type: 'success', duration: 2000 })
}
})
},
//删除
handleDelete(row){
this.$confirm('你确定要删除该信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
await handleDelete(row.id)
this.getData()
this.$message({ type: 'success', message: '删除成功!' })
}).catch(() => {
this.$message({ type: 'success', message: '已取消删除' })
})
},
//客服列表
getData(){
CustomerList( this.quere).then((response) => {
this.total = response.data.total
this.DataList = response.data.data
})
}
}
}
</script>
<?php
namespace App\Repository\Repositories;
use App\Models\Customer;
use App\Repository\RepositoryInterface\Jurisdictionface;
use Symfony\Component\VarDumper\Dumper\DataDumperInterface;
class Jurisdiction implements Jurisdictionface
{
public function CustomerList($input,$limit,$page)
{
$where = [];
if (!empty($input)){
$where[] = [
'name','like',"%$input%"
];
}
$data = Customer::where($where)->paginate($limit)->toArray();
return success('查询成功',$data);
}
public function CustomerDelete($id)
{
$res = Customer::where('id',$id)->delete();
if (!$res) return fail('删除失败');
return success('删除成功');
}
public function CustomerAdd($data)
{
$res = Customer::insert($data);
if (!$res) return fail('添加失败');
return success('添加成功');
}
public function getItem($id)
{
$data = Customer::where('id',$id)->first();
if (!$data) return fail('查询失败');
return success('查询成功',$data);
}
public function submitModify($data)
{
$data = Customer::where('id',$data['id'])->update($data);
if (!$data) return fail('修改失败');
return success('修改成功');
}
public function handleStatusChange($state,$id)
{
if ($state == 1){
$res = Customer::where('id',$id)->update(['state' => 1]);
if (!$res) return fail('状态修改失败');
return success('状态修改成功');
}else{
$res = Customer::where('id',$id)->update(['state' => 0]);
if (!$res) return fail('状态修改失败');
return success('状态修改成功');
}
}
}
图片
<el-table-column label="头像" >
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.headshot"
fit="contain">
</el-image>
</template>
</el-table-column>