lin-cms分頁的能做一期嗎？
<template>
? <div class="container">
? ? <div class="title">黨員明細</div>
? ? <div class="header">
? ? ? <div class="header-left"><el-button type="primary" @click="handleAdd">新增黨員信息</el-button></div>
? ? ? <div class="header-right">
? ? ? ? <lin-search @query="onQueryChange" placeholder="請輸入姓名" />
? ? ? ? <div style="margin-left: 30px">
? ? ? ? ? <el-button type="primary" @click="dialogTableVisible = !dialogTableVisible">列操作</el-button>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <!-- 表格-->
? ? <div class="table-container">
? ? ? <el-table :data="djbList">
? ? ? ? <el-table-column label="序號" type="index" />
? ? ? ? <el-table-column label="類型" prop="type" width="100">
? ? ? ? ? <template v-slot="scope">
? ? ? ? ? ? {{ type[scope.row.type] }}
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? ? <!-- <el-table-column label="電子照片" prop="image">
?<template v-slot="scope">
? ? <el-avatar shape="square" :size="100" :fit="fit" :src= "scope.row.image"></el-avatar>
? ? ? ? ? </template>
? ? ? ? </el-table-column> -->
? ? ? ? <el-table-column label="姓名" prop="xmname" width="100"></el-table-column>
? ? ? ? <el-table-column label="性別" prop="sex" width="60">
? ? ? ? ? <template v-slot="scope">
? ? ? ? ? ? {{ sex[scope.row.sex] }}
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? ? <el-table-column label="民族" prop="ming" width="100">
? ? ? ? ? <template v-slot="scope">
? ? ? ? ? ? {{ ming[scope.row.ming] }}
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? ? <el-table-column label="身份證" prop="idcard"> </el-table-column>
? ? ? ? <el-table-column label="籍貫" prop="city"></el-table-column>
? ? ? ? <el-table-column label="地址" prop="address"></el-table-column>
? ? ? ? <el-table-column label="手機號" prop="telphone" width="120"></el-table-column>
? ? ? ? <el-table-column label="狀態" prop="status" width="80">
? ? ? ? ? <template v-slot="scope">
? ? ? ? ? ? <el-tag v-if="scope.row.status === 1" type="success">在職</el-tag>
? ? ? ? ? ? <el-tag v-else type="danger">離職</el-tag>
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? ? <el-table-column label="操作" fixed="right" width="275">
? ? ? ? ? <template #default="scope">
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? plain
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? @click="handleEdit(scope.row)"
? ? ? ? ? ? ? v-permission="{ permission: '編輯', type: 'disabled' }"
? ? ? ? ? ? ? >編輯</el-button
? ? ? ? ? ? >
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? plain
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? type="danger"
? ? ? ? ? ? ? @click="handleDelete(scope.row)"
? ? ? ? ? ? ? v-permission="{ permission: '刪除', type: 'disabled' }"
? ? ? ? ? ? ? >刪除</el-button
? ? ? ? ? ? >
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? </el-table>
? ? </div>
? ? <el-dialog
? ? ? :title="dialogTitle"
? ? ? v-model="showDialog"
? ? ? :close-on-press-escape="false"
? ? ? :close-on-click-modal="false"
? ? ? @close="resetForm"
? ? ? width="900px"
? ? >
? ? ? <el-form v-if="showComp" :model="temp" status-icon ref="form" label-width="100px" :rules="rules">
? ? ? ? <el-form-item label="電子照片" prop="image">
? ? ? ? ? <upload-imgs ref="uploadEle" :value="contentImgData" :max-num="1" />
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="類型" prop="type">
? ? ? ? ? <el-radio v-model="temp.type" :label="100">正式黨員</el-radio>
? ? ? ? ? <el-radio v-model="temp.type" :label="200">預備黨員</el-radio>
? ? ? ? ? <el-radio v-model="temp.type" :label="300">入黨積極分子</el-radio>
? ? ? ? ? <el-radio v-model="temp.type" :label="400">申請入黨</el-radio>
? ? ? ? </el-form-item>
? ? ? ? <el-row>
? ? ? ? ? <el-col :span="6"
? ? ? ? ? ? ><el-form-item label="姓名" prop="xmname">
? ? ? ? ? ? ? <el-input v-model="temp.xmname" :disabled="dialogTitle == '編輯內容'"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? </el-col>
? ? ? ? ? <el-col :span="6">
? ? ? ? ? ? <el-form-item label="性別" prop="sex">
? ? ? ? ? ? ? <el-radio v-model="temp.sex" :disabled="dialogTitle == '編輯內容'" aria-checked="true" :label="201"
? ? ? ? ? ? ? ? >男</el-radio
? ? ? ? ? ? ? >
? ? ? ? ? ? ? <el-radio v-model="temp.sex" :disabled="dialogTitle == '編輯內容'" :label="202">女</el-radio>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? </el-col>
? ? ? ? ? <el-col :span="6">
? ? ? ? ? ? <el-form-item label="年齡" prop="age"> <el-input v-model="temp.age"></el-input> </el-form-item
? ? ? ? ? ></el-col>
? ? ? ? ? <el-col :span="6">
? ? ? ? ? ? <el-form-item label="民族" prop="ming">
? ? ? ? ? ? ? <el-select v-model="temp.ming" placeholder="請選擇">
? ? ? ? ? ? ? ? <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
? ? ? ? ? ? ? ? </el-option>
? ? ? ? ? ? ? </el-select>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? </el-col>
? ? ? ? </el-row>
? ? ? ? <el-row>
? ? ? ? ? <el-col :span="12"
? ? ? ? ? ? ><el-form-item label="身份證號" prop="idcard">
? ? ? ? ? ? ? <el-input v-model="temp.idcard" :disabled="dialogTitle == '編輯內容'"></el-input> </el-form-item
? ? ? ? ? ></el-col>
? ? ? ? ? <el-col :span="12"
? ? ? ? ? ? ><el-form-item label="聯系電話" prop="telphone">
? ? ? ? ? ? ? <el-input v-model="temp.telphone" :disabled="dialogTitle == '編輯內容'"></el-input> </el-form-item
? ? ? ? ? ></el-col>
? ? ? ? </el-row>
? ? ? ? <el-row>
? ? ? ? ? <el-col :span="12">
? ? ? ? ? ? <el-form-item label="籍貫" prop="city">
? ? ? ? ? ? ? <el-input v-model="temp.city" :disabled="dialogTitle == '編輯內容'"></el-input> </el-form-item
? ? ? ? ? ></el-col>
? ? ? ? ? <el-col :span="12">
? ? ? ? ? ? <el-form-item label="居住地址" prop="address"> <el-input v-model="temp.address"></el-input> </el-form-item
? ? ? ? ? ></el-col>
? ? ? ? </el-row>
? ? ? ? <el-form-item label="加入時間" prop="pubdate">
? ? ? ? ? <el-date-picker
? ? ? ? ? ? v-model="temp.pubdate"
? ? ? ? ? ? type="date"
? ? ? ? ? ? placeholder="選擇日期"
? ? ? ? ? ? :disabled="dialogTitle == '編輯內容'"
? ? ? ? ? ></el-date-picker>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="有效">
? ? ? ? ? <el-switch v-model="temp.status" :active-value="1" :inactive-value="0"></el-switch>
? ? ? ? </el-form-item>
? ? ? </el-form>
? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="showDialog = false">取消</el-button>
? ? ? ? <el-button type="primary" @click="dialogTitle === '添加黨員信息' ? confirmAdd() : confirmEdit()"
? ? ? ? ? >保存</el-button
? ? ? ? >
? ? ? </span>
? ? </el-dialog>
? ? <el-dialog title="提示" v-model="showDeleteDialog" width="400px">
? ? ? <span>確定要刪除嗎？</span>
? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="showDialog = false">取消</el-button>
? ? ? ? <el-button type="danger" @click="confirmDelete">刪除</el-button>
? ? ? </span>
? ? </el-dialog>
? </div>
</template>
<script>
import { DjbModel } from '@/model/djb'
import { ElMessage } from 'element-plus'
import LinSearch from '@/component/base/search/lin-search'
import UploadImgs from '../../component/base/upload-image/index'
export default {
? name: 'list',
? filters: {
? ? phoneFilter(val) {
? ? ? const reg = /^(.{3}).*(.{4})$/
? ? ? return val.replace(reg, '$1****$2')
? ? },
? },
? components: { UploadImgs, LinSearch },
? data() {
? ? return {
? ? ? djbList: [],
? ? ? dialogTitle: '',
? ? ? showDeleteDialog: false,
? ? ? showDialog: false,
? ? ? showComp: false,
? ? ? temp: {
? ? ? ? id: null,
? ? ? ? xmname: '',
? ? ? ? type: '',
? ? ? ? telphone: '',
? ? ? ? status: '',
? ? ? ? sex: '',
? ? ? ? age: null,
? ? ? ? ming: '',
? ? ? ? idcard: '',
? ? ? ? city: '',
? ? ? ? address: '',
? ? ? ? pubdate: '',
? ? ? ? image: null,
? ? ? },
? ? ? options: [
? ? ? ? {
? ? ? ? ? value: '301',
? ? ? ? ? label: '漢族',
? ? ? ? },
? ? ? ? {
? ? ? ? ? value: '302',
? ? ? ? ? label: '藏族',
? ? ? ? },
? ? ? ],
? ? ? type: {
? ? ? ? 100: '正式黨員',
? ? ? ? 200: '預備黨員',
? ? ? ? 300: '入黨積極分子',
? ? ? ? 400: '申請預備黨員',
? ? ? },
? ? ? sex: {
? ? ? ? 201: '男',
? ? ? ? 202: '女',
? ? ? },
? ? ? ming: {
? ? ? ? 301: '漢族',
? ? ? ? 302: '藏族',
? ? ? },
? ? ? contentImgData: [],
? ? ? rules: {
? ? ? ? type: [{ required: true, message: '類型不能為空', trigger: 'blur' }],
? ? ? ? xmname: [{ required: true, message: '名字不能為空', trigger: 'blur' }],
? ? ? ? idcard: [{ required: true, message: '身份證號不能為空', trigger: 'blur' }],
? ? ? ? telphone: [{ required: true, message: '聯系電話不為空', trigger: 'blur' }],
? ? ? ? age: [{ required: true, message: '年齡為數字', trigger: 'blur' }],
? ? ? ? address: [{ required: true, message: '居住地址不能為空', trigger: 'blur' }],
? ? ? ? city: [{ required: true, message: '籍貫不能為空', trigger: 'blur' }],
? ? ? },
? ? }
? },
? created() {
? ? this.getDjbList()
? },
? methods: {
? ? async getDjbList() {
? ? ? this.djbList = await DjbModel.getDjbList()
? ? },
? ? async handleAdd() {
? ? ? this.dialogTitle = '添加黨員信息'
? ? ? this.showDialog = true
? ? ? this.showComp = true
? ? },
? ? async handleEdit(row) {
? ? ? this.dialogTitle = '編輯內容'
? ? ? this.showDialog = true
? ? ? this.showComp = true
? ? ? this.temp.id = row.id
? ? ? this.temp.xmname = row.xmname
? ? ? this.temp.idcard = row.idcard
? ? ? this.temp.type = row.type
? ? ? this.temp.ming = row.ming
? ? ? this.temp.address = row.address
? ? ? this.temp.city = row.city
? ? ? this.temp.telphone = row.telphone
? ? ? this.temp.age = row.age
? ? ? this.temp.sex = row.sex
? ? ? this.temp.image = row.image
? ? ? this.temp.pubdate = row.pubdate
? ? ? this.temp.status = row.status
? ? ? this.contentImgData.push({ display: row.image })
? ? },
? ? async confirmAdd() {
? ? ? const images = await this.$refs.uploadEle.getValue()
? ? ? this.temp.image = images.length < 1 ? '' : images[0].src
? ? ? this.$refs.form.validate(async valid => {
? ? ? ? if (valid) {
? ? ? ? ? delete this.temp.id
? ? ? ? ? const res = await DjbModel.addDjbList(this.temp)
? ? ? ? ? this.showDialog = false
? ? ? ? ? ElMessage.success(res.message)
? ? ? ? ? await this.getDjbList()
? ? ? ? }
? ? ? })
? ? },
? ? // 編輯
? ? async confirmEdit() {
? ? ? const images = await this.$refs.uploadEle.getValue()
? ? ? this.temp.image = images.length < 1 ? '' : images[0].src
? ? ? this.$refs.form.validate(async valid => {
? ? ? ? if (valid) {
? ? ? ? ? const { id } = this.temp
? ? ? ? ? const res = await DjbModel.editDjbList(id, this.temp)
? ? ? ? ? this.showDialog = false
? ? ? ? ? this.$message.success(res.message)
? ? ? ? ? await this.getDjbList()
? ? ? ? }
? ? ? })
? ? },
? ? // 刪除
? ? handleDelete(row) {
? ? ? this.showDeleteDialog = true
? ? ? this.temp.id = row.id
? ? ? this.temp.type = row.type
? ? },
? ? async confirmDelete() {
? ? ? const res = await DjbModel.deleteDjblist(this.temp.id, this.temp.type)
? ? ? this.$message.success(res.message)
? ? ? this.showDeleteDialog = false
? ? ? await this.getDjbList()
? ? },
? ? resetForm() {
? ? ? this.contentImgData = []
? ? ? this.temp = []
? ? },
? },
}
</script>
<style lang="scss" scoped>
.container {
? padding: 0 30px;
? .header {
? ? display: flex;
? ? justify-content: space-between;
? ? align-items: center;
? ? padding: 0 30px;
? ? border-bottom: 1px solid #dae1ed;
? ? .header-left {
? ? ? float: left;
? ? ? .title {
? ? ? ? height: 59px;
? ? ? ? line-height: 59px;
? ? ? ? color: $parent-title-color;
? ? ? ? font-size: 16px;
? ? ? ? font-weight: 500;
? ? ? }
? ? }
? ? .header-right {
? ? ? float: right;
? ? ? display: flex;
? ? ? justify-content: space-between;
? ? ? align-items: center;
? ? }
? }
? .title {
? ? height: 59px;
? ? line-height: 59px;
? ? color: $parent-title-color;
? ? font-size: 16px;
? ? font-weight: 500;
? ? text-indent: 40px;
? }
? .add-button {
? ? padding: 20px 40px;
? }
? .header-right {
? ? float: right;
? ? display: flex;
? ? justify-content: space-between;
? ? align-items: center;
? }
? .pagination {
? ? display: flex;
? ? justify-content: flex-end;
? ? margin: 20px;
? }
? .table-container {
? ? padding: 0 40px 20px 40px;
? }
}
</style>
