You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
662 lines
18 KiB
Vue
662 lines
18 KiB
Vue
<template>
|
|
<!--我的职位-->
|
|
<div class="p-manage-myJob">
|
|
<div class="m-select g_flex_row_between g_pt_16">
|
|
<div class="g_flex_row_start">
|
|
<div class="g_w_320 g-search-btn g_mr_16">
|
|
<a-input-search v-model:value="tableData.keyword" placeholder="请输入姓名" @search="searchList" @change="handleChangeSearch" allowClear />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
|
|
<!-- <a-button type="primary" @click="openAdd" :icon="h(PlusOutlined)">新增用户</a-button> -->
|
|
<!-- <a-button type="" class="g_border_d g_ml_16" @click="handleToForm('add', { id: 0 })" :icon="h(DownloadOutlined)">导出模版</a-button> -->
|
|
<!--
|
|
<a-dropdown :trigger="['click']">
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item key="1" @click="goShareList">共享职位</a-menu-item>
|
|
<a-menu-item key="2" @click="handleToForm('add',{id:0})">自有职位</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
<a-button>
|
|
新增职位
|
|
<DownOutlined style="zoom:.8" />
|
|
</a-button>
|
|
</a-dropdown> -->
|
|
</div>
|
|
</div>
|
|
<div class="m-table g_mt_20 antd-table">
|
|
<a-table sticky :columns="columns" :scroll="{x:1000}" :data-source="tableData.records" size="middle" :pagination="false" :loading="tableData.loading" class="g_clear_scroll" style="max-width: calc(100% - 0px)">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'job'">
|
|
<!-- @click="goDetail(record)" -->
|
|
<div class="btn g_fs_14 g_cursor_point g_mr_13 g_flex_row_start">
|
|
<div class="g_ell_1">{{ "" }}</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="column.key === 'age'">
|
|
<div class="g_ell_1">{{ record.sex + " " + record.age }}</div>
|
|
</template>
|
|
<template v-if="column.key === 'price'">
|
|
<!-- <div v-html="record.price"></div> -->
|
|
</template>
|
|
<template v-if="column.key === 'status'">
|
|
<a-switch @change="(e) => handleStatus(e, record)" :checked="record.status == 1 ? true : false" checked-children="正常" un-checked-children="禁用" />
|
|
</template>
|
|
|
|
<template v-if="column.key === 'state'">
|
|
<div class="g_flex_row_between">
|
|
<!-- <div
|
|
class="btn g_fs_14 g_mr_13"
|
|
:class="'g_c_main g_cursor_point'"
|
|
:style="{
|
|
cursor: !record.statusBool ? 'not-allowed' : '',
|
|
color: !record.statusBool ? '#d8d8d8' : '#1677ff',
|
|
}"
|
|
@click="handleApplication(record)"
|
|
>
|
|
报名
|
|
</div> -->
|
|
<div class="btn g_c_main g_fs_14 g_cursor_point g_mr_13" @click="handleViewDetail(record)">预览</div>
|
|
|
|
<div class="btn g_c_main g_fs_14 g_cursor_point" @click="handleToForm('edit', record)">编辑</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<!-- <template #summary class="fixed-obj">
|
|
<div style="width: 70vw" class="g_pb_16 g_pt_16">
|
|
<a-table-summary fixed="bottom"> </a-table-summary>
|
|
</div>
|
|
</template> -->
|
|
</a-table>
|
|
<div class="g_pb_16 g_pt_16 g_pageBottom" v-if="tableData.records.length > 0">
|
|
<a-pagination v-model:current="tableData.page" v-model:page-size="tableData.size" :total="tableData.total" :pageSize="tableData.size" :show-total="(total) => `共 ${total} 条`" @change="handleModalPage" @showSizeChange="handleModalSize" :show-quick-jumper="tableData.total < tableData.size ? false : true" :showSizeChanger="tableData.total < tableData.size ? false : true" :hideOnSinglePage="false" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <a-modal v-model:open="modalInfo.isShow"
|
|
:title="modalInfo.title"
|
|
width="640px"
|
|
centered
|
|
:destroyOnClose="true"
|
|
:forceRender="true"
|
|
>
|
|
<div class="g_pt_30 modal-box">
|
|
<a-form :model="modalInfo.form"
|
|
name="basic"
|
|
:label-col="{ span: 6 }"
|
|
:wrapper-col="{ span: 18 }"
|
|
autocomplete="off"
|
|
style="width: 80%;"
|
|
class="g_ml_51"
|
|
>
|
|
<a-form-item label="职位要求标签" name="name" required>
|
|
<a-input style="width: 100%" placeholder="请输入职位要求标签" v-model:value="modalInfo.form.name" />
|
|
</a-form-item>
|
|
<a-form-item label="标签类型" name="typeClassify" required>
|
|
<a-select v-model:value="modalInfo.form.typeClassify"
|
|
:getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode"
|
|
placeholder="请选择职位分类"
|
|
@change="handleUpdateSelect"
|
|
>
|
|
<a-select-option v-for="item in typeClassifyList" :value="item.id" :title="item.id">{{ item.name }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="说明" name="desp">
|
|
<a-textarea :rows='6' style="width: 100%" placeholder="请输入职位说明" v-model:value="modalInfo.form.desp" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
<template #footer>
|
|
<a-button @click="modalInfo.isShow = false">关闭</a-button>
|
|
<a-button @click="submitForm" type="primary">确定</a-button>
|
|
</template>
|
|
</a-modal> -->
|
|
<a-modal destroyOnClose ref="modalRef" v-model:open="tableDetail.isShow" title="持股详情" width="1200px" :bodyStyle="{ 'border-radius': '4px'}">
|
|
<div class="g_pt_8 g_pb_16" style=" overflow-y: auto">
|
|
<div class="g_float_right">
|
|
<a href="//a.matripe.com.cn/api_stock/admin/user/stock/record/download">
|
|
<a-button class="g_mr_12">
|
|
<template #icon>
|
|
<DownloadOutlined />
|
|
</template>
|
|
导出模板
|
|
</a-button>
|
|
</a>
|
|
<a-upload :action="baseUrl + '/admin/user/stock/record/import'" :data="{userId}" accept=".xlsx, .xls, .xlsm, .xltx, .xltm" @change="getMoreInfo">
|
|
<a-button type="primary"><PlusOutlined />导入文件</a-button>
|
|
</a-upload>
|
|
</div>
|
|
<div class="g_float_none"></div>
|
|
|
|
<div class="g_mt_16 g_clear_scroll" style="max-height: calc(100vh - 464px); overflow-y: auto">
|
|
<a-table :columns="tableDetail.columns" :data-source="tableDetail.list" size="middle" :pagination="false">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'rank'">
|
|
<span>{{ record.rank }}</span>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
<div class="g_mt_20">
|
|
<a-pagination v-model:current="tableDetail.page" v-model:page-size="tableDetail.size" :total="tableDetail.count" :pageSize="tableDetail.size" :show-total="(total) => `共 ${total} 条`" @change="handleModalDetailPage" @showSizeChange="handleModalDetailSize" :show-quick-jumper="tableDetail.count < tableDetail.size ? false : true" :showSizeChanger="tableDetail.count < tableDetail.size ? false : true" :hideOnSinglePage="false" />
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<a-button @click="tableDetail.isShow = false" type="primary">确定</a-button>
|
|
</template>
|
|
</a-modal>
|
|
|
|
|
|
|
|
<a-modal v-model:open="showAdd" :title="modalInfo.title" style="width: 734px" :destroyOnClose="true">
|
|
<div class="g_pt_30 modal-box">
|
|
<a-form :model="modalInfo.form"
|
|
name="basic"
|
|
:label-col="{ span: 6 }"
|
|
:wrapper-col="{ span: 18 }"
|
|
autocomplete="off"
|
|
style="width: 80%;"
|
|
class="g_ml_51"
|
|
>
|
|
<a-form-item label="姓名" name="name" required>
|
|
<span class="ant-form-text">{{modalInfo.form.name}}</span>
|
|
<!-- <a-input style="width: 100%" placeholder="请输入姓名" v-model:value="modalInfo.form.name" /> -->
|
|
<!-- <a-select ref="select" v-model:value="modalInfo.form.name" placeholder="请选择用户" @focus="focus" @change="handleChange">
|
|
<a-select-option v-for="item in userList" :value="item.id" :title="item.id">{{ item.name }}</a-select-option>
|
|
</a-select> -->
|
|
</a-form-item>
|
|
<a-form-item label="持股数" name="num" required>
|
|
<a-input style="width: 100%" placeholder="请输入持股数" v-model:value="modalInfo.form.num" />
|
|
</a-form-item>
|
|
<a-form-item label="持股比例" name="percent" required>
|
|
<a-input style="width: 100%" placeholder="请输入持股比例" v-model:value="modalInfo.form.percent" />
|
|
</a-form-item>
|
|
<a-form-item label="持股价值（元）" name="amount" required>
|
|
<a-input style="width: 100%" placeholder="请输入持股价值" v-model:value="modalInfo.form.amount" />
|
|
</a-form-item>
|
|
|
|
<!-- <a-form-item label="备注" name="desp">
|
|
<a-textarea :rows='6' style="width: 100%" placeholder="请输入备注" v-model:value="modalInfo.form.description" />
|
|
</a-form-item> -->
|
|
</a-form>
|
|
</div>
|
|
<template #footer>
|
|
<a-button @click="showAdd = false" >关闭</a-button>
|
|
<a-button @click="submitForm" type="primary">确定</a-button>
|
|
</template>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import request from "../../utils/request"; // 引入基础路径
|
|
import { ref, onMounted, getCurrentInstance, h, watch } from "vue";
|
|
import { PlusOutlined, EllipsisOutlined, UploadOutlined, DownOutlined } from "@ant-design/icons-vue";
|
|
import { Modal, message } from "ant-design-vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { getUserListApi, updateUserStatusApi, addUserApi, delUserApi,updateUserStockApi,getStockUserListApi,addStockUserApi, getUserMoreListApi} from "../../api/userList/userList";
|
|
import { DownloadOutlined } from "@ant-design/icons-vue";
|
|
import idCardPanel from "../components/upload/image.vue";
|
|
|
|
/* #################### 初始化事件 #################### */
|
|
const router = useRouter(); // 应用路由
|
|
const route = useRoute();
|
|
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
|
|
const speed = ref(0);
|
|
const showAdd = ref(0);
|
|
const userList = ref([]);
|
|
const userId = ref(0);
|
|
let baseUrl = ref(request.userCustom);
|
|
|
|
const handleChange = value => {
|
|
console.log(`selected ${value}`);
|
|
modalInfo.value.form.userId = value
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
getTable();
|
|
});
|
|
|
|
const tableDetail = ref({
|
|
page: 1,
|
|
size: 50,
|
|
count: 0,
|
|
list: [],
|
|
speed: -1,
|
|
isShow: false,
|
|
keys: "",
|
|
columns: [],
|
|
pagination: {},
|
|
});
|
|
|
|
|
|
const handleViewDetail = (item) => {
|
|
// 打开明细弹窗
|
|
tableDetail.value = {
|
|
page: 1,
|
|
size: 20,
|
|
limit: 20,
|
|
count: 0,
|
|
list: [],
|
|
speed: -1,
|
|
isShow: true,
|
|
keys: "",
|
|
columns: [],
|
|
pagination: {},
|
|
};
|
|
userId.value = item.userId
|
|
|
|
// itemData.value = {
|
|
// userId: item.id,
|
|
// agencyTeamId: item.agencyTeamId,
|
|
// };
|
|
getModalDetail();
|
|
};
|
|
|
|
const getModalDetail = () => {
|
|
|
|
tableDetail.value.columns = [
|
|
{
|
|
title: "序号",
|
|
key: "rank",
|
|
dataIndex: "rank",
|
|
width: "50px",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "取得方式",
|
|
key: "sourceFrom",
|
|
dataIndex: "sourceFrom",
|
|
ellipsis: true,
|
|
minWidth: "100px",
|
|
},
|
|
{
|
|
title: "持股主体",
|
|
key: "name",
|
|
dataIndex: "name",
|
|
width: "240px",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "持股数量",
|
|
key: "num",
|
|
dataIndex: "num",
|
|
width: "200px",
|
|
ellipsis: true,
|
|
},
|
|
];
|
|
|
|
getUserMoreList();
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* 搜索事件
|
|
*/
|
|
const searchList = (e) => {
|
|
console.log("searchList", e);
|
|
tableData.value.page = 1;
|
|
getTable();
|
|
};
|
|
/* #################### 顶部事件 #################### */
|
|
const handleChangeSearch = (e) => {
|
|
if (tableData.value.keyword == "") {
|
|
getTable();
|
|
}
|
|
};
|
|
const modalInfo = ref({
|
|
title:'新增个人数据',
|
|
id:0,
|
|
form:{
|
|
name:null,
|
|
num:'',
|
|
percent:'',
|
|
amount:'',
|
|
}
|
|
})
|
|
|
|
|
|
const submitForm = ()=>{
|
|
let url = '',params = {};
|
|
|
|
console.log(userList.value);
|
|
console.log(modalInfo.value.form.userId);
|
|
// let obj = userList.value.find(item => item.id === modalInfo.value.form.userId)
|
|
|
|
// console.log(obj);
|
|
|
|
params = {
|
|
name:modalInfo.value.form.name,
|
|
num:modalInfo.value.form.num,
|
|
percent:modalInfo.value.form.percent,
|
|
amount:modalInfo.value.form.amount,
|
|
userId:modalInfo.value.form.userId,
|
|
id:modalInfo.value.id
|
|
}
|
|
|
|
if(modalInfo.value.id){
|
|
delete params.password;
|
|
updateUserStockApi(params).then((res)=>{
|
|
showAdd.value = false;
|
|
message.success("修改成功");
|
|
getTable();
|
|
});
|
|
}else{
|
|
addStockUserApi(params).then((res)=>{
|
|
showAdd.value = false;
|
|
message.success("新增成功");
|
|
getTable();
|
|
});
|
|
|
|
}
|
|
|
|
|
|
}
|
|
const handleToForm = ($type, $data) => {
|
|
showAdd.value = true;
|
|
console.log($data.id);
|
|
modalInfo.value = {
|
|
isShow:true,
|
|
title:'修改个人数据',
|
|
form:{
|
|
name:$data.name,
|
|
num:$data.num,
|
|
percent:$data.percent,
|
|
amount:$data.amount,
|
|
userId:$data.userId
|
|
},
|
|
id:$data.id
|
|
}
|
|
|
|
// updateUserApi({
|
|
// description: "测试备注",
|
|
// idcard: "123123123123123123",
|
|
// name: "测试真名",
|
|
// username: "13214534564",
|
|
// password: 123456,
|
|
// status: 0,
|
|
// username: "测试用户名",
|
|
// }).then(() => {
|
|
// message.success("新增成功");
|
|
// getTable();
|
|
// });
|
|
// if ($data.id > 0) {
|
|
// router.push({
|
|
// path: "/merchantManagement/jobForm",
|
|
// query: {
|
|
// id: $data.id ? $data.id : 0,
|
|
// type: $type,
|
|
// templateId: $data.templateId ? $data.templateId : 0,
|
|
// },
|
|
// });
|
|
// } else {
|
|
// router.push({
|
|
// path: "/merchantManagement/jobForm",
|
|
// query: {
|
|
// id: $data.id ? $data.id : 0,
|
|
// type: $type,
|
|
// },
|
|
// });
|
|
// }
|
|
};
|
|
|
|
|
|
|
|
/* #################### 表格事件 #################### */
|
|
const tableData = ref({
|
|
keyword: "",
|
|
page: 1,
|
|
limit: 20,
|
|
total: 0,
|
|
count: 0,
|
|
loading: false,
|
|
records: [],
|
|
jobType2Num: "-",
|
|
jobType1Num: "-",
|
|
});
|
|
const getTable = () => {
|
|
console.log(tableData.value);
|
|
tableData.value.loading = true;
|
|
getStockUserListApi({ limit: tableData.value.limit, page: tableData.value.page, keyword: tableData.value.keyword }).then((res) => {
|
|
console.log(res);
|
|
tableData.value = { ...res.data, keyword: tableData.value.keyword, page: res.data.current, limit: res.data.size };
|
|
tableData.value.records.forEach((item, index) => {
|
|
item.rank = index + 1;
|
|
});
|
|
});
|
|
};
|
|
const openAdd = () =>{
|
|
showAdd.value = true
|
|
modalInfo.value.id = 0;
|
|
modalInfo.value = {
|
|
title:"新增个人数据",
|
|
form:{
|
|
name:null,
|
|
username:'',
|
|
idcard:'',
|
|
description:''
|
|
}
|
|
}
|
|
|
|
getUserListApi({ limit:100, page: 1, keyword:""}).then((res)=>{
|
|
userList.value = res.data.records
|
|
// modalInfo.value.name = res.data.records[0].name
|
|
console.log(res);
|
|
});
|
|
};
|
|
const columns = ref([
|
|
{
|
|
title: "序号",
|
|
key: "rank",
|
|
dataIndex: "rank",
|
|
width: "50px",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "姓名",
|
|
key: "name",
|
|
dataIndex: "name",
|
|
},
|
|
|
|
{
|
|
title: "持股数",
|
|
key: "num",
|
|
dataIndex: "num",
|
|
ellipsis: true,
|
|
width: "240px",
|
|
},
|
|
{
|
|
title: "持股比例",
|
|
key: "percent",
|
|
dataIndex: "percent",
|
|
width: "240px",
|
|
ellipsis: true,
|
|
customRender: (record) => {
|
|
return record.record.percent ? record.record.percent : '-';
|
|
},
|
|
},
|
|
|
|
{
|
|
title: "持股价值（元）",
|
|
key: "amount",
|
|
dataIndex: "amount",
|
|
ellipsis: true,
|
|
width: "240px",
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "state",
|
|
dataIndex: "state",
|
|
width: "90px",
|
|
ellipsis: true,
|
|
},
|
|
]);
|
|
/**
|
|
* 切换用户状态
|
|
*/
|
|
const handleStatus = (e, $data) => {
|
|
updateUserStatusApi({ id: $data.id, status: e ? 1 : 0 }).then(() => {
|
|
message.success("更新成功");
|
|
getTable();
|
|
});
|
|
};
|
|
const addInfo = ref({});
|
|
|
|
const goDetail = ($item) => {
|
|
console.log($item);
|
|
// 前往详情页
|
|
if ($item.jobType == 1) {
|
|
// 共享
|
|
router.push({
|
|
path: "/merchantManagement/shareJobDetail",
|
|
query: {
|
|
id: $item.templateId,
|
|
shared: $item.shared,
|
|
form: "joblist",
|
|
},
|
|
});
|
|
} else {
|
|
// 自有
|
|
router.push({
|
|
path: "/merchantManagement/jobDetail",
|
|
query: {
|
|
id: $item.id,
|
|
},
|
|
});
|
|
}
|
|
};
|
|
const handleApplication = (record) => {
|
|
console.log(record);
|
|
if (!record.statusBool) {
|
|
return false;
|
|
}
|
|
// 报名事件
|
|
router.push({
|
|
path: "/merchantManagement/recordJob",
|
|
query: {
|
|
company: record.boss,
|
|
job: record.job,
|
|
jobId: record.id,
|
|
templateId: record.templateId,
|
|
jobType: record.jobType,
|
|
},
|
|
});
|
|
};
|
|
|
|
|
|
const handleDel = ($data) => {
|
|
commonJS.gConfirmModal(
|
|
"删除",
|
|
"确认删除该用户吗？",
|
|
() => {
|
|
delUserApi($data.id).then(() => {
|
|
message.success("删除成功");
|
|
getTable();
|
|
});
|
|
},
|
|
() => {}
|
|
);
|
|
};
|
|
|
|
/* #################### 分页器事件 #################### */
|
|
const handleModalPage = ($page, $size) => {
|
|
// 监听明细页码
|
|
console.log($page);
|
|
console.log($size);
|
|
tableData.value.page = $page;
|
|
getTable();
|
|
};
|
|
const handleModalSize = ($page, $size) => {
|
|
// 监听明细size
|
|
tableData.value.page = 1;
|
|
tableData.value.size = $size;
|
|
getTable();
|
|
};
|
|
/* #################### 分页器事件 #################### */
|
|
const handleModalDetailPage = ($page, $size) => {
|
|
// 监听明细页码
|
|
console.log($page);
|
|
console.log($size);
|
|
tableDetail.value.page = $page;
|
|
getUserMoreList();
|
|
};
|
|
const handleModalDetailSize = ($page, $size) => {
|
|
// 监听明细size
|
|
tableDetail.value.page = 1;
|
|
tableDetail.value.size = $size;
|
|
getUserMoreList();
|
|
};
|
|
|
|
/**
|
|
* 获取持股列表
|
|
*/
|
|
const getUserMoreList = () => {
|
|
getUserMoreListApi({ limit: tableDetail.value.limit, page: tableDetail.value.page, userId: userId.value }).then((res) => {
|
|
console.log(res);
|
|
|
|
// tableDetail.value = { ...res.data, keyword: tableData.value.keyword, page: res.data.current, limit: res.data.size };
|
|
tableDetail.value.list = res.data.records
|
|
tableDetail.value.count = res.data.total
|
|
tableDetail.value.list.forEach((item, index) => {
|
|
item.rank = index + 1;
|
|
});
|
|
// stockMoreList.value = res.data;
|
|
// stockMoreList.value.forEach((item, index) => {
|
|
// item.rank = index + 1;
|
|
// });
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 上传持股文件
|
|
*/
|
|
const getMoreInfo = (info) => {
|
|
console.log(info);
|
|
if (info.file.response) {
|
|
if (info.file.response.code == 200) {
|
|
getUserMoreList();
|
|
message.success("操作成功");
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="less">
|
|
|
|
.ant-table-cell:empty::before{
|
|
content: "-";
|
|
}
|
|
.p-manage-myJob {
|
|
position: relative;
|
|
min-height: calc(100vh - 213px);
|
|
width: 100%;
|
|
height: 100px;
|
|
.btn-active {
|
|
width: 40px;
|
|
height: 24px;
|
|
margin-left: 6.5px;
|
|
font-size: 12px;
|
|
color: #f6343e;
|
|
background-color: #fff3f3;
|
|
padding: 1px 3px;
|
|
zoom: 0.6;
|
|
margin-top: 8px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.ant-spin-blur .ant-empty {
|
|
opacity: 0;
|
|
}
|
|
</style>
|