659 lines
21 KiB
Vue
659 lines
21 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- 表格 -->
|
||
|
|
<el-card>
|
||
|
|
<div class="flex justify-center flex-wrap">
|
||
|
|
<TabelTools @showTools="showTools" :dialogObj="bdCardMsgActive" />
|
||
|
|
<AddNewData newDataLabel="新增北斗卡" @showAddForm="showAddForm" />
|
||
|
|
<el-table
|
||
|
|
ref="tableRef"
|
||
|
|
:data="tableData"
|
||
|
|
style="width: 100%"
|
||
|
|
max-height="50rem"
|
||
|
|
table-layout="auto"
|
||
|
|
scrollbar-always-on
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
v-if="dialogOperationVisible"
|
||
|
|
fixed="left"
|
||
|
|
type="selection"
|
||
|
|
width="40"
|
||
|
|
column-key="selection"
|
||
|
|
/>
|
||
|
|
<TabelSelect
|
||
|
|
v-if="dialogOperationVisible"
|
||
|
|
ref="EditSelectRef"
|
||
|
|
:holderText="editSelectHold"
|
||
|
|
singleColor="primary"
|
||
|
|
multipleColor="warning"
|
||
|
|
allColor="danger"
|
||
|
|
singleSize="small"
|
||
|
|
multipleSize="small"
|
||
|
|
allSize="small"
|
||
|
|
:singlePlain="true"
|
||
|
|
:multiplePlain="false"
|
||
|
|
:allPlain="false"
|
||
|
|
operateType="edit"
|
||
|
|
@showComfirmDialog="showComfirmDialog"
|
||
|
|
/>
|
||
|
|
<TabelSelect
|
||
|
|
v-if="dialogOperationVisible"
|
||
|
|
ref="DelSelectRef"
|
||
|
|
:holderText="delSelectHold"
|
||
|
|
singleColor="danger"
|
||
|
|
multipleColor="warning"
|
||
|
|
allColor="danger"
|
||
|
|
singleSize="small"
|
||
|
|
multipleSize="small"
|
||
|
|
allSize="small"
|
||
|
|
:singlePlain="true"
|
||
|
|
:multiplePlain="false"
|
||
|
|
:allPlain="false"
|
||
|
|
operateType="del"
|
||
|
|
@showComfirmDialog="showComfirmDialog"
|
||
|
|
/>
|
||
|
|
<el-table-column min-width="100" column-key="card_id">
|
||
|
|
<template #header>
|
||
|
|
<div>
|
||
|
|
<SearchKey
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="SearchCardIdKeyRef"
|
||
|
|
holderText="输入卡号以搜索相关数据"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> 卡号 </el-text>
|
||
|
|
<SortSearch
|
||
|
|
v-if="dialogSortVisible"
|
||
|
|
ref="SortCardIdRef"
|
||
|
|
activeText="顺序"
|
||
|
|
inactiveText="倒序"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="flex justify-start items-center text-base">
|
||
|
|
{{ scope.row.card_id }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column min-width="160" column-key="card_imsi">
|
||
|
|
<template #header>
|
||
|
|
<div>
|
||
|
|
<SearchKey
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="SearchCardImsiKeyRef"
|
||
|
|
holderText="输入IMSI号以搜索相关数据"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> IMSI号 </el-text>
|
||
|
|
<SortSearch
|
||
|
|
v-if="dialogSortVisible"
|
||
|
|
ref="SortCardImsiRef"
|
||
|
|
activeText="顺序"
|
||
|
|
inactiveText="倒序"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="flex justify-start items-center text-base">
|
||
|
|
{{ scope.row.card_imsi }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column min-width="100" column-key="type">
|
||
|
|
<template #header>
|
||
|
|
<SelectSearch
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="SelectTypeSearchRef"
|
||
|
|
holderText="选择白名单类型以搜索相关数据"
|
||
|
|
:options="typeOptions"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> 白名单类型 </el-text>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div
|
||
|
|
:style="styleShunt(typeOptions, scope.row.type)"
|
||
|
|
class="flex justify-start items-center text-base"
|
||
|
|
>
|
||
|
|
{{ labelShunt(typeOptions, scope.row.type) }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column min-width="80" column-key="status">
|
||
|
|
<template #header>
|
||
|
|
<SelectSearch
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="SelectStatusSearchRef"
|
||
|
|
holderText="选择绑定状态以搜索相关数据"
|
||
|
|
:options="statusOptions"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> 绑定状态 </el-text>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div
|
||
|
|
:style="styleShunt(statusOptions, scope.row.status)"
|
||
|
|
class="flex justify-start items-center text-base"
|
||
|
|
>
|
||
|
|
{{ labelShunt(statusOptions, scope.row.status) }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column min-width="120" column-key="account_name">
|
||
|
|
<template #header>
|
||
|
|
<div>
|
||
|
|
<SearchKey
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="SearchAccountNameKeyRef"
|
||
|
|
holderText="输入绑定用户以搜索相关数据"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> 绑定用户 </el-text>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="flex justify-start items-center text-base">
|
||
|
|
{{ scope.row.account_name }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column min-width="200" column-key="created_at">
|
||
|
|
<template #header>
|
||
|
|
<DateTimePicker
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="createdDateTimePickerRef"
|
||
|
|
DateTimePicker="createdDateTimePicker"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> 注册时间 </el-text>
|
||
|
|
<SortSearch
|
||
|
|
v-if="dialogSortVisible"
|
||
|
|
ref="createdSortDateTimeRef"
|
||
|
|
activeText="顺序"
|
||
|
|
inactiveText="倒序"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="flex justify-start items-center text-base">
|
||
|
|
{{ scope.row.created_at }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column min-width="200" column-key="updated_at">
|
||
|
|
<template #header>
|
||
|
|
<DateTimePicker
|
||
|
|
v-if="dialogSearchVisible"
|
||
|
|
ref="updatedDateTimePickerRef"
|
||
|
|
DateTimePicker="updatedMsgDateTimePicker"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<el-text class="mx-1"> 绑定状态变更时间 </el-text>
|
||
|
|
<SortSearch
|
||
|
|
v-if="dialogSortVisible"
|
||
|
|
ref="updatedSortDateTimeRef"
|
||
|
|
activeText="顺序"
|
||
|
|
inactiveText="倒序"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="flex justify-start items-center text-base">
|
||
|
|
{{ scope.row.updated_at }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<!-- 表格 -->
|
||
|
|
<Pagination
|
||
|
|
ref="PaginationRef"
|
||
|
|
:active="bdCardMsgActive"
|
||
|
|
@sizeChangeBack="changePage"
|
||
|
|
@search="bdCardMsg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
<AddBdCardForm ref="addBdCardFormRef" title="新增北斗卡" @reloadData="bdCardMsg" />
|
||
|
|
<EditBdCardForm
|
||
|
|
ref="editBdCardFormRef"
|
||
|
|
operateLabel="编辑北斗卡"
|
||
|
|
:editData="editData"
|
||
|
|
@requestOperate="requestOperate"
|
||
|
|
/>
|
||
|
|
<PasswordOauth
|
||
|
|
ref="delPasswordOauthRef"
|
||
|
|
operateLabel="删除北斗卡"
|
||
|
|
@requestOperate="requestOperate"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, watch, onMounted, nextTick } from "vue";
|
||
|
|
import { ElMessage } from "element-plus";
|
||
|
|
|
||
|
|
import TabelTools from "../operate/tabelTools.vue";
|
||
|
|
import AddNewData from "../operate/addNewData.vue";
|
||
|
|
import TabelSelect from "../operate/tabelSelect.vue";
|
||
|
|
import SearchKey from "../search/searchKey.vue";
|
||
|
|
import SortSearch from "../search/sortSearch.vue";
|
||
|
|
import SelectSearch from "../search/selectSearch.vue";
|
||
|
|
import DateTimePicker from "../search/dateTimePicker.vue";
|
||
|
|
import Pagination from "../search/pagination.vue";
|
||
|
|
import AddBdCardForm from "../addNewData/bdCardForm/bdCardForm.vue";
|
||
|
|
import EditBdCardForm from "../editData/bdCardForm.vue";
|
||
|
|
import PasswordOauth from "../operate/passwordOauth.vue";
|
||
|
|
|
||
|
|
import bdCardActiveStore from "../../stores/bdCard";
|
||
|
|
|
||
|
|
import moment from "moment";
|
||
|
|
|
||
|
|
import $http from "../../api/index";
|
||
|
|
import $url from "../../api/url";
|
||
|
|
|
||
|
|
import { encrypt } from "../../utils/aes";
|
||
|
|
import { judgment } from "../../utils/judgment.js";
|
||
|
|
import { hasNullOrEmptyPropertyWithTypeof } from "../../utils/hasNullOrEmptyPropertyWithTypeof.js";
|
||
|
|
|
||
|
|
const bdCardMsgActive = bdCardActiveStore();
|
||
|
|
|
||
|
|
const editSelectHold = {
|
||
|
|
single: "编辑",
|
||
|
|
multiple: "编辑选中",
|
||
|
|
all: "编辑所有",
|
||
|
|
label: "编辑北斗卡",
|
||
|
|
};
|
||
|
|
|
||
|
|
const delSelectHold = {
|
||
|
|
single: "删除",
|
||
|
|
multiple: "删除选中",
|
||
|
|
all: "删除所有",
|
||
|
|
label: "删除北斗卡",
|
||
|
|
};
|
||
|
|
const EditSelectRef = ref(null);
|
||
|
|
const DelSelectRef = ref(null);
|
||
|
|
const SearchCardIdKeyRef = ref(null);
|
||
|
|
const SearchCardImsiKeyRef = ref(null);
|
||
|
|
const SelectTypeSearchRef = ref(null);
|
||
|
|
const SelectStatusSearchRef = ref(null);
|
||
|
|
const SearchAccountNameKeyRef = ref(null);
|
||
|
|
const createdDateTimePickerRef = ref(null);
|
||
|
|
const updatedDateTimePickerRef = ref(null);
|
||
|
|
const SortCardIdRef = ref(null);
|
||
|
|
const SortCardImsiRef = ref(null);
|
||
|
|
const createdSortDateTimeRef = ref(null);
|
||
|
|
const updatedSortDateTimeRef = ref(null);
|
||
|
|
const PaginationRef = ref(null);
|
||
|
|
const addBdCardFormRef = ref(null);
|
||
|
|
const editBdCardFormRef = ref(null);
|
||
|
|
const delPasswordOauthRef = ref(null);
|
||
|
|
const dialogSearchVisible = ref(false);
|
||
|
|
const dialogSortVisible = ref(false);
|
||
|
|
const dialogOperationVisible = ref(false);
|
||
|
|
const tableRef = ref();
|
||
|
|
const offsetOff = ref(true);
|
||
|
|
const pageCount = ref(0);
|
||
|
|
const operate = ref("edit");
|
||
|
|
const searchOptions = reactive({
|
||
|
|
card_id: "",
|
||
|
|
card_imsi: "",
|
||
|
|
type: "",
|
||
|
|
status: "",
|
||
|
|
account_name: "",
|
||
|
|
created_at: "",
|
||
|
|
updated_at: "",
|
||
|
|
});
|
||
|
|
const sortOptions = reactive({
|
||
|
|
card_id: false,
|
||
|
|
card_imsi: false,
|
||
|
|
created_at: false,
|
||
|
|
updated_at: false,
|
||
|
|
});
|
||
|
|
const tableData = ref([]);
|
||
|
|
const typeOptions = [
|
||
|
|
{
|
||
|
|
value: "0",
|
||
|
|
label: "白名单",
|
||
|
|
style:
|
||
|
|
"color: rgb(16, 184, 130);background-color: rgba(16, 184, 130, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "1",
|
||
|
|
label: "审核中",
|
||
|
|
style:
|
||
|
|
"color: rgb(56, 188, 248);background-color: rgba(56, 188, 248, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "2",
|
||
|
|
label: "黑名单",
|
||
|
|
style: "color: rgb(240, 70, 70);background-color: rgba(240, 70, 70, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const statusOptions = [
|
||
|
|
{
|
||
|
|
value: "0",
|
||
|
|
label: "未绑定",
|
||
|
|
style: "color: rgb(255, 200, 0);background-color: rgba(255, 200, 0, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "1",
|
||
|
|
label: "B端绑定",
|
||
|
|
style:
|
||
|
|
"color: rgb(255, 100, 180);background-color: rgba(255, 100, 180, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "2",
|
||
|
|
label: "C端绑定",
|
||
|
|
style:
|
||
|
|
"color: rgb(255, 120, 20);background-color: rgba(255, 120, 20, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "3",
|
||
|
|
label: "竞赛绑定",
|
||
|
|
style:
|
||
|
|
"color: rgb(20, 200, 200);background-color: rgba(20, 200, 200, 0.1);padding: 0;",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
let singleData = reactive({});
|
||
|
|
let operateData = reactive({});
|
||
|
|
let operateDataClone = reactive({});
|
||
|
|
const editData = reactive({
|
||
|
|
typeOptions,
|
||
|
|
});
|
||
|
|
|
||
|
|
const showAddForm = () => {
|
||
|
|
addBdCardFormRef.value.dialogVisible = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const styleShunt = (options, data) => {
|
||
|
|
let nowStyle;
|
||
|
|
options.forEach((item) => {
|
||
|
|
if (data == item.value) {
|
||
|
|
nowStyle = item.style;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return nowStyle;
|
||
|
|
};
|
||
|
|
|
||
|
|
const labelShunt = (options, data) => {
|
||
|
|
let nowLabel;
|
||
|
|
options.forEach((item) => {
|
||
|
|
if (data == item.value) {
|
||
|
|
nowLabel = item.label;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return nowLabel;
|
||
|
|
};
|
||
|
|
|
||
|
|
const showTools = (operateType) => {
|
||
|
|
switch (operateType) {
|
||
|
|
case "search":
|
||
|
|
dialogSearchVisible.value = !dialogSearchVisible.value;
|
||
|
|
bdCardMsgActive.dialogSearchVisible = dialogSearchVisible.value;
|
||
|
|
break;
|
||
|
|
case "sort":
|
||
|
|
dialogSortVisible.value = !dialogSortVisible.value;
|
||
|
|
bdCardMsgActive.dialogSortVisible = dialogSortVisible.value;
|
||
|
|
break;
|
||
|
|
case "operation":
|
||
|
|
dialogOperationVisible.value = !dialogOperationVisible.value;
|
||
|
|
bdCardMsgActive.dialogOperationVisible = dialogOperationVisible.value;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const resetOffset = () => {
|
||
|
|
if (hasNullOrEmptyPropertyWithTypeof(searchOptions)) {
|
||
|
|
if (PaginationRef.value.offset !== 1 && offsetOff.value) {
|
||
|
|
PaginationRef.value.handleCurrentChange(1);
|
||
|
|
offsetOff.value = false;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
offsetOff.value = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const bdCardMsg = () => {
|
||
|
|
judgment(searchOptions, "card_id", SearchCardIdKeyRef.value, "searchMsg");
|
||
|
|
judgment(searchOptions, "card_imsi", SearchCardImsiKeyRef.value, "searchMsg");
|
||
|
|
judgment(searchOptions, "type", SelectTypeSearchRef.value, "searchMsg");
|
||
|
|
judgment(searchOptions, "status", SelectStatusSearchRef.value, "searchMsg");
|
||
|
|
judgment(searchOptions, "account_name", SearchAccountNameKeyRef.value, "searchMsg");
|
||
|
|
judgment(searchOptions, "created_at", createdDateTimePickerRef.value, "searchMsg");
|
||
|
|
judgment(searchOptions, "updated_at", updatedDateTimePickerRef.value, "searchMsg");
|
||
|
|
judgment(sortOptions, "card_id", SortCardIdRef.value, "searchMsg");
|
||
|
|
judgment(sortOptions, "card_imsi", SortCardImsiRef.value, "searchMsg");
|
||
|
|
judgment(sortOptions, "created_at", createdSortDateTimeRef.value, "searchMsg");
|
||
|
|
judgment(sortOptions, "updated_at", updatedSortDateTimeRef.value, "searchMsg");
|
||
|
|
resetOffset();
|
||
|
|
const data = {
|
||
|
|
uid: localStorage.data,
|
||
|
|
offset: PaginationRef.value == null ? 1 : PaginationRef.value.offset,
|
||
|
|
limit: PaginationRef.value == null ? 10 : PaginationRef.value.limit,
|
||
|
|
searchOptions: searchOptions,
|
||
|
|
sortOptions: sortOptions,
|
||
|
|
};
|
||
|
|
$http.post($url.showBdCard, data).then((res) => {
|
||
|
|
if (res.data.code === 200) {
|
||
|
|
tableData.value = res.data.bdCardMsg;
|
||
|
|
tableData.value.forEach((item) => {
|
||
|
|
item.origin_createdAt = item.created_at;
|
||
|
|
item.created_at = moment
|
||
|
|
.utc(item.created_at)
|
||
|
|
.add(8, "hours")
|
||
|
|
.format("YYYY-MM-DD-HH:mm:ss");
|
||
|
|
item.origin_updatedAt = item.updated_at;
|
||
|
|
item.updated_at = moment
|
||
|
|
.utc(item.updated_at)
|
||
|
|
.add(8, "hours")
|
||
|
|
.format("YYYY-MM-DD-HH:mm:ss");
|
||
|
|
});
|
||
|
|
PaginationRef.value.dataCount = res.data.count;
|
||
|
|
bdCardMsgActive.dataCount = PaginationRef.value.dataCount;
|
||
|
|
pageCount.value = Math.ceil(
|
||
|
|
PaginationRef.value.dataCount / PaginationRef.value.limit
|
||
|
|
);
|
||
|
|
bdCardMsgActive.pageCount = pageCount.value;
|
||
|
|
if (!operateData[PaginationRef.value.offset]) return;
|
||
|
|
operateData[PaginationRef.value.offset].forEach((element) => {
|
||
|
|
tableData.value.forEach((item) => {
|
||
|
|
if (item.created_at == element.created_at) {
|
||
|
|
nextTick(() => {
|
||
|
|
tableRef.value.toggleRowSelection(item, true);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
tableData.value = [];
|
||
|
|
ElMessage.error("未查找到相关数据！");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const changePage = (val) => {
|
||
|
|
pageCount.value = Math.ceil(PaginationRef.value.dataCount / val);
|
||
|
|
operateData = {};
|
||
|
|
for (let i = 0; i < pageCount.value; i++) {
|
||
|
|
operateData[i + 1] = [];
|
||
|
|
for (const key in operateDataClone) {
|
||
|
|
operateDataClone[key].forEach((element) => {
|
||
|
|
// 判断数据在第几页
|
||
|
|
if (Math.ceil(element.location / PaginationRef.value.limit) == i + 1) {
|
||
|
|
operateData[i + 1].push(element);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSelectionChange = (val) => {
|
||
|
|
operateData[PaginationRef.value.offset] = val;
|
||
|
|
tableData.value.forEach((item, index) => {
|
||
|
|
operateData[PaginationRef.value.offset].forEach((element) => {
|
||
|
|
if (item.created_at == element.created_at) {
|
||
|
|
// 数据在表格中的位置
|
||
|
|
element.location =
|
||
|
|
(PaginationRef.value.offset - 1) * PaginationRef.value.limit + (index + 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
operateDataClone = JSON.parse(JSON.stringify(operateData));
|
||
|
|
for (const key in operateDataClone) {
|
||
|
|
operateDataClone[key].forEach((item) => {
|
||
|
|
if (item.origin_createdAt) {
|
||
|
|
item.created_at = item.origin_createdAt;
|
||
|
|
}
|
||
|
|
if (item.origin_updatedAt) {
|
||
|
|
item.created_at = item.origin_updatedAt;
|
||
|
|
}
|
||
|
|
delete item.origin_createdAt;
|
||
|
|
delete item.origin_updatedAt;
|
||
|
|
delete item.location;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const showComfirmDialog = (singleMsg) => {
|
||
|
|
singleData = { ...singleMsg.data };
|
||
|
|
singleData.created_at = singleData.origin_createdAt;
|
||
|
|
singleData.updated_at = singleData.origin_updatedAt;
|
||
|
|
delete singleData.origin_createdAt;
|
||
|
|
delete singleData.origin_updatedAt;
|
||
|
|
operate.value = singleMsg.operateType;
|
||
|
|
if (singleMsg.operateType == "edit") {
|
||
|
|
editBdCardFormRef.value.operateDialogVisible = true;
|
||
|
|
editBdCardFormRef.value.model = EditSelectRef.value.model;
|
||
|
|
}
|
||
|
|
if (singleMsg.operateType == "del") {
|
||
|
|
delPasswordOauthRef.value.operateDialogVisible = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const requestOperate = () => {
|
||
|
|
let operateType, url, model, password;
|
||
|
|
if (operate.value == "edit") {
|
||
|
|
operateType = "编辑";
|
||
|
|
url = $url.editBdCard;
|
||
|
|
model = EditSelectRef.value.model;
|
||
|
|
password = editBdCardFormRef.value.password;
|
||
|
|
} else if (operate.value == "del") {
|
||
|
|
operateType = "删除";
|
||
|
|
url = $url.deleteBdCard;
|
||
|
|
model = DelSelectRef.value.model;
|
||
|
|
password = delPasswordOauthRef.value.ruleForm.password;
|
||
|
|
}
|
||
|
|
const data = {
|
||
|
|
uid: localStorage.data,
|
||
|
|
model: encrypt(model),
|
||
|
|
password: encrypt(password),
|
||
|
|
requestMsg: model == "single" ? singleData : model == "multiple" ? operateDataClone : "",
|
||
|
|
};
|
||
|
|
if (operate.value == "edit") {
|
||
|
|
data.updateMsg = { ...editBdCardFormRef.value.ruleForm };
|
||
|
|
}
|
||
|
|
$http.post(url, data).then((res) => {
|
||
|
|
if (res.data.code === 200) {
|
||
|
|
tableRef.value.clearSelection();
|
||
|
|
operateData = {};
|
||
|
|
operateDataClone = {};
|
||
|
|
ElMessage({
|
||
|
|
message: `${operateType}成功！`,
|
||
|
|
type: "success",
|
||
|
|
});
|
||
|
|
bdCardMsg();
|
||
|
|
} else {
|
||
|
|
ElMessage.error(`${operateType}失败！`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
defineExpose({ bdCardMsg });
|
||
|
|
|
||
|
|
watch(searchOptions, (value) => {
|
||
|
|
bdCardMsgActive.searchOptions = value;
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(sortOptions, (value) => {
|
||
|
|
bdCardMsgActive.sortOptions = value;
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
pageCount.value = bdCardMsgActive.pageCount;
|
||
|
|
dialogSearchVisible.value = bdCardMsgActive.dialogSearchVisible;
|
||
|
|
dialogSortVisible.value = bdCardMsgActive.dialogSortVisible;
|
||
|
|
dialogOperationVisible.value = bdCardMsgActive.dialogOperationVisible;
|
||
|
|
|
||
|
|
if (dialogSearchVisible.value) {
|
||
|
|
searchOptions.card_id = bdCardMsgActive.searchOptions.card_id;
|
||
|
|
searchOptions.card_imsi = bdCardMsgActive.searchOptions.card_imsi;
|
||
|
|
searchOptions.type = bdCardMsgActive.searchOptions.type;
|
||
|
|
searchOptions.status = bdCardMsgActive.searchOptions.status;
|
||
|
|
searchOptions.account_name = bdCardMsgActive.searchOptions.account_name;
|
||
|
|
searchOptions.created_at = bdCardMsgActive.searchOptions.created_at;
|
||
|
|
searchOptions.updated_at = bdCardMsgActive.searchOptions.updated_at;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dialogSortVisible.value) {
|
||
|
|
sortOptions.card_id = bdCardMsgActive.sortOptions.card_id;
|
||
|
|
sortOptions.card_imsi = bdCardMsgActive.sortOptions.card_imsi;
|
||
|
|
sortOptions.created_at = bdCardMsgActive.sortOptions.created_at;
|
||
|
|
sortOptions.updated_at = bdCardMsgActive.sortOptions.updated_at;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dialogOperationVisible.value) {
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
bdCardMsg();
|
||
|
|
}, 200);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
if (dialogSearchVisible.value) {
|
||
|
|
SearchCardIdKeyRef.value.searchMsg = bdCardMsgActive.searchOptions.card_id;
|
||
|
|
SearchCardImsiKeyRef.value.searchMsg = bdCardMsgActive.searchOptions.card_imsi;
|
||
|
|
SelectTypeSearchRef.value.searchMsg = bdCardMsgActive.searchOptions.type;
|
||
|
|
SelectStatusSearchRef.value.searchMsg = bdCardMsgActive.searchOptions.status;
|
||
|
|
SearchAccountNameKeyRef.value.searchMsg =
|
||
|
|
bdCardMsgActive.searchOptions.account_name;
|
||
|
|
createdDateTimePickerRef.value.created_at =
|
||
|
|
bdCardMsgActive.searchOptions.created_at;
|
||
|
|
updatedDateTimePickerRef.value.updated_at =
|
||
|
|
bdCardMsgActive.searchOptions.updated_at;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dialogSortVisible.value) {
|
||
|
|
SortCardIdRef.value.searchMsg = bdCardMsgActive.sortOptions.card_id;
|
||
|
|
SortCardImsiRef.value.searchMsg = bdCardMsgActive.sortOptions.card_imsi;
|
||
|
|
createdSortDateTimeRef.value.searchMsg = bdCardMsgActive.sortOptions.created_at;
|
||
|
|
updatedSortDateTimeRef.value.searchMsg = bdCardMsgActive.sortOptions.updated_at;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dialogOperationVisible.value) {
|
||
|
|
}
|
||
|
|
}, 0);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|