1、實(shí)現(xiàn)效果
?
?
1.1、文件目錄
1.2、說(shuō)明
1、本組件支持列表的表頭自定義配置，checkbox實(shí)現(xiàn)
2、本組件支持列表列排序，vuedraggable是拖拽插件，上圖中字段管理里的拖拽效果 ，需要的話請(qǐng)自行npm install
3、本組件支持查詢條件動(dòng)態(tài)配置，穿梭框?qū)崿F(xiàn)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-792380.html
2、table.vue(最父級(jí)，入口調(diào)用)
<template>
<div>
<index ref="tableTemplete" @templete-del="tempDel" :options="options" :buttons="buttonList" :key="datekey" @templete-list="fetchData"
@templete-submit="tempSubmit" />
</div>
</template>
<script>
import index from './index'
export default {
name: 'tableTemplete',
components: {
index
},
data() {
return {
tableList: [],
queryForm: [],
datekey: Date.now(),
//組件封裝需要修改處--start
options: [
{
id: 0,
name: 'name',
label: '姓名',
type: 'text',
param: '',
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 1,
name: 'age',
label: '年齡',
type: 'number_range',
param: '',
isShow: true,
isValidate: true,
exp: 'age',
extra: {
icon: 'file-list-line',
},
},
{
id: 2,
name: 'phone_main',
label: '主要電話',
type: 'text',
param: '',
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
columnStyle: 'labelCall',
},
},
{
id: 3,
name: 'phone_backup',
label: '備用電話',
type: 'text',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 4,
name: 'id_card',
label: '身份證號(hào)',
type: 'text',
param: '',
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 5,
name: 'birth_day',
label: '生日',
type: 'date_range',
param: '',
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 6,
name: 'sex',
label: '性別',
type: 'select',
param: [
{
label: '未知',
value: 0,
},
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
],
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 7,
name: 'type',
label: '老人類型',
type: 'select',
param: [
{
value: 101,
label: '獨(dú)居',
},
{
value: 102,
label: '孤老',
},
{
value: 103,
label: '失獨(dú)',
},
{
value: 104,
label: '其他',
},
],
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
columnStyle: 'labelTags',
labelTags: {
101: 'table-status-blue',
102: 'table-status-brown',
103: 'table-status-green',
104: 'table-status-yellow',
},
},
},
{
id: 8,
name: 'street',
label: '街道',
type: 'text',
param: '',
isShow: true,
isValidate: true,
exp: 'street',
extra: {
icon: 'file-list-line',
},
},
{
id: 9,
name: 'committee',
label: '居委',
type: 'text',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 10,
name: 'address',
label: '詳細(xì)地址',
type: 'text',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 11,
name: 'reg_address',
label: '戶籍地址',
type: 'text',
param: '',
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 12,
name: 'source',
label: '來(lái)源',
type: 'text',
param: [],
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 13,
name: 'create_time',
label: '創(chuàng)建時(shí)間',
type: 'datetime_range',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 14,
name: 'update_time',
label: '更新時(shí)間',
type: 'datetime_range',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 15,
name: 'create_user_id',
label: '創(chuàng)建人',
type: 'text',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 16,
name: 'update_user_id',
label: '更新人',
type: 'text',
param: '',
isShow: true,
isValidate: false,
exp: '',
extra: {
icon: 'file-list-line',
},
},
{
id: 17,
name: 'enable_flag',
label: '啟用狀態(tài)',
type: 'radio',
param: [
{
value: 1,
label: '啟用',
},
{
value: 0,
label: '停用',
}
],
isShow: true,
isValidate: true,
exp: '',
extra: {
icon: 'file-list-line',
},
},
],
//組件封裝需要修改處--end
buttonList: [
{
label: '修改',
title: '修改信息',
value: 'update',
options: [],
}, {
label: '審批',
title: '審批信息',
value: 'approve',
options: [{
id: 18,
name: 'approve-type',
label: '審批原因',
type: 'select',
param: [
{
value: 0,
label: '同意',
},
{
value: 1,
label: '拒絕',
},
],
isShow: true,
isValidate: true,
},
{
id: 19,
name: 'approve-reason',
label: '審批意見(jiàn)',
type: 'textarea',
param: '',
isShow: true,
isValidate: false,
exp: '',
}],
}
],
}
},
watch: {},
created() {
this.getList()
},
mounted() {
this.getList()
},
methods: {
//刪除
tempDel(data) {
this.$confirm('是否確認(rèn)刪除選中的數(shù)據(jù)項(xiàng)?', "系統(tǒng)提示", {
closeOnClickModal: false,
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return true;
}).then(() => {
this.$message({
message: '刪除成功',
type: 'success'
});
}).catch(function () { });
},
//提交
tempSubmit(data, val) {
console.log(data)
if ('approve' === val) {
this.$message({
message: '審批完成',
type: 'success'
});
// 調(diào)用子組件方法
this.$refs.tableTemplete.submitClose();
} else {
if (data.id != undefined) {
this.$message({
message: '修改成功',
type: 'success'
});
// 調(diào)用子組件方法
this.$refs.tableTemplete.submitClose();
} else {
this.$message({
message: '新增成功',
type: 'success'
});
// 調(diào)用子組件方法
this.$refs.tableTemplete.submitClose();
}
}
},
//組件封裝需要修改處--start
fetchData(arr) {
this.queryForm = arr;
this.getList()
},
// 請(qǐng)求table數(shù)據(jù)
getList() {
if (this.queryForm.age === '20') {
this.tableList = [
{
id: 1,
type: 101,
enable_flag: 1,
name: '柳倩倩',
marital_status: {
value: 0,
label: '--',
},
phone_main: '0215567252',
phone_backup: '18221274181',
id_card: '350583199202224336',
birth_day: '1976-03-02',
tags: ['123124'],
sex: 2,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '松江工業(yè)區(qū)',
committee: '松江工業(yè)區(qū)虛擬社區(qū)',
address: '泰晤士小鎮(zhèn)',
reg_address: '戶籍',
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: 'A',
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: '',
create_time: '2022-01-18 10:52:45',
update_time: '2022-04-06 18:28:28',
create_user_id: 0,
update_user_id: 0,
contract: 1,
category: [],
frequency: '',
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 46,
},
{
id: 2,
type: 102,
enable_flag: 1,
name: '潘宗磊',
marital_status: 0,
phone_main: '13822223333',
phone_backup: '18817673315',
id_card: '34240119881214323X',
birth_day: '1988-12-14',
tags: ['老人', '身體不便', '高血壓'],
sex: 2,
province: '安徽省',
city: '六安市',
area: '裕安區(qū)',
street: '九里亭街道',
committee: '泉水村委會(huì)',
address: '泉水沖',
reg_address: '上海市松江區(qū)泰晤士小鎮(zhèn)',
remark: '備注111',
status: 1,
general_info: '',
medical_card: '123123',
blood_type: {
value: 'AB',
label: 'AB',
},
health_info: '',
physical_condition:
'<p><font color="#c24f4a"><b><i>正常</i></b></font><span style="font-size: 14px;"></span></p>',
basic_info: '<p>11</p>',
allergic_drugs: '<p>22</p>',
medical_records: '<p>33</p>',
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 11:01:06',
update_time: '2022-04-09 15:38:23',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: ['2', '3'],
frequency: {
value: 1,
label: '一周兩次',
},
service_start: '2022-04-20',
service_end: '2022-04-30',
service_status: {
value: 2,
label: '取消',
},
service_cancel_reason: {
value: 3,
label: '搬遷',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 33,
}
]
} else {
this.tableList = [
{
id: 1,
type: 101,
enable_flag: 1,
name: '柳倩倩',
marital_status: {
value: 0,
label: '--',
},
phone_main: '0215567252',
phone_backup: '18221274181',
id_card: '350583199202224336',
birth_day: '1976-03-02',
tags: ['123124'],
sex: 2,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '松江工業(yè)區(qū)',
committee: '松江工業(yè)區(qū)虛擬社區(qū)',
address: '泰晤士小鎮(zhèn)',
reg_address: '戶籍',
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: 'A',
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: '',
create_time: '2022-01-18 10:52:45',
update_time: '2022-04-06 18:28:28',
create_user_id: 0,
update_user_id: 0,
contract: 1,
category: [],
frequency: '',
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 46,
},
{
id: 2,
type: 102,
enable_flag: 1,
name: '潘宗磊',
marital_status: 0,
phone_main: '13822223333',
phone_backup: '18817673315',
id_card: '34240119881214323X',
birth_day: '1988-12-14',
tags: ['老人', '身體不便', '高血壓'],
sex: 2,
province: '安徽省',
city: '六安市',
area: '裕安區(qū)',
street: '九里亭街道',
committee: '泉水村委會(huì)',
address: '泉水沖',
reg_address: '上海市松江區(qū)泰晤士小鎮(zhèn)',
remark: '備注111',
status: 1,
general_info: '',
medical_card: '123123',
blood_type: {
value: 'AB',
label: 'AB',
},
health_info: '',
physical_condition:
'<p><font color="#c24f4a"><b><i>正常</i></b></font><span style="font-size: 14px;"></span></p>',
basic_info: '<p>11</p>',
allergic_drugs: '<p>22</p>',
medical_records: '<p>33</p>',
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 11:01:06',
update_time: '2022-04-09 15:38:23',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: ['2', '3'],
frequency: {
value: 1,
label: '一周兩次',
},
service_start: '2022-04-20',
service_end: '2022-04-30',
service_status: {
value: 2,
label: '取消',
},
service_cancel_reason: {
value: 3,
label: '搬遷',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 33,
},
{
id: 3,
type: 103,
enable_flag: 1,
name: '宋巖',
marital_status: {
value: 0,
label: '--',
},
phone_main: '',
phone_backup: '13917303249',
id_card: '350583199202224336',
birth_day: '2022-01-13',
tags: [],
sex: 1,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '岳陽(yáng)街道',
committee: '醉白池社區(qū)居委會(huì)',
address: '新凱城',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'A',
label: 'A',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 11:42:19',
update_time: '2022-02-15 15:07:14',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 0,
},
{
id: 4,
type: 104,
enable_flag: 1,
name: '李三',
marital_status: 0,
phone_main: '',
phone_backup: '13917303249',
id_card: '350583199202224336',
birth_day: '2022-01-04',
tags: [],
sex: 1,
province: '天津市',
city: '市轄區(qū)',
area: '河西區(qū)',
street: '下瓦房街道',
committee: '臺(tái)北路社區(qū)居委會(huì)',
address: '發(fā)達(dá)',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: '',
label: ' -- ',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 12:03:59',
update_time: '2022-02-18 17:01:12',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 0,
},
{
id: 5,
type: 102,
enable_flag: 1,
name: '張三',
marital_status: 0,
phone_main: '',
phone_backup: '18221274181',
id_card: '51382219941101899X',
birth_day: '1994-11-30',
tags: [],
sex: 1,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '中山街道',
committee: '中山苑社區(qū)居委會(huì)',
address: '泰晤士小鎮(zhèn)卡納比島',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'O',
label: 'O',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 12:05:45',
update_time: '2022-01-25 17:34:37',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 27,
},
{
id: 6,
type: 102,
enable_flag: 1,
name: '陳情期',
marital_status: 0,
phone_main: '0215567252',
phone_backup: '18817673315',
id_card: '350583199202224336',
birth_day: '2022-01-05',
tags: [],
sex: 2,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '松江工業(yè)區(qū)',
committee: '松江工業(yè)區(qū)虛擬社區(qū)',
address: '新凱城',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'A',
label: 'A',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 14:44:58',
update_time: '2022-02-17 14:39:08',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 0,
},
{
id: 7,
type: 102,
enable_flag: 1,
name: '李斯',
marital_status: {
value: 0,
label: '--',
},
phone_main: '0215567252',
phone_backup: '18221274180',
id_card: '51382219941101899X',
birth_day: '2019-01-18',
tags: [],
sex: 0,
province: '四川省',
city: '成都市',
area: '錦江區(qū)',
street: '錦官驛街道',
committee: '水井坊社區(qū)居委會(huì)',
address: '卡納比島',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'A',
label: 'A',
},
health_info: '良好',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 15:14:29',
update_time: '2022-02-19 17:32:08',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 3,
},
{
id: 8,
type: 102,
enable_flag: 1,
name: '李請(qǐng)',
marital_status: {
value: 0,
label: '--',
},
phone_main: '0215567252',
phone_backup: '18221274181',
id_card: '350583199202224336',
birth_day: '2022-01-04',
tags: [],
sex: 1,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '松江工業(yè)區(qū)',
committee: '松江工業(yè)區(qū)虛擬社區(qū)',
address: '泰晤士小鎮(zhèn)',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'A',
label: 'A',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 15:42:02',
update_time: '2022-01-25 17:33:23',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 0,
},
{
id: 9,
type: 102,
enable_flag: 1,
name: '柳慢慢',
marital_status: {
value: 0,
label: '--',
},
phone_main: '0215567252',
phone_backup: '18221274182',
id_card: '350583199202224336',
birth_day: '1945-06-05',
tags: [],
sex: 1,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '岳陽(yáng)街道',
committee: '龍?zhí)渡鐓^(qū)居委會(huì)',
address: '新凱城',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'A',
label: 'A',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 19:58:02',
update_time: '2022-02-16 11:18:17',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 76,
},
{
id: 10,
type: 102,
enable_flag: 1,
name: '小千',
marital_status: {
value: 0,
label: '--',
},
phone_main: '',
phone_backup: '18221274181',
id_card: '350583199202224336',
birth_day: '2022-01-03',
tags: [],
sex: 1,
province: '上海市',
city: '市轄區(qū)',
area: '松江區(qū)',
street: '岳陽(yáng)街道',
committee: '龍?zhí)渡鐓^(qū)居委會(huì)',
address: '新凱城',
reg_address: null,
remark: '',
status: 1,
general_info: '',
medical_card: null,
blood_type: {
value: 'B',
label: 'B',
},
health_info: '',
physical_condition: null,
basic_info: null,
allergic_drugs: null,
medical_records: null,
is_contract: 0,
contract_imgs: [],
source: ' -- ',
create_time: '2022-01-18 20:00:32',
update_time: '2022-01-25 17:33:03',
create_user_id: 0,
update_user_id: 0,
contract: {
value: 1,
label: '幸福久久',
},
category: [],
frequency: {
value: '',
label: ' -- ',
},
service_start: null,
service_end: null,
service_status: {
value: 1,
label: '正常',
},
service_cancel_reason: {
value: 0,
label: '--',
},
agent_id: {
value: 1,
label: 'admin',
},
age: 0,
},
]
}
// 調(diào)用子組件方法
this.$refs.tableTemplete.refreshData(this.tableList);
},
//組件封裝需要修改處----end
},
}
</script>3、index.vue(父級(jí)模版)
<template>
<div class="allCustomer-container">
<!-- 給el-row加上mb8 mpc-section 的class-->
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" size="mini" @click="handleInsert">
新增
</el-button>
</el-col>
</el-row>
<zn-query-form>
<zn-query-form-top-panel>
<!-- 字段管理 -->
<field-management @setColumns="getColumns" :options="options" />
<el-popover placement="right" width="650" style="margin-right: 20px" trigger="click">
<el-transfer v-model="transfers" :props="{ key: 'name', label: 'label'}" :titles="['待選擇', '已選擇']" @change="rightcheckchange"
:data="options" />
<el-button type="text" size="mini" slot="reference" style="border: none;font-size: 14px;margin-left: 10px; ">
<i class="el-icon-s-tools">過(guò)濾器</i>
</el-button>
</el-popover>
<!-- 搜索 -->
<search @up-Search="upSearch" :options="requestParams" />
<!-- 篩選條件 -->
<!-- <filter-tag :tagList="conditionList" @up-table="tableUpdate" /> -->
<div class="filter-tag ml-10 mr-10">
<el-tag @close="conditionClose(index)" style="margin-left: 10px" v-for="(tag, index) in conditionList" :key="index" closable
:type="tag.prop">
<span>{{ tag.tagLabel }} ：</span>
<span style="color: red">{{ tag.tagValue }}</span>
</el-tag>
</div>
</zn-query-form-top-panel>
</zn-query-form>
<zn-filter-table ref="filterTable" :multiple="true" :tableData="tableList" :buttons="buttons" :finallyColumns="finallyColumns" :deatilsPath="deatilsPath"
@selectList="getSelect" @fetch-data="fetchData" :key="datekey" @fetch-edit="fetchEdit" @fetch-update="fetchUpdate" @fetch-del="fetchDel"
/>
<zn-pagination v-show="total > 0" :page.sync="queryForm.page" :key="datekey" :limit.sync="queryForm.listRows" @pagination="fetchData" :total="total"
:algin="'right'" />
<!-- 添加修改對(duì)話框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body :close-on-click-modal="false">
<zn-form ref="dialofForm" :options="optionList" :resForm="form" :disabled="disabled" :key="diaKey" @dialog-submit="submit" @dialog-cancel="cancel"
/>
</el-dialog>
</div>
</template>
<script>
import FieldManagement from './components/FieldManagement'
import ZnQueryForm from './components/ZnQueryForm'
import ZnQueryFormTopPanel from './components/ZnQueryFormTopPanel'
import Search from './components/Search'
import ZnPagination from './components/ZnPagination'
import ZnFilterTable from './components/ZnFilterTable'
import ZnForm from './components/ZnForm'
export default {
name: 'allCustomer',
components: {
FieldManagement,
ZnQueryForm,
ZnQueryFormTopPanel,
Search,
ZnPagination,
ZnFilterTable,
ZnForm
},
props: {
options: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
buttons: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
},
provide() {
return {
mark: 'Member', //特定標(biāo)識(shí),根據(jù)業(yè)務(wù)模塊不同,傳輸?shù)臉?biāo)識(shí)也不同,標(biāo)識(shí)由后端定義(或者字典維護(hù))
}
},
data() {
return {
title: '',
open: false,
disabled: false,
diaKey: Date.now(),
form: {},
transfers: [],
requestParams: [],
total: 0,
listLoading: false,
queryForm: {
page: 1,
listRows: 10,
keywords: '',
_filter: {}, //頭部篩選
},
deatilsPath: '/customer/deatils', //表格當(dāng)前行跳轉(zhuǎn)路徑
conditionList: [], //自定義篩選條件
columns: [], //篩選條件中的數(shù)據(jù)
checkList: [], //篩選條件中選中的數(shù)據(jù)
multipleList: [], //表格復(fù)選多選中的數(shù)據(jù)
datekey: Date.now(),
tableList:[],
optionList:[],
rollbackVal:''
}
},
computed: {
finallyColumns() {
let list = this.columns.filter((item) => this.checkList.includes(item.label))
console.log(list)
//這里更新了datekey ，組件就會(huì)刷新
this.datekey = Date.now()
return list
},
},
watch: {
},
created() {
this.optionList = Array.from(this.options, obj => ({ ...obj }));
// this.fetchData()
},
mounted() {
},
methods: {
// 新增彈出
handleInsert() {
this.title = '新增信息';
this.open = true;
this.disabled = false;
this.optionList = Array.from(this.options, obj => ({ ...obj }));
this.form = {};
//這里更新了diaKey ，組件就會(huì)刷新
this.diaKey = Date.now()
},
//詳情
fetchEdit(data) {
this.title = '詳情查看';
this.open = true;
this.disabled = true;
this.optionList = Array.from(this.options, obj => ({ ...obj }));
this.form = data;
//這里更新了diaKey ，組件就會(huì)刷新
this.diaKey = Date.now()
},
//修改
fetchUpdate(data,val) {
this.rollbackVal = val;
for(let i=0;i<this.buttons.length;i++){
let item = this.buttons[i]
if(item.value === val){
this.title = item.title;
if(item.options.length>0){
for(let j=0;j<item.options.length;j++){
this.optionList.push(item.options[j])
}
}
}
}
this.open = true;
this.disabled = false;
this.form = data;
//這里更新了diaKey ，組件就會(huì)刷新
this.diaKey = Date.now()
},
//刪除
fetchDel(data) {
//調(diào)用父組件刪除
this.$emit('templete-del', data)
//這里更新了diaKey ，組件就會(huì)刷新
this.diaKey = Date.now()
},
//取消
cancel(data) {
this.open = false
this.optionList = Array.from(this.options, obj => ({ ...obj }));
},
//提交
submit(data) {
//調(diào)用父組件刪除
this.$emit('templete-submit', data,this.rollbackVal)
},
submitClose(){
this.open = false
this.optionList = Array.from(this.options, obj => ({ ...obj }));
},
rightcheckchange() {
this.requestParams = [];
for (let i = 0; i < this.transfers.length; i++) {
for (let j = 0; j < this.options.length; j++) {
if (this.transfers[i] === this.options[j].name) {
this.requestParams.push(this.options[j])
}
}
}
},
// 自定義檢索(popover組件(data為對(duì)象)和tag組件(data為數(shù)組))發(fā)射出來(lái)的事件
tableUpdate(data) {
this.$refs.filterTable.tableUpdate(data)
},
conditionClose(index) {
this.conditionList.splice(index, 1) // 關(guān)閉條件tag-發(fā)射給父組件 刪除已選中的
},
// table數(shù)據(jù)回調(diào)
refreshData(datas){
this.listLoading = true
this.tableList = datas
this.total = this.tableList.length
this.listLoading = false
},
//組件封裝需要修改處--start
// 請(qǐng)求table數(shù)據(jù)
fetchData() {
this.listLoading = true
//調(diào)用子組件查詢列表方法
this.$emit('templete-list', this.queryForm)
this.total = this.tableList.length
this.listLoading = false
},
//組件封裝需要修改處----end
// 更新搜索字段,更新table數(shù)據(jù)
upSearch(val) {
console.log("父頁(yè)面收到查詢條件")
this.queryForm = val
console.log(this.queryForm)
this.fetchData()
},
// 獲取多選選中的table數(shù)據(jù)(需求未出,功能暫留)
getSelect(list) {
this.multipleList = list
alert('list', list)
},
// 子組件篩選條件返回
getColumns(columns, checkList) {
this.columns = columns
this.checkList = checkList
},
},
}
</script>
<style lang="scss" scoped>
.el-button {
border: none;
margin-bottom: 0;
}
::v-deep.pop-li {
.el-button {
color: black !important;
}
}
</style>4、FieldManagement組件
<template>
<el-dropdown class="ml-10 mr-10" trigger="hover">
<el-button type="text" size="medium" >
<i class="el-icon-tickets">字段管理</i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-row :gutter="10" type="flex" class="row-flex">
<el-col :span="6">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
勾選您要選擇的字段
</el-checkbox>
</el-col>
<el-divider />
<el-checkbox-group v-if="options.length > 0" v-model="checkList" @change="handleCheckedChange">
<zn-draggable v-bind="dragOptions" :list="options" class="zn-draggable" v-model="options" @sort="dragSort">
<el-col :span="24" class="checkbox-group-col" v-for="item in options" :key="item.id">
<!-- <zn-icon icon="drag-drop-line" /> -->
<el-checkbox :label="item.label">
{{ item.label }}
</el-checkbox>
</el-col>
</zn-draggable>
</el-checkbox-group>
</el-row>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import ZnDraggable from 'vuedraggable'
export default {
name: 'fieldManagement',
components: {
ZnDraggable,
},
inject: ['mark'],
props: {
options: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
},
data() {
return {
checkAll: false,
checkList: [],
options: [],
isIndeterminate: true,
}
},
computed: {
dragOptions() {
return {
animation: 600,
group: 'description',
}
},
},
watch: {},
created() {
this.getHeader()
},
mounted() { },
methods: {
dragSort(e) {
// e.newIndex 為draggable插件給的值
this.options[e.newIndex].sort = e.newIndex + 1;
// 重新排序
this.options.map((item, index) => {
item.sort = index + 1;
})
//對(duì)checkList進(jìn)行排序
let sortCheck = [];
this.options.map((item) => {
if (this.checkList.includes(item.label)) {
sortCheck.push(item)
}
})
let checks = []
sortCheck.map((item) => {
checks.push(item.label)
})
this.$emit('setColumns', this.options, checks)
},
// 字段管理的接口是統(tǒng)一的 , 只有業(yè)務(wù)模塊的mark標(biāo)識(shí)不同 , 所以請(qǐng)求就寫在了組件里
async getHeader() {
this.options.map((item) => {
if (item.isShow == true) {
this.checkList.push(item.label)
}
})
this.checkAll = this.checkList.length === this.options.length
this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.options.length
this.$emit('setColumns', this.options, this.checkList)
},
// 操縱全選
handleCheckAllChange(val) {
if (val) {
this.options.map((item) => {
this.checkList.push(item.label)
})
} else {
this.checkList = []
}
this.isIndeterminate = false
// 向父組件發(fā)送數(shù)據(jù)
this.$emit('setColumns', this.options, this.checkList)
},
// 單個(gè)數(shù)據(jù)選中
handleCheckedChange(value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.options.length
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.options.length
// 向父組件發(fā)送數(shù)據(jù)
this.$emit('setColumns', this.options, this.checkList)
},
},
}
</script>
<style lang="scss" scoped>
.row-flex {
padding: 15px;
display: flex;
flex-direction: column;
}
.zn-draggable {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.checkbox-group-col {
max-height: 100px;
overflow-y: auto;
.el-checkbox {
padding: 3px 0;
width: 100%;
margin-right: 0;
}
}
</style>5、ZnQueryForm組件
<template>
<el-row class="zn-query-form" :gutter="0">
<slot />
</el-row>
</template>
<script>
export default {
name: 'ZnQueryForm',
}
</script>
<style lang="scss" scoped>
@mixin panel {
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: flex-start;
min-height: 20px;
margin: 0 0 0 0;
> .el-button {
margin: 0 10px 0 0 !important;
}
}
.zn-query-form {
::v-deep {
.el-form-item:first-child {
margin: 0 0 0 0 !important;
}
.el-form-item + .el-form-item {
margin: 0 0 0 0 !important;
.el-button {
margin: 0 0 0 10px !important;
}
}
.top-panel {
@include panel;
}
.bottom-panel {
@include panel;
border-top: 1px solid #dcdfe6;
}
.left-panel {
@include panel;
}
.right-panel {
@include panel;
justify-content: flex-end;
}
}
}
</style>
6、ZnQueryFormTopPanel組件
<template>
<el-col :span="24">
<div class="top-panel">
<slot />
</div>
</el-col>
</template>
<script>
export default {
name: 'ZnQueryFormTopPanel',
}
</script>
7、Search組件
<template>
<div>
<el-form :class="cellStyleForm()" :model="queryParams" ref="queryParams" :inline="true" style="margin-bottom: 10px;">
<el-form-item v-for="item in options" :key="item.id" :prop="item.name" style="margin-right: 10px !important">
<el-select v-if="item.type === 'select'" v-model="queryParams[item.name]" :placeholder="'請(qǐng)選擇'+item.label" @change="handleQuery"
clearable filterable>
<el-option v-for="dict in item.param" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
<!-- date 單個(gè)日期-->
<el-date-picker v-else-if="item.type == 'date'" v-model="queryParams[item.name]" type="date" clearable placeholder="選擇日期"
value-format="yyyy-MM-dd" @change="handleQuery" />
<!-- datetime 日期時(shí)間-->
<el-date-picker v-else-if="item.type == 'datetime'" v-model="queryParams[item.name]" type="datetime" placeholder="選擇日期時(shí)間"
value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"></el-date-picker>
<!-- date_range 日期范圍-->
<el-date-picker v-else-if="item.type == 'date_range'" v-model="queryParams[item.name]" type="daterange" range-separator="至"
start-placeholder="開(kāi)始日期" end-placeholder="結(jié)束日期" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
<!-- datetime_range 日期時(shí)分秒范圍-->
<el-date-picker v-else-if="item.type == 'datetime_range'" v-model="queryParams[item.name]" clearable type="datetimerange"
range-separator="至" start-placeholder="開(kāi)始日期" end-placeholder="結(jié)束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"></el-date-picker>
<el-input v-else v-model="queryParams[item.name]" clearable :placeholder="'請(qǐng)輸入'+item.label" @clear="handleQuery"></el-input>
</el-form-item>
<el-form-item class="option-button" style="right: 20px;" v-if="options.length>0">
<el-button type="primary" size="mini" @click="handleQuery">
查詢
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Search',
components: {},
props: {
options: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
},
data() {
return {
isActive: false,
searchText: '',
queryParams: {},
}
},
computed: {},
// watch: {
// options: {
// deep: true,
// handler(val) {
// this.getOptions(val)
// }
// },
// },
created() { },
mounted() { },
methods: {
getOptions(item) {
for (let i = 0; i < item.length; i++) {
let res = item[i]
this.queryParams[res.name] = res.value
}
},
cellStyleForm() {
if (this.$refs.queryForm) {
this.width = this.$refs.queryForm.$el.clientWidth
if (226 * (this.requiredParamList.length + 3) + 40 >= this.width) {
return 'mpc-section-zkaw'
} else {
return 'mpc-section'
}
} else {
return 'mpc-section'
}
},
handleQuery() {
console.log(this.queryParams)
this.$emit('up-Search', this.queryParams) //改變搜索字段的value
},
},
}
</script>
<style lang="scss" scoped>
.public-search {
display: inline-block;
overflow: hidden;
cursor: pointer;
border: 1px solid white;
}
::v-deep.isActive {
border: 1px solid red;
transition: all 0.3s ease-in-out;
}
.mpc-section {
background-color: #FFFFFF;
height: 40px;
margin-left: 0px !important;
margin-right: 0px !important;
display: flex;
align-items: center;
}
.mpc-section-zkaw {
background-color: #FFFFFF;
/* height: 62px; */
margin-left: 0px !important;
margin-right: 0px !important;
display: flex;
align-items: center;
}
.option-button {
position: absolute;
right: 10px;
}
</style>8、ZnPagination組件
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:style="{'text-align':algin}"
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { scrollTo } from './utils/scroll-to'
export default {
name: 'ZnPagination',
props: {
total: {
required: true,
type: Number,
},
page: {
type: Number,
default: 1,
},
limit: {
type: Number,
default: 10,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
},
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
background: {
type: Boolean,
default: true,
},
autoScroll: {
type: Boolean,
default: true,
},
hidden: {
type: Boolean,
default: false,
},
algin: {
type: String,
default: ()=>'center',
},
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
},
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
},
},
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
},
}
</script>
<style lang="scss" scoped>
.pagination-container {
background: #fff;
}
.pagination-container.hidden {
display: none;
}
</style>
9、ZnFilterTable組件
<template>
<div class="filter-table pt-10 pb-10">
<!-- 表格 -->
<el-table ref="table" :data="tableData" style="width: 100%;" border stripe @selection-change="handleSelectionChange" @row-click="toDeatils"
:header-cell-style="{'text-align':'center'}">
<el-table-column type="selection" width="55" align="center" v-if="multiple"></el-table-column>
<el-table-column v-for="(item, index) in finallyColumns" :key="item.id" :label="item.label" :align="item.type === 'number_range'?'right':item.type === 'select' || item.type === 'radio'?'center':'left'"
:prop="item.name" min-width="130" show-overflow-tooltip>
<!-- <template slot="header">
<type-popover :columnIndex="index" :column="item" :filterOptions="item.param" @tableUpdate="tableUpdate"></type-popover>
</template> -->
<template #default="{ row }">
<!-- 每一列涉及value值判斷顯示label ,以及狀態(tài)顏色 -->
<!-- <span v-if="item.extra.columnStyle == 'labelTags'" :class="item.extra.labelTags[row.type.value]">
{{ row.type.label }}
</span> -->
<span v-if="item.type === 'select' || item.type === 'radio'">
<el-tag>{{ typeFormat(row[item.name],item.param) }}</el-tag>
</span>
<span v-else>{{ row[item.name] }}</span>
</template>
</el-table-column>
<!-- 如有操作列 ↓-->
<el-table-column label="操作" align="center" width="150" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleSelect(scope.row)">詳情</el-button>
<el-button size="mini" type="text" @click="handleDelete(scope.row)" class="mpc_del">刪除</el-button>
<el-dropdown size="small" type="primary" trigger="hover" style="margin-left: 10px;">
<el-button size="mini" type="text">更多</el-button>
<el-dropdown-menu slot="dropdown">
<div v-for="item in buttons" :key="item.value">
<el-dropdown-item @click.native="handleUpdate(scope.row,item.value)" style="font-size: 12px;color: #1890FF;">{{item.label}}</el-dropdown-item>
</div>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import TypePopover from './TypePopover'
import ZnIcon from './ZnIcon'
export default {
name: 'ZnFilterTable',
components: { TypePopover, ZnIcon },
props: {
tableData: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
finallyColumns: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
multiple: {
type: Boolean, // table數(shù)據(jù)
default: () => false,
},
deatilsPath: {
type: String, // table數(shù)據(jù)
default: () => '',
},
buttons: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
},
data() {
return {
conditionList: [],
multipleSelection: [], //table多選數(shù)據(jù)
}
},
computed: {},
mounted() { },
methods: {
handleSelectionChange(val) {
this.multipleSelection = val
this.$emit('selectList', this.multipleSelection)
},
handleSelect(item) {
this.$emit('fetch-edit', item)
},
handleUpdate(item,value) {
this.$emit('fetch-update', item,value)
},
handleDelete(item) {
this.$emit('fetch-del', item)
},
// 自定義檢索(popover組件(data為對(duì)象)和tag組件(data為數(shù)組))發(fā)射出來(lái)的事件
tableUpdate(data) {
console.log(data)
let flag = true
// 篩選條件如果已經(jīng)存在，就更新,注意判別傳遞過(guò)來(lái)的數(shù)據(jù)類型
// arr.constructor === Array
if (this.conditionList.length === 0) {
this.conditionList.push(data) // 如果沒(méi)有就添加
flag = false
} else if (this.conditionList.length > 0) {
this.conditionList.forEach((item, index) => {
if (item.fieldName == data.fieldName) {
item.value = data.value
flag = false
}
})
}
if (flag) {
this.conditionList.push(data.fieldName) // 如果沒(méi)有就添加
}
this.$parent.fetchData(this.conditionList)
},
toDeatils(row) {
if (this.deatilsPath) {
this.$router.push({ path: this.deatilsPath, query: row.id })
} else {
this.$baseMessage(
'請(qǐng)配置所需要跳轉(zhuǎn)的路徑',
'warning',
'zn-hey-message-warning'
)
}
},
// 撥打電話
makeACall() {
},
//類型翻譯
typeFormat(item, params) {
return this.selectType(params, item);
},
// 回顯
selectType(datas, value) {
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
}
})
return actions.join('');
},
},
}
</script>
<style scoped lang='scss'>
.mpc_del {
color: red !important;
}
/* // 占位，解決點(diǎn)擊自己寫的自定義篩選 會(huì)冒泡到排序 */
::v-deep .el-table__column-filter-trigger {
display: none !important;
}
::v-deep.filter-table {
/* // table狀態(tài)標(biāo)簽顏色定義 */
[class*='table-status'] {
display: inline-block;
border-radius: 2px;
padding: 0px 12px;
}
/* // 藍(lán)色 */
[class*='table-status-blue'] {
background: #e6effb;
color: #005bd9;
}
/* // 棕色 */
[class*='table-status-brown'] {
background: #fff6ec;
color: #ffa336;
}
/* // 綠色 */
[class*='table-status-green'] {
background: #e8fff0;
color: #00b47e;
}
/* // 黃色 */
[class*='table-status-yellow'] {
background: #fffae8;
color: #f9c200;
}
/* // 粉色 */
[class*='table-status-pink'] {
background: #ffece8;
color: #f53f3f;
}
/* // 白色 */
[class*='table-status-white'] {
background: #f2f3f5;
color: #1d2129;
}
}
</style>10、TypePopover組件
<template>
<!-- 每個(gè)table表頭的popover -->
<!-- 注意：邏輯部分盡量不好寫到這個(gè)組件內(nèi)，因?yàn)檫@個(gè)組件是根據(jù)外面table循環(huán)創(chuàng)建的，在這里寫邏輯會(huì)非常影響性能 -->
<div class="customHeader" style="display: inline-block">
<el-popover
placement="bottom"
trigger="click"
:ref="`popover-${columnIndex}`"
>
<!-- table表頭文字顯示-->
<span slot="reference" class="label">
<zn-icon :icon="column.extra.icon" />
{{ column.label }}
<i class="el-icon-arrow-down"></i>
</span>
<!-- text 文本 -->
<div v-if="column.type == 'text'">
<el-input
clearable
v-model.trim="filterForm.value"
placeholder="請(qǐng)輸入查詢內(nèi)容"
@keyup.native.enter="confirm()"
></el-input>
</div>
<!-- number 數(shù)字框 -->
<div v-else-if="column.type == 'number'">
<el-input
clearable
oninput="value=value.replace(/[^0-9.]/g,'')"
v-model.trim="filterForm.value"
placeholder="請(qǐng)輸入數(shù)字"
@keyup.native.enter="confirm()"
></el-input>
</div>
<!-- number_range 數(shù)字范圍-->
<div v-else-if="column.type == 'number_range'">
<el-input
style="width: 120px"
clearable
oninput="value=value.replace(/[^0-9.]/g,'')"
v-model.trim="filterForm.value"
placeholder="請(qǐng)輸入數(shù)字"
></el-input>
-
<el-input
style="width: 120px"
clearable
oninput="value=value.replace(/[^0-9.]/g,'')"
v-model.trim="spareValue"
placeholder="請(qǐng)輸入數(shù)字"
></el-input>
</div>
<!-- date 單個(gè)日期-->
<div v-else-if="column.type == 'date'">
<el-date-picker
v-model="filterForm.value"
type="date"
clearable
placeholder="選擇日期"
value-format="yyyy-MM-dd"
/>
</div>
<!-- datetime 日期時(shí)間-->
<div v-else-if="column.type == 'datetime'">
<el-date-picker
v-model="filterForm.value"
type="datetime"
placeholder="選擇日期時(shí)間"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</div>
<!-- date_range 日期范圍-->
<div v-else-if="column.type == 'date_range'">
<el-date-picker
v-model="filterForm.value"
type="daterange"
range-separator="至"
start-placeholder="開(kāi)始日期"
end-placeholder="結(jié)束日期"
value-format="yyyy-MM-dd"
></el-date-picker>
</div>
<!-- datetime_range 日期時(shí)分秒范圍-->
<div v-else-if="column.type == 'datetime_range'">
<el-date-picker
v-model="filterForm.value"
clearable
type="datetimerange"
range-separator="至"
start-placeholder="開(kāi)始日期"
end-placeholder="結(jié)束日期"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</div>
<!-- select 下拉選擇-->
<div v-else-if="column.type == 'select'">
<el-select
v-model="filterForm.value"
placeholder="請(qǐng)選擇"
style="width: 100%"
clearable
>
<el-option
v-for="(item, index) in filterOptions"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<!-- radio 單選-->
<div v-else-if="column.type == 'radio'">
<el-radio-group v-model="filterForm.value">
<el-radio
v-for="(item, index) in filterOptions"
:key="index"
:label="item.value"
:value="item.value"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</div>
<!-- checkBox 多選-->
<div v-else-if="column.type == 'checkBox'">
<el-checkbox-group v-model="checkboxList">
<el-checkbox
v-for="(item, index) in filterOptions"
:key="index"
:label="item.value"
:value="item.value"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
<!-- confirm 確定框-->
<div style="text-align: right">
<el-button
@click="confirm()"
type="primary"
size="mini"
class="confirm"
>
確定
</el-button>
</div>
</el-popover>
</div>
</template>
<script>
import ZnIcon from './ZnIcon'
export default {
name: 'typePopover',
components: {
ZnIcon
},
// column 當(dāng)前列數(shù)據(jù)，filterOptions 多選/單選/下拉/數(shù)據(jù)
props: ['column', 'filterOptions', 'columnIndex'],
data() {
return {
filterForm: {
tagLabel: this.column.label, //篩選tag label(tag用)
tagValue: '', //篩選tag value(tag用)
value: '', //所篩選的數(shù)據(jù)(后端接收用)
fieldName: this.column.name, //當(dāng)前表頭字段(后端接收用)
},
spareValue: '', //備用Value popover里如是兩個(gè)值的話需要用此來(lái)拼接
checkboxList: [],
}
},
created() {},
methods: {
confirm() {
let minValue = this.filterForm.value //數(shù)值雙向綁定 做個(gè)閉環(huán)賦值
let type = this.column.type
// 跟后端商定 , 多個(gè)值存在時(shí)進(jìn)行判斷 , 以filterForm.value一個(gè)值為字符串的形式傳遞
// 根據(jù)需求做了處理
// checkBox和radio和select由于value值的原因需要處理
if (type == 'checkBox' || type == 'radio' || type == 'select') {
if (type == 'checkBox') {
this.filterForm.value = this.checkboxList.join(',')
}
if (this.column.param && this.column.param.length > 0) {
let str = ''
this.column.param.forEach((i, t) => {
if (type == 'checkBox' && i.value == Number(this.checkboxList[t])) {
str = str + i.label
}
if (type == 'radio' && i.value == Number(this.filterForm.value)) {
str = str + i.label
}
if (type == 'select' && i.value == Number(this.filterForm.value)) {
str = str + i.label
}
})
this.filterForm.tagValue = str
}
}
// 數(shù)字范圍
else if (type == 'number_range') {
this.filterForm.tagValue =
this.filterForm.value + ' - ' + this.spareValue
this.filterForm.value = this.filterForm.value + ',' + this.spareValue
} else if (this.filterForm.value == '' && !this.spareValue) {
return this.$message.warning('請(qǐng)輸入或選擇篩選條件')
} else {
this.filterForm.tagValue = this.filterForm.value //其他類型的賦值給tag用
}
this.$emit('tableUpdate', this.filterForm) //傳遞的是對(duì)象
this.filterForm.value = minValue //數(shù)值雙向綁定 做個(gè)閉環(huán)賦值 ,俗稱瞞天過(guò)海
this.$refs['popover-' + this.columnIndex].doClose() // 關(guān)閉popover
},
},
}
</script>
<style scoped>
.confirm {
margin-top: 10px;
}
/* 禁止雙擊選中文字 */
.label {
-moz-user-select: none; /*火狐*/
-webkit-user-select: none !important; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}
.labelColor {
color: #409eff;
}
.el-icon-arrow-down {
cursor: pointer;
}
.el-checkbox-group {
display: flex;
justify-content: flex-start;
flex-direction: column;
max-height: 150px;
overflow-y: auto;
}
</style>
11、ZnIcon組件
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon zn-icon"
v-on="$listeners"
/>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconClass" />
</svg>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
name: 'ZnSvgIcon',
props: {
iconName: {
type: String,
default: '',
required: true,
},
className: {
type: String,
default: '',
},
},
computed: {
isExternal() {
return isExternal(this.iconName)
},
iconClass() {
return `#icon-${this.iconName}`
},
svgClass() {
if (this.className) {
return 'zn-icon ' + this.className
} else {
return 'zn-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconName}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconName}) no-repeat 50% 50%`,
}
},
},
}
</script>
<style scoped>
.zn-icon {
width: 1rem;
height: 1rem;
fill: currentColor;
overflow: hidden;
font-size: 16px;
text-align: center;
vertical-align: -3px;
cursor: pointer;
margin-right: 5px;
}
/* .el-button .zn-icon {
width: 1rem;
height: 1rem;
vertical-align: -2.5px;
color: inherit;
} */
.zn-icon:hover path {
fill: var(--mainTone);
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
12、ZnForm組件
<template>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="medium">
<el-row>
<div v-for="item in options" :key="item.id">
<el-col :span="12" v-if="item.type === 'select'">
<el-form-item :label="item.label" :prop="item.name">
<el-select v-model="form[item.name]" :placeholder="'請(qǐng)選擇'+item.label" clearable filterable style="width: 100%" :disabled="disabled">
<el-option v-for="dict in item.param" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-else-if="item.type === 'radio'">
<el-form-item :label="item.label" :prop="item.name">
<el-radio-group v-model="form[item.name]" :disabled="disabled">
<el-radio v-for="dict in item.param" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<!-- date 單個(gè)日期-->
<el-col :span="12" v-else-if="item.type == 'date' || item.type == 'date_range'">
<el-form-item :label="item.label" :prop="item.name">
<el-date-picker v-model="form[item.name]" type="date" placeholder="選擇日期" value-format="yyyy-MM-dd" style="width: 100%" :disabled="disabled" />
</el-form-item>
</el-col>
<!-- datetime 日期時(shí)間-->
<el-col :span="12" v-else-if="item.type == 'datetime' || item.type == 'datetime_range'">
<el-form-item :label="item.label" :prop="item.name">
<el-date-picker v-model="form[item.name]" type="datetime" placeholder="選擇日期時(shí)間" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" :disabled="disabled"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" v-else-if="item.type == 'number_range'">
<el-form-item :label="item.label" :prop="item.name">
<el-input v-model.number="form[item.name]" clearable :placeholder="'請(qǐng)輸入'+item.label" :disabled="disabled"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" v-else>
<el-form-item :label="item.label" :prop="item.name">
<el-input v-model="form[item.name]" clearable :placeholder="'請(qǐng)輸入'+item.label" :disabled="disabled"></el-input>
</el-form-item>
</el-col>
</div>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit" v-preventReClick="2000" v-if="!disabled">保 存</el-button>
<el-button @click="cancel">{{buttonName}}</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'ZnForm',
components: {},
props: {
options: {
type: Array, // table數(shù)據(jù)
default: () => [],
},
disabled:{
type: Boolean,
default: () => false
},
resForm:{
type: Object,
default: () => {}
}
},
watch: {
options: {
immediate: true,
handler(val) {
this.getOptions(val)
}
},
resForm: {
immediate: true,
handler(val) {
this.setValue(val)
}
},
disabled: {
immediate: true,
handler(val) {
this.setButtonName(val)
}
},
},
data() {
return {
buttonName:'取 消',
rules: {},
form: {},
//主鍵暫存
id:undefined,
ruleParam: [
{ required: true, message: "不能為空", trigger: "blur" },
],
}
},
created() {
},
mounted() {
},
methods: {
//設(shè)置按鈕名稱
setButtonName(item){
if(item){
this.buttonName = '關(guān) 閉'
}else{
this.buttonName = '取 消'
}
},
//form賦值
setValue(item){
this.form = item
if(item.id !== undefined){
this.id = item.id
}
},
//表單校驗(yàn)
getOptions(item) {
let ruleMap = new Map()
for (var i in item) {
if (item[i].isValidate === true) {
this.ruleParam[0].message = item[i].label + "不能為空"
ruleMap.set(item[i].name, this.ruleParam)
this.ruleParam = [
{ required: true, message: "不能為空", trigger: "blur" },
]
}
}
//map轉(zhuǎn)對(duì)象
this.rules = Object.fromEntries(ruleMap.entries())
},
// 取消按鈕
cancel() {
this.$emit('dialog-cancel', this.form)
this.form = {};
},
/** 提交按鈕 */
submit: function () {
this.form.id = this.id;
this.$refs["form"].validate(valid => {
if (valid) {
this.$emit('dialog-submit', this.form)
this.form = {};
}
});
},
}
}
</script>
<style lang="scss" scoped>
</style>13、utils
13.1、encrypt.js
import JSEncrypt from 'jsencrypt'
import { getPublicKey } from '@/api/publicKey'
const privateKey =
'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAMFPa+v52FkSUXvcUnrGI/XzW3EpZRI0s9BCWJ3oNQmEYA5luWW5p8h0uadTIoTyYweFPdH4hveyxlwmS7oefvbIdiP+o+QIYW/R4Wjsb4Yl8MhR4PJqUE3RCy6IT9fM8ckG4kN9ECs6Ja8fQFc6/mSl5dJczzJO3k1rWMBhKJD/AgMBAAECgYEAucMakH9dWeryhrYoRHcXo4giPVJsH9ypVt4KzmOQY/7jV7KFQK3x//27UoHfUCak51sxFw9ek7UmTPM4HjikA9LkYeE7S381b4QRvFuf3L6IbMP3ywJnJ8pPr2l5SqQ00W+oKv+w/VmEsyUHr+k4Z+4ik+FheTkVWp566WbqFsECQQDjYaMcaKw3j2Zecl8T6eUe7fdaRMIzp/gcpPMfT/9rDzIQk+7ORvm1NI9AUmFv/FAlfpuAMrdL2n7p9uznWb7RAkEA2aP934kbXg5bdV0R313MrL+7WTK/qdcYxATUbMsMuWWQBoS5irrt80WCZbG48hpocJavLNjbtrjmUX3CuJBmzwJAOJg8uP10n/+ZQzjEYXh+BszEHDuw+pp8LuT/fnOy5zrJA0dO0RjpXijO3vuiNPVgHXT9z1LQPJkNrb5ACPVVgQJBALPeb4uV0bNrJDUb5RB4ghZnIxv18CcaqNIft7vuGCcFBAIPIRTBprR+RuVq+xHDt3sNXdsvom4h49+Hky1b0ksCQBBwUtVaqH6ztCtwUF1j2c/Zcrt5P/uN7IHAd44K0gIJc1+Csr3qPG+G2yoqRM8KVqLI8Z2ZYn9c+AvEE+L9OQY='
/**
* 最長(zhǎng)加密長(zhǎng)度
* @type {number}
*/
const MAX_ENCRYPT_BLOCK = 117
/**
* 最長(zhǎng)解碼長(zhǎng)度
* @type {number}
*/
const MAX_DECRYPT_BLOCK = 128
/**
* @description RSA加密(支持長(zhǎng)字符加密)
* @param data
* @returns {Promise<{param: PromiseLike<ArrayBuffer>}|*>}
*/
export async function encryptedData(data) {
let publicKey
const res = await getPublicKey()
publicKey = res.data.publicKey
if (res.data.mockServer) {
publicKey = ''
}
if (publicKey === '') {
return data
}
const encrypt = new JSEncrypt()
encrypt.setPublicKey(
`-----BEGIN PUBLIC KEY-----${publicKey}-----END PUBLIC KEY-----`
)
let bufTmp = ''
let hexTmp = ''
let result = ''
const buffer = Buffer.from(JSON.stringify(data))
let offSet = 0
const inputLen = buffer.length
while (inputLen - offSet > 0) {
if (inputLen - offSet > MAX_ENCRYPT_BLOCK) {
bufTmp = buffer.slice(offSet, offSet + MAX_ENCRYPT_BLOCK)
} else {
bufTmp = buffer.slice(offSet, inputLen)
}
hexTmp = encrypt.encrypt(bufTmp.toString())
result += atob(hexTmp)
offSet += MAX_ENCRYPT_BLOCK
}
return btoa(result)
}
/**
* @description RSA解密(支持長(zhǎng)字符解密)
* @param data
* @returns {PromiseLike<ArrayBuffer>}
*/
export function decryptedData(data) {
const decrypt = new JSEncrypt()
decrypt.setPrivateKey(
`-----BEGIN RSA PRIVATE KEY-----${privateKey}-----END RSA PRIVATE KEY-----`
)
let bufTmp = ''
let hexTmp = ''
let result = ''
const buffer = atob(data)
let offSet = 0
const inputLen = buffer.length
while (inputLen - offSet > 0) {
if (inputLen - offSet > MAX_DECRYPT_BLOCK) {
bufTmp = buffer.slice(offSet, offSet + MAX_DECRYPT_BLOCK)
} else {
bufTmp = buffer.slice(offSet, inputLen)
}
hexTmp = decrypt.decrypt(btoa(bufTmp))
result += hexTmp
offSet += MAX_DECRYPT_BLOCK
}
return JSON.parse(result)
}
13.2、index.js
/**
* @description 格式化時(shí)間
* @param time
* @param cFormat
* @returns {string|null}
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-n5n3t3z {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay(),
}
return format.replace(/{([ymdhisa])+}/g, (result, key) => {
let value = formatObj[key]
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
}
/**
* @description 格式化時(shí)間
* @param time
* @param option
* @returns {string}
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '剛剛'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分鐘前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小時(shí)前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'時(shí)' +
d.getMinutes() +
'分'
)
}
}
/**
* @description 將url請(qǐng)求參數(shù)轉(zhuǎn)為json格式
* @param url
* @returns {{}|any}
*/
export function paramObj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ') +
'"}'
)
}
/**
* @description 父子關(guān)系的數(shù)組轉(zhuǎn)換成樹形結(jié)構(gòu)數(shù)據(jù)
* @param data
* @returns {*}
*/
export function translateDataToTree(data) {
const parent = data.filter(
(value) => value.parentId === 'undefined' || value.parentId === null
)
const children = data.filter(
(value) => value.parentId !== 'undefined' && value.parentId !== null
)
const translator = (parent, children) => {
parent.forEach((parent) => {
children.forEach((current, index) => {
if (current.parentId === parent.id) {
const temp = JSON.parse(JSON.stringify(children))
temp.splice(index, 1)
translator([current], temp)
typeof parent.children !== 'undefined' ?
parent.children.push(current) :
(parent.children = [current])
}
})
})
}
translator(parent, children)
return parent
}
/**
* @description 樹形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換成父子關(guān)系的數(shù)組
* @param data
* @returns {[]}
*/
export function translateTreeToData(data) {
const result = []
data.forEach((item) => {
const loop = (data) => {
result.push({
id: data.id,
name: data.name,
parentId: data.parentId,
})
const child = data.children
if (child) {
for (let i = 0; i < child.length; i++) {
loop(child[i])
}
}
}
loop(item)
})
return result
}
/**
* @description 10位時(shí)間戳轉(zhuǎn)換年月日時(shí)分秒
* @param time
* @returns {string}
*/
export function tenBitTimestamp(time) {
const date = new Date(time * 1000)
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? '' + m : m
let d = date.getDate()
d = d < 10 ? '' + d : d
let h = date.getHours()
h = h < 10 ? '0' + h : h
let minute = date.getMinutes()
let second = date.getSeconds()
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second //組合
}
/**
* @description 10位時(shí)間戳轉(zhuǎn)換時(shí)分秒
* @param time
* @returns {string}
*/
export function tenBitTimestampHms(time) {
const date = new Date(time * 1000)
let h = date.getHours()
h = h < 10 ? '0' + h : h
let minute = date.getMinutes()
let second = date.getSeconds()
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
return h + ':' + minute + ':' + second //組合
}
/**
* @description 13位時(shí)間戳轉(zhuǎn)換
* @param time
* @returns {string}
*/
export function thirteenBitTimestamp(time) {
const date = new Date(time / 1)
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? '' + m : m
let d = date.getDate()
d = d < 10 ? '' + d : d
let h = date.getHours()
h = h < 10 ? '0' + h : h
let minute = date.getMinutes()
let second = date.getSeconds()
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second //組合
}
/**
* @description 獲取隨機(jī)id
* @param length
* @returns {string}
*/
export function uuid(length = 32) {
const num = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
let str = ''
for (let i = 0; i < length; i++) {
str += num.charAt(Math.floor(Math.random() * num.length))
}
return str
}
/**
* @description m到n的隨機(jī)數(shù)
* @param m
* @param n
* @returns {number}
*/
export function random(m, n) {
return Math.floor(Math.random() * (m - n) + n)
}
/**
* @description addEventListener
* @type {function(...[*]=)}
*/
export const on = (function () {
return function (element, event, handler, useCapture = false) {
if (element && event && handler) {
element.addEventListener(event, handler, useCapture)
}
}
})()
/**
* @description removeEventListener
* @type {function(...[*]=)}
*/
export const off = (function () {
return function (element, event, handler, useCapture = false) {
if (element && event) {
element.removeEventListener(event, handler, useCapture)
}
}
})()
/**
* @description 數(shù)組打亂
* @param array
* @returns {*}
*/
export function shuffle(array) {
let m = array.length,
t,
i
while (m) {
i = Math.floor(Math.random() * m--)
t = array[m]
array[m] = array[i]
array[i] = t
}
return array
}
/**
* @description ele表格序號(hào)
* @param number
* @returns {string}
*/
export function indexMethod(index) {
return index + 1;
}
/**
* @description 獲取當(dāng)前時(shí)間并打印
* @param null
* @returns {string}
*/
export function getCurrentTime() {
var _this = this
let yy = new Date().getFullYear()
let mm = new Date().getMonth() + 1
let dd = new Date().getDate()
let hh = new Date().getHours()
let mf =
new Date().getMinutes() < 10 ?
'0' + new Date().getMinutes() :
new Date().getMinutes()
let ss =
new Date().getSeconds() < 10 ?
'0' + new Date().getSeconds() :
new Date().getSeconds()
return (_this.gettime =
yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss)
}
/**
* @description 數(shù)組里對(duì)象根據(jù)某個(gè)值(包含姓名、字母、數(shù)字)排序
* @param null
* @returns {array}
*/
export function compare(data) {
let chineseChars = [],
chars = [],
list = [];
data.forEach(item => {
// 判斷是否為中文
if (/^[\u4e00-\u9fa5]*$/.test(item.nickname.charAt(0))) {
chineseChars.push(item); // 姓名首字符為中文的
} else {
chars.push(item); // 姓名首字符非中文的（字母，數(shù)字）
}
});
chars.sort((a, b) => a.nickname.charCodeAt(0) - b.nickname.charCodeAt(0));
chineseChars.sort((a, b) => a.nickname.localeCompare(b.nickname));
list = chars.concat(chineseChars); // list為最終想要的數(shù)組
return list
}
13.3、preventReClick.js
// 防止多次點(diǎn)擊，重復(fù)請(qǐng)求
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
});
export default{ preventReClick }13.4、scroll-to.js
Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2
if (t < 1) {
return c / 2 * t * t + b
}
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()
/**
* Because it's so fucking difficult to detect the scrolling element, just move them all
* @param {number} amount
*/
function move(amount) {
document.documentElement.scrollTop = amount
document.body.parentNode.scrollTop = amount
document.body.scrollTop = amount
}
function position() {
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}
/**
* @param {number} to
* @param {number} duration
* @param {Function} callback
*/
export function scrollTo(to, duration, callback) {
const start = position()
const change = to - start
const increment = 20
let currentTime = 0
duration = (typeof (duration) === 'undefined') ? 500 : duration
var animateScroll = function() {
// increment the time
currentTime += increment
// find the value with the quadratic in-out easing function
var val = Math.easeInOutQuad(currentTime, start, change, duration)
// move the document.body
move(val)
// do the animation unless its over
if (currentTime < duration) {
requestAnimFrame(animateScroll)
} else {
if (callback && typeof (callback) === 'function') {
// the animation is done so lets callback
callback()
}
}
}
animateScroll()
}
13.5、validate.js
/**
* @description 判讀是否為外鏈
* @param path
* @returns {boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:|\/\/)/.test(path)
}
/**
* @description 校驗(yàn)密碼是否小于6位
* @param value
* @returns {boolean}
*/
export function isPassword(value) {
return value.length >= 6
}
/**
* @description 判斷是否為數(shù)字
* @param value
* @returns {boolean}
*/
export function isNumber(value) {
const reg = /^[0-9]*$/
return reg.test(value)
}
/**
* @description 判斷是否是名稱
* @param value
* @returns {boolean}
*/
export function isName(value) {
const reg = /^[\u4e00-\u9fa5]+$/
return reg.test(value)
}
/**
* @description 判斷是否為IP
* @param ip
* @returns {boolean}
*/
export function isIP(ip) {
const reg =
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
return reg.test(ip)
}
/**
* @description 判斷是否是傳統(tǒng)網(wǎng)站
* @param url
* @returns {boolean}
*/
export function isUrl(url) {
const reg =
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @description 判斷是否是小寫字母
* @param value
* @returns {boolean}
*/
export function isLowerCase(value) {
const reg = /^[a-z]+$/
return reg.test(value)
}
/**
* @description 判斷是否是大寫字母
* @param value
* @returns {boolean}
*/
export function isUpperCase(value) {
const reg = /^[A-Z]+$/
return reg.test(value)
}
/**
* @description 判斷是否是大寫字母開(kāi)頭
* @param value
* @returns {boolean}
*/
export function isAlphabets(value) {
const reg = /^[A-Za-z]+$/
return reg.test(value)
}
/**
* @description 判斷是否是字符串
* @param value
* @returns {boolean}
*/
export function isString(value) {
return typeof value === 'string' || value instanceof String
}
/**
* @description 判斷是否是數(shù)組
* @param arg
*/
export function isArray(arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
/**
* @description 判斷是否是端口號(hào)
* @param value
* @returns {boolean}
*/
export function isPort(value) {
const reg =
/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
return reg.test(value)
}
/**
* @description 判斷是否是手機(jī)號(hào)
* @param value
* @returns {boolean}
*/
export function isPhone(value) {
const reg = /^1\d{10}$/
return reg.test(value)
}
/**
* @description 判斷是否是身份證號(hào)(第二代)
* @param value
* @returns {boolean}
*/
export function isIdCard(value) {
const reg =
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
return reg.test(value)
}
/**
* @description 判斷是否是郵箱
* @param value
* @returns {boolean}
*/
export function isEmail(value) {
const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
return reg.test(value)
}
/**
* @description 判斷是否中文
* @param value
* @returns {boolean}
*/
export function isChina(value) {
const reg = /^[\u4E00-\u9FA5]{0,30}$/
return reg.test(value)
}
/**
* @description 判斷是否為空
* @param value
* @returns {boolean}
*/
export function isBlank(value) {
return (
value === null ||
false ||
value === '' ||
value.trim() === '' ||
value.toLocaleLowerCase().trim() === 'null'
)
}
/**
* @description 判斷是否為固話
* @param value
* @returns {boolean}
*/
export function isTel(value) {
const reg =
/^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 轉(zhuǎn)])*([0-9]{1,4}))?$/
return reg.test(value)
}
/**
* @description 判斷是否為數(shù)字且最多兩位小數(shù)
* @param value
* @returns {boolean}
*/
export function isNum(value) {
const reg = /^\d+(\.\d{1,2})?$/
return reg.test(value)
}
/**
* @description 判斷是否為json
* @param value
* @returns {boolean}
*/
export function isJson(value) {
if (typeof value === 'string') {
const obj = JSON.parse(value)
return !!(typeof obj === 'object' && obj)
}
return false
}
14、資源地址
https://download.csdn.net/download/askuld/88216937文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-792380.html
到了這里，關(guān)于VUE element-ui實(shí)現(xiàn)表格動(dòng)態(tài)展示、動(dòng)態(tài)刪減列、動(dòng)態(tài)排序、動(dòng)態(tài)搜索條件配置、表單組件化。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
