java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

按钮禁止快速重复点击,优化代码结构

fix_bug_pro20231227
13208366016 1 year ago
parent
340f29dc45
commit
198ef098ec
4 changed files with 438 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/components/edittablehead/index.vue
  2. 472
      src/views/basic/pda/basicPdaTTTTT.vue
  3. 13
      src/views/distribution/turndelivery/deliveryDiscuss.vue
  4. 4
      vite.config.js

22
src/components/edittablehead/index.vue
Unescape View File

@ -124,15 +124,15 @@ const flexList = ref<(string | number)[]>([]);
const sortlist = ref<(string | number)[]>([]);
if (functions.getStorage(window.location.pathname + 'checkList')) {
checkList.value = functions.getStorage(window.location.pathname + 'checkList');
console.log(checkList.value)
console.log(checkList.value);
}
if (functions.getStorage(window.location.pathname + 'flexList')) {
flexList.value = functions.getStorage(window.location.pathname + 'flexList');
console.log(flexList.value)
console.log(flexList.value);
}
if (functions.getStorage(window.location.pathname + 'sortlist')) {
sortlist.value = functions.getStorage(window.location.pathname + 'sortlist');
console.log(sortlist.value)
console.log(sortlist.value);
}
let emit = defineEmits(['setcolum', 'closce']);
let props = defineProps({
@ -210,7 +210,7 @@ function checkboxitem(type: number) {
}
});
});
emit('setcolum', props.columnList, checkList.value,type);
emit('setcolum', props.columnList, checkList.value, type);
} else if (type == 2) {
props.columnList.map(item => {
item.fixed = false;
@ -218,15 +218,15 @@ function checkboxitem(type: number) {
(flexList.value as []).map(ite => {
props.columnList.map(item => {
if (ite == item.label) {
if(item.type==6){
item.fixed = 'right';
}else{
item.fixed = true;
}
if (item.type == 6) {
item.fixed = 'right';
} else {
item.fixed = true;
}
}
});
});
emit('setcolum', props.columnList, flexList.value,type);
emit('setcolum', props.columnList, flexList.value, type);
} else if (type == 3) {
props.columnList.map(item => {
item.sortable = false;
@ -238,7 +238,7 @@ function checkboxitem(type: number) {
}
});
});
emit('setcolum', props.columnList, sortlist.value,type);
emit('setcolum', props.columnList, sortlist.value, type);
}
}
let headtop = ref<headtoptype[]>([

472
src/views/basic/pda/basicPda1111.vue → src/views/basic/pda/basicPdaTTTTT.vue
Unescape View File

@ -14,9 +14,9 @@
<el-button @click="handleDelete"
><el-icon><Edit /></el-icon>查看维修记录</el-button
>
<el-button link type="primary" icon="el-icon-view" @click="toggleSelection()"
<!-- <el-button link type="primary" icon="el-icon-view" @click="toggleSelection()"
>多选测试</el-button
>
> -->
</div>
<!-- 表格顶部右侧按钮 -->
<div class="el-Cart-button-right">
@ -25,7 +25,7 @@
<el-icon color="#ccc"><Refresh /></el-icon>
</button>
<!-- 功能按钮 -->
<button>
<button @click="menu = true">
<el-icon color="#ccc"><Operation /></el-icon>
</button>
<!-- 搜索按钮 -->
@ -37,63 +37,72 @@
<!-- 顶部结束 -->
<div class="el-Cart">
<!-- 表格列开始 -->
<el-table :data="data" border :height="TabHeight + 'px'" style="width: 100%" ref="tableRef">
<el-table-column type="selection" width="55" fixed="left" />
<el-table-column
type="index"
fixed="left"
width="50"
height="100"
label="#"
align="center"
/>
<el-table-column prop="name" label="产品名称" width="180" align="center " sortable />
<el-table-column prop="model" label="型号" width="180" align="center " />
<el-table-column prop="purchaseAmount" label="购买金额" width="180" align="center " />
<el-table-column prop="state" label="状态" width="180" align="center " />
<el-table-column
prop="currentUsageWarehouse"
label="当前使用仓"
width="180"
align="center "
/>
<el-table-column prop="user" label="使用人" width="180" align="center " />
<el-table-column
prop="deviceSerialNumber"
label="设备序列号S/N"
width="180"
align="center "
/>
<el-table-column prop="userPosition" label="使用人岗位" width="180" align="center " />
<el-table-column prop="isDeposit" label="是否收取押金" width="180" align="center " />
<el-table-column prop="deposit" label="押金金额(元)" width="180" align="center " />
<el-table-column prop="purchasingCompany" label="采购公司" width="180" align="center " />
<el-table-column label="商品图片" width="180" align="center">
<template #default="props">
<img :src="props.row.photo" class="el-Img" />
<el-table
:data="data"
row-key="name"
border
:height="TabHeight + 'px'"
style="width: 100%"
ref="tableRef"
>
<el-table-column type="selection" width="55" fixed />
<el-table-column type="index" fixed width="50" height="100" label="#" align="center" />
<template v-for="(item, index) in menuData" :key="item.label">
<!--
Type ===1 普通文本
Type ===2 图片显示
Type ===3 操作功能
label: 标题
width: 宽度
prop: 数据字段
-->
<template v-if="item.type === 1">
<el-table-column
v-if="item.head"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
align="center"
/>
</template>
</el-table-column>
<el-table-column prop="buyingTime" label="购买时间" width="180" align="center " />
<el-table-column prop="notes" label="备注" width="180" align="center " />
<el-table-column
prop="warrantyPeriodEndTime"
label="保修截止时间"
width="180"
align="center "
/>
<el-table-column fixed="right" label="操作" width="280" align="center ">
<template #default>
<el-button link type="primary" icon="el-icon-delete" @click="handleDelete"
>删除</el-button
>
<el-button link type="primary" icon="el-icon-view" @click="handleEdit(row)"
>编辑</el-button
<template v-if="item.type === 2">
<el-table-column
v-if="item.head"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
align="center"
>
<el-button link type="primary" icon="el-icon-view" @click="handleview(row)"
>查看</el-button
<template #default="props">
<img :src="props.row[item.prop]" class="el-Img" />
</template>
</el-table-column>
</template>
<template v-if="item.type === 3">
<el-table-column
v-if="item.head"
fixed="right"
label="操作"
width="280"
align="center "
>
<template #default>
<el-button link type="primary" icon="el-icon-delete" @click="handleDelete"
>删除</el-button
>
<el-button link type="primary" icon="el-icon-view" @click="handleEdit(row)"
>编辑</el-button
>
<el-button link type="primary" icon="el-icon-view" @click="handleview(row)"
>查看</el-button
>
</template>
</el-table-column>
</template>
</el-table-column>
</template>
</el-table>
<!-- 表格翻页功能 -->
<div class="demo-pagination-block">
@ -247,6 +256,74 @@
</el-dialog>
</div>
<!-- 弹窗结束 -->
<!-- 右侧功能列表弹窗 -->
<div class="el-menu-load">
<el-drawer v-model="menu" direction="rtl">
<template #header>
<h4>菜单功能列表</h4>
</template>
<!-- 默认插入到侧边栏内容 -->
<template #default>
<el-table :data="menuData" border :height="menuHeight + 'px'">
<el-table-column
v-for="column in MenuTop"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width"
>
<!--
/
MenuTop: 0:菜单选项
true-label: 1.选中时候的值
false-label: 2.没有选中时候的值
@change: 3.当绑定时候的值发生变化的时候触发
label: 4.选中状态的值
/
-->
<!-- 标题 -->
<template #default="scope">
<template v-if="column.prop == 'label'">
<el-text class="mx-1">{{ scope.row[column.prop] }}</el-text>
</template>
<!-- 隐藏复选框 -->
<template v-else-if="column.label == '隐藏'">
<el-checkbox-group v-model="checkList">
<el-checkbox
:key="scope.row['label']"
:label="scope.row['label']"
@change="CheckBox(scope.row, 1)"
>
<!-- 用于隐藏文字 -->
<template #default="scope">
<!-- {{ scope }} -->
</template>
</el-checkbox>
</el-checkbox-group>
</template>
<template v-else-if="column.label == '冻结'">
<el-checkbox-group v-model="flexList">
<el-checkbox
:key="scope.row['label']"
:label="scope.row['label']"
@change="CheckBox(scope.row, 2)"
>
<!-- 用于隐藏文字 -->
<template #default="scope">
<!-- {{ scope }} -->
</template>
</el-checkbox>
</el-checkbox-group>
</template>
</template>
</el-table-column>
</el-table>
</template>
</el-drawer>
</div>
</div>
</template>
@ -255,6 +332,38 @@ import { ref, reactive, onMounted, computed } from 'vue';
import { getList, getDetail, $_AddInfo, update, remove, $_TableList } from '@/api/basic/basicPda'; //API
import { ElMessage, type UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';
const MenuTop = ref([
{
prop: 'label',
label: '列名',
width: '',
},
{
prop: '',
label: '隐藏',
},
{
prop: '',
label: '冻结',
},
{
prop: '',
label: '排序',
},
]);
const checkList = ref<(string | number)[]>([]); //隐藏
const flexList = ref<(string | number)[]>([]); //冻结
const CheckBox = (scope, type: number) => {
console.log(scope, 'scope');
if (type === 1) {
scope.head = !scope.head;
}
if (type === 2) {
scope.fixed = !scope.fixed;
}
};
const currentPage = ref(1); // 默认页码
const pageSize = ref(30); // 默认每一页几条
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条
@ -272,6 +381,10 @@ const optionsvalue = ref(''); //下拉框值
const optionsvalue2 = ref(''); //状态值
const uploadRef = ref(); //图片上传
const tableRef = ref(null); // 用于引用 table 实例
const menu = ref(true); //功能菜单列表
const menuHeight = ref(); //右侧菜单栏高度,用于固定表头
const MeunList = ref((name = {}));
const MeunName = ref([]); //菜单名
const options = [
//下拉选择框
{
@ -298,6 +411,187 @@ const options2 = [
label: '不能使用(不能开机)',
},
];
// 菜单功能头部
// 菜单功能列表
const menuData = ref([
{
prop: 'name',
label: '产品名称',
type: 1,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'currentUsageWarehouse',
label: '当前使用仓',
type: 1,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'model',
label: '型号',
type: 1,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'purchaseAmount',
label: '购买金额',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'state',
label: '状态',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'user',
label: '使用人',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'deviceSerialNumber',
label: '设备序列号S/N',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'userPosition',
label: '使用人岗位',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'isDeposit',
label: '是否收取押金',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'deposit',
label: '押金金额(元)',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'purchasingCompany',
label: '采购公司',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'photo',
label: '商品图片',
type: 2,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'buyingTime',
label: '购买时间',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'notes',
label: '备注',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: 'warrantyPeriodEndTime',
label: '保修截止时间',
type: 1,
values: '',
width: '180',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
{
prop: '',
label: '操作',
type: 3,
values: '',
width: '280',
checkarr: [],
fixed: false,
sortable: true,
head: true,
},
]);
// 图片上传背景图，固定白色背景
const url =
'https://img1.baidu.com/it/u=1996827238,2183445322&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889';
@ -315,8 +609,10 @@ const headers = computed(() => {
function onLoad() {
// 获取表格数据API（$_TableList）
$_TableList({ current: currentPage.value, size: pageSize.value }).then(res => {
console.log(res.data.data.records);
//表格信息
console.log(res, 'res');
const keys = Object.keys(res.data.data.records[0]);
MeunName.value = keys.map(key => ({ key }));
data.value = res.data.data.records;
const setIn = setTimeout(() => {
toggleSelection(); //表格自动选中函数
@ -328,6 +624,8 @@ function onLoad() {
onMounted(() => {
//默认值88
TabHeight.value = TabHeight.value.offsetHeight - 91;
menuHeight.value = window.innerHeight - 135;
console.log('元素的高度：', menuHeight.value);
// 等待DOM高度被复制之后在请求数据，防止被数据撑开高度
onLoad();
});
@ -352,7 +650,6 @@ const ImgSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
img.value = true;
// 图片放入预览
UrlImg.value.push(response.data.link);
console.log(UrlImg.value);
// 图片存入表单准备提交
AddForm.value.photo = response.data.link;
// 显示图片名字
@ -370,6 +667,23 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
}
return true;
};
// 字典转换(英文转中文)
let dictionary = (columnNames, text) => {
// columnNames:传入的数组,要修改的字段名
// text:传入要修改的对象
const mapping = text;
// 只获取指定参数对应的列数据，并将英文字段名替换为中文字段名
const filteredData = userList.value.map(item => {
const translatedItem = {};
for (let column of columnNames) {
const chineseColumn = mapping[column] || column;
translatedItem[chineseColumn] = item[column];
}
return translatedItem;
});
// 把修修改好表头数据赋值给要导出的工作表
expExcel.value = filteredData;
};
// 表单信息提交
const submit = () => {
console.log(AddForm.value);
@ -640,5 +954,47 @@ const submit = () => {
margin-left: 6px;
}
}
// 侧边弹窗功能样式
:deep(.el-menu-load) {
.el-drawer__header {
padding: 0;
padding-left: 20px;
position: relative;
border-bottom: 1px solid #172e5f;
margin-bottom: 0;
i {
color: #172e60;
}
}
.el-drawer__header::after {
content: '';
display: block;
width: 4px;
height: 18px;
background-color: #172e60;
position: absolute;
top: 23px;
left: 9px;
}
.el-table__inner-wrapper {
.cell {
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.el-table__row {
height: 40px;
}
}
// 上移,下移按钮
.el-text {
margin: 0 5px;
}
}
}
.hide-column {
display: none;
}
</style>

13
src/views/distribution/turndelivery/deliveryDiscuss.vue
Unescape View File

@ -393,7 +393,7 @@
<el-form-item style="margin-left: 45%; margin-top: 10px">
<el-button type="primary" icon="el-icon-circle-close" @click="onSubmitBusiness"
<el-button :disabled='BtnDisabled' type="primary" icon="el-icon-circle-close" @click="onSubmitBusiness"
>提交(商配订单)
</el-button>
<el-button icon="el-icon-circle-close" @click="this.$router.go(-1)">返 回</el-button>
@ -820,7 +820,8 @@ import { ElMessageBox } from 'element-plus'
default: () => ({})
},
isInitialized: false,
isUpdate: false
isUpdate: false,
BtnDisabled:false,//按钮禁止
};
},
watch: {
@ -1415,6 +1416,14 @@ import { ElMessageBox } from 'element-plus'
* 订单提交
*/
onSubmitBusiness() {
this.BtnDisabled=true
setTimeout(() => {
// 启用按钮
this.BtnDisabled = false;
}, 2000);
if(!this.BtnDisabled){
return
}
if (this.orderData.length === 0) {
this.$message.warning('请选择订单');
return;

4
vite.config.js
Unescape View File

@ -22,8 +22,8 @@ export default ({ mode, command }) => {
// cyz
// target: 'http://192.168.10.75:8777',
// tjj
target: 'http://192.168.10.29:13000',
// target: 'http://test.api.huitongys.com',
// target: 'http://192.168.10.29:13000',
target: 'http://test.api.huitongys.com',
// target: 'http://h5uapi.huitongys.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),

Write Preview
Loading…
Cancel
Save