zq
3 months ago
17 changed files with 1450 additions and 718 deletions
File diff suppressed because it is too large
@ -0,0 +1,7 @@ |
|||
import GuipFormItem from './src/index.vue' |
|||
|
|||
GuipFormItem.install = function(Vue) { |
|||
Vue.component(GuipFormItem.name || 'GuipFormItem', GuipFormItem) |
|||
} |
|||
|
|||
export default GuipFormItem |
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<div |
|||
:class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item1']"> |
|||
<div class="form-item-top"> |
|||
<label v-if="label" for="">{{ label }} |
|||
<img src="../../assets/require.svg" v-if="required" alt=""> |
|||
</label> |
|||
<template > |
|||
<slot name="formLeft"></slot> |
|||
</template> |
|||
<template > |
|||
<slot name="formRight"></slot> |
|||
</template> |
|||
</div> |
|||
<div class="form-item-bottom"> |
|||
<template > |
|||
<slot name="formDom"></slot> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'GuipFormItem', |
|||
props:['label','required','addClass','column'], |
|||
data() { |
|||
return { |
|||
hasError: false, |
|||
// 目前这两个宽度用的最多，其余宽度自定义类名修改吧 |
|||
classList:{ |
|||
'w510':'w510', |
|||
'w388':'w388' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// dynamicClasses() { |
|||
// return { |
|||
// active: this.isActive, // 如果isActive为true，则添加'active'类 |
|||
// error: this.hasError, // 如果hasError为true，则添加'error'类 |
|||
// highlighted: this.isHighlighted, // 如果isHighlighted为true，则添加'highlighted'类 |
|||
// }; |
|||
// } |
|||
}, |
|||
mounted(){ |
|||
// console.log(this.required,'required----'); |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<transition name="fade"> |
|||
<div v-if="visible" class="custom-message" :class="[type, position]"> |
|||
<img v-if="showImage" :src="imageUrl" class="message-image" /> |
|||
<i v-else :class="iconClass"></i> |
|||
<span class="message-content">{{ message }}</span> |
|||
</div> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CustomMessage', |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: 'info', |
|||
validator: value => ['success', 'warning', 'error', 'info'].includes(value) |
|||
}, |
|||
message: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
duration: { |
|||
type: Number, |
|||
default: 3000 |
|||
}, |
|||
position: { |
|||
type: String, |
|||
default: 'top-center', |
|||
validator: value => ['top-center', 'top-right', 'top-left', 'bottom-center', 'bottom-right', 'bottom-left'].includes(value) |
|||
}, |
|||
showImage: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
imageUrl: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
iconClass: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.visible = true |
|||
this.startTimer() |
|||
}, |
|||
methods: { |
|||
startTimer() { |
|||
if (this.duration > 0) { |
|||
setTimeout(() => { |
|||
this.close() |
|||
}, this.duration) |
|||
} |
|||
}, |
|||
close() { |
|||
this.visible = false |
|||
setTimeout(() => { |
|||
this.$destroy() |
|||
this.$el.parentNode.removeChild(this.$el) |
|||
}, 300) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.custom-message { |
|||
position: fixed; |
|||
z-index: 9999; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 14px 21px; |
|||
transition: all 0.3s; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
border-radius: 4px; |
|||
background: #FFFFFF; |
|||
/* 阴影/低阴影 */ |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16); |
|||
} |
|||
|
|||
/* 位置样式 */ |
|||
.top-center { |
|||
top: 20px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
.top-right { |
|||
top: 20px; |
|||
right: 20px; |
|||
} |
|||
.top-left { |
|||
top: 20px; |
|||
left: 20px; |
|||
} |
|||
.bottom-center { |
|||
bottom: 20px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
.bottom-right { |
|||
bottom: 20px; |
|||
right: 20px; |
|||
} |
|||
.bottom-left { |
|||
bottom: 20px; |
|||
left: 20px; |
|||
} |
|||
|
|||
/* 类型样式 */ |
|||
/* .success { |
|||
background-color: #f6ffed; |
|||
border: 1px solid #b7eb8f; |
|||
color: #52c41a; |
|||
} |
|||
.info { |
|||
background-color: #e6f7ff; |
|||
border: 1px solid #91d5ff; |
|||
color: #1890ff; |
|||
} |
|||
.warning { |
|||
background-color: #fffbe6; |
|||
border: 1px solid #ffe58f; |
|||
color: #faad14; |
|||
} |
|||
.error { |
|||
background-color: #fff2f0; |
|||
border: 1px solid #ffccc7; |
|||
color: #f5222d; |
|||
} */ |
|||
|
|||
.message-image { |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
.fade-enter-active, .fade-leave-active { |
|||
transition: opacity 0.3s, transform 0.3s; |
|||
} |
|||
.fade-enter, .fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
.fade-enter.top-center, .fade-leave-to.top-center { |
|||
transform: translate(-50%, -20px); |
|||
} |
|||
.fade-enter.top-right, .fade-leave-to.top-right, |
|||
.fade-enter.top-left, .fade-leave-to.top-left { |
|||
transform: translateY(-20px); |
|||
} |
|||
.fade-enter.bottom-center, .fade-leave-to.bottom-center { |
|||
transform: translate(-50%, 20px); |
|||
} |
|||
.fade-enter.bottom-right, .fade-leave-to.bottom-right, |
|||
.fade-enter.bottom-left, .fade-leave-to.bottom-left { |
|||
transform: translateY(20px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,94 @@ |
|||
import Vue from 'vue' |
|||
import GuipMessage from './GuipMessage.vue' |
|||
|
|||
// 默认图标配置
|
|||
const defaultIcons = { |
|||
success: 'icon-success', // 替换为你的图标类名
|
|||
info: 'icon-info', |
|||
warning: 'icon-warning', |
|||
error: 'icon-error' |
|||
} |
|||
|
|||
// 默认图片配置
|
|||
const defaultImages = { |
|||
success: require('../assets/message_Success.png'), |
|||
info: require('../assets/message_Warning.png'), |
|||
warning: require('../assets/message_Warning.png'), |
|||
error: require('../assets/message_error.png') |
|||
} |
|||
const MessageConstructor = Vue.extend(GuipMessage) |
|||
|
|||
// let messageInstance = null
|
|||
let messageQueue = [] |
|||
|
|||
function showMessage(options) { |
|||
if (typeof options === 'string') { |
|||
options = { |
|||
message: options |
|||
} |
|||
} |
|||
|
|||
// 合并默认配置
|
|||
const config = { |
|||
type: 'info', |
|||
duration: 3000, |
|||
position: 'top-center', |
|||
showImage: true, |
|||
...options |
|||
} |
|||
|
|||
// 设置图标或图片
|
|||
if (config.showImage) { |
|||
config.imageUrl = options.imageUrl || defaultImages[config.type] |
|||
} else { |
|||
config.iconClass = options.iconClass || defaultIcons[config.type] |
|||
} |
|||
|
|||
// 创建实例
|
|||
const instance = new MessageConstructor({ |
|||
propsData: config |
|||
}) |
|||
|
|||
// 挂载到DOM
|
|||
instance.$mount() |
|||
document.body.appendChild(instance.$el) |
|||
|
|||
// 添加到队列
|
|||
messageQueue.push(instance) |
|||
|
|||
// 返回关闭方法
|
|||
return { |
|||
close: () => instance.close() |
|||
} |
|||
} |
|||
|
|||
function install(Vue, options = {}) { |
|||
// 合并默认配置
|
|||
if (options.icons) { |
|||
Object.assign(defaultIcons, options.icons) |
|||
} |
|||
if (options.images) { |
|||
Object.assign(defaultImages, options.images) |
|||
} |
|||
|
|||
// 添加全局方法
|
|||
Vue.prototype.$Message = showMessage |
|||
Vue.prototype.$Message.closeAll = () => { |
|||
messageQueue.forEach(instance => instance.close()) |
|||
messageQueue = [] |
|||
} |
|||
|
|||
// 添加快捷方法
|
|||
const types = ['success', 'info', 'warning', 'error'] |
|||
types.forEach(type => { |
|||
Vue.prototype.$Message[type] = (message, options = {}) => { |
|||
return showMessage({ |
|||
message, |
|||
type, |
|||
...options |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
export default { install } |
|||
|
Before Width: | Height: | Size: 673 B After Width: | Height: | Size: 297 B |
|
After Width: | Height: | Size: 802 B |
|
After Width: | Height: | Size: 654 B |
|
After Width: | Height: | Size: 746 B |
@ -0,0 +1,77 @@ |
|||
/** |
|||
* 复制文本到剪贴板 |
|||
* @param {string} text 要复制的文本 |
|||
* @param {Object} options 配置选项 |
|||
* @param {string} options.successMsg 成功提示信息 |
|||
* @param {string} options.errorMsg 失败提示信息 |
|||
* @param {Vue} options.vm Vue实例(用于调用$Message) |
|||
* @returns {Promise<boolean>} 是否复制成功 |
|||
*/ |
|||
export function copyToClipboard(text, options = {}) { |
|||
const { |
|||
successMsg = '复制成功', |
|||
errorMsg = '复制失败，请手动复制', |
|||
vm = null |
|||
} = options; |
|||
|
|||
return new Promise((resolve) => { |
|||
// 创建textarea元素
|
|||
const textarea = document.createElement('textarea'); |
|||
textarea.value = text; |
|||
textarea.style.position = 'fixed'; // 防止页面滚动
|
|||
document.body.appendChild(textarea); |
|||
textarea.select(); |
|||
|
|||
try { |
|||
// 执行复制命令
|
|||
const successful = document.execCommand('copy'); |
|||
console.log(vm,'vm.$Message---'); |
|||
if (successful) { |
|||
if (vm && vm.$Message) { |
|||
vm.$Message.success(successMsg); |
|||
} else { |
|||
console.log(successMsg); |
|||
} |
|||
resolve(true); |
|||
} else { |
|||
throw new Error('Copy command was unsuccessful'); |
|||
} |
|||
} catch (err) { |
|||
console.error('复制失败11:', err); |
|||
if (vm && vm.$Message) { |
|||
vm.$Message.error(errorMsg); |
|||
} else { |
|||
console.error(errorMsg); |
|||
} |
|||
resolve(false); |
|||
} finally { |
|||
document.body.removeChild(textarea); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @param {string} text 要复制的文本 |
|||
* @param {Object} options 配置选项 |
|||
* @returns {Promise<boolean>} 是否复制成功 |
|||
*/ |
|||
export async function modernCopyToClipboard(text, options = {}) { |
|||
const { |
|||
successMsg = '复制成功', |
|||
errorMsg = '复制失败，请手动复制', |
|||
vm = null |
|||
} = options; |
|||
if (navigator.clipboard && window.isSecureContext) { |
|||
// 注意：localhost 可能会无效 或者 提示复制失败，但是其实已经复制到粘贴板
|
|||
await navigator.clipboard.writeText(text); |
|||
if (vm && vm.$Message) { |
|||
vm.$Message.success(successMsg); |
|||
} else { |
|||
console.log(errorMsg); |
|||
} |
|||
} else { |
|||
return copyToClipboard(text, options); |
|||
} |
|||
} |
|||
|
|||
export default modernCopyToClipboard; |
|||
@ -0,0 +1,32 @@ |
|||
// 设置页面元素对应高亮
|
|||
export function setHighActive(dom) { |
|||
const ele = document.getElementById(dom) |
|||
ele.classList.add('ceshi') |
|||
ele.scrollIntoView({behavior:'smooth',block:'start'}) |
|||
setTimeout(()=>{ |
|||
ele.classList.remove('ceshi') |
|||
},1000) |
|||
} |
|||
|
|||
export function getServicePriceDesc(price, price_unit, unit_num) { |
|||
let unit = 0; |
|||
let unit_str = ""; |
|||
|
|||
if (unit_num == 1) return price + price_unit +'/篇'; |
|||
|
|||
if (unit_num/10000 < 10) { |
|||
unit = Math.ceil(unit_num/10000); |
|||
unit_str = unit == 1 ? '万' : unit+'万'; |
|||
} |
|||
if (unit_num/1000 < 10) { |
|||
unit = Math.ceil(unit_num/1000); |
|||
unit_str = unit == 1 ? '千' : unit+'千'; |
|||
} |
|||
if (unit_num/100 < 10) { |
|||
unit = Math.ceil(unit_num/100); |
|||
unit_str = unit == 1 ? '百' : unit+'百'; |
|||
} |
|||
|
|||
return price + price_unit + "/" +unit_str + "字符"; |
|||
} |
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import modernCopyToClipboard from './clipboard'; |
|||
|
|||
export default { |
|||
install(Vue) { |
|||
Vue.directive('clipboard', { |
|||
bind(el, binding) { |
|||
el.style.cursor = 'pointer'; |
|||
el.addEventListener('click', async () => { |
|||
const text = binding.value || el.innerText; |
|||
const options = { |
|||
vm: binding.instance, |
|||
...(binding.arg || {}) |
|||
}; |
|||
await modernCopyToClipboard(text, options); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
@ -0,0 +1,11 @@ |
|||
import Vue from 'vue' |
|||
// 创建全局事件总线
|
|||
const EventBus = new Vue() |
|||
|
|||
// 封装常用方法
|
|||
export const $on = EventBus.$on.bind(EventBus) |
|||
export const $once = EventBus.$once.bind(EventBus) |
|||
export const $off = EventBus.$off.bind(EventBus) |
|||
export const $emit = EventBus.$emit.bind(EventBus) |
|||
|
|||
export default EventBus |
|||
@ -0,0 +1,17 @@ |
|||
export default { |
|||
methods: { |
|||
renderHeaderWithIcon(h, { column }, iconPath) { |
|||
return h('div', [ |
|||
column.label, |
|||
h('img', { |
|||
attrs: { src: iconPath }, |
|||
style: { |
|||
width: '10px', |
|||
height: '10px', |
|||
marginLeft: '3px', |
|||
} |
|||
}) |
|||
]) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
// src/utils/request.js
|
|||
import axios from "axios"; |
|||
|
|||
// 创建 axios 实例
|
|||
const service = axios.create({ |
|||
baseURL: process.env.VUE_APP_BASE_API, // 从环境变量中读取 API 基础地址
|
|||
timeout: 60000, // 请求超时时间
|
|||
headers: { |
|||
'Content-Type': 'application/x-www-form-urlencoded' |
|||
}, |
|||
}); |
|||
|
|||
// 请求拦截器
|
|||
service.interceptors.request.use( |
|||
(config) => { |
|||
// 在发送请求之前做一些处理，例如添加 token
|
|||
const token = localStorage.getItem("token"); |
|||
if (token) { |
|||
config.headers["Auth"] = `${token}`; |
|||
} |
|||
return config; |
|||
}, |
|||
(error) => { |
|||
// 对请求错误做些什么
|
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
|||
// 响应拦截器
|
|||
service.interceptors.response.use( |
|||
(response) => { |
|||
// 对响应数据做一些处理
|
|||
const res = response.data; |
|||
if (!res.status) { |
|||
// 如果返回的 status 不是 true，则视为错误
|
|||
// return Promise.reject(new Error(res.info || "请求失败"));
|
|||
} |
|||
return res; |
|||
}, |
|||
(error) => { |
|||
// 对响应错误做些什么
|
|||
if (error.response) { |
|||
switch (error.response.status) { |
|||
case 401: |
|||
// 未授权，跳转到登录页
|
|||
window.location.href = "/login"; |
|||
break; |
|||
case 404: |
|||
// 资源未找到
|
|||
console.error("资源未找到"); |
|||
break; |
|||
case 500: |
|||
// 服务器错误
|
|||
console.error("服务器错误"); |
|||
break; |
|||
default: |
|||
console.error("请求失败", error.message); |
|||
} |
|||
} |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
|||
/** |
|||
* 封装请求方法 |
|||
* @param {string} method 请求方法 (GET, POST, PUT, DELETE 等) |
|||
* @param {string} url 请求地址 |
|||
* @param {object} data 请求参数 |
|||
* @param {object} config 其他 axios 配置 |
|||
* @returns {Promise} 返回请求结果 |
|||
*/ |
|||
const request = (method, url, data = {}, config = {}) => { |
|||
const lowerCaseMethod = method.toLowerCase(); |
|||
if (lowerCaseMethod === "get") { |
|||
// GET 请求将参数拼接到 URL 上
|
|||
return service({ |
|||
method: "get", |
|||
url, |
|||
params: data, |
|||
...config, |
|||
}); |
|||
} else { |
|||
// 其他请求（POST, PUT, DELETE 等）将参数放在请求体中
|
|||
return service({ |
|||
method: lowerCaseMethod, |
|||
url, |
|||
data, |
|||
...config, |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
export default request; |
|||
Loading…
Reference in new issue