192 changed files with 43814 additions and 10497 deletions
@ -0,0 +1,196 @@ |
|||||||
|
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage' |
||||||
|
|
||||||
|
//首页统计
|
||||||
|
const getBuyAndSaleStatistics = (params)=>getAction("/erp/depotHead/getBuyAndSaleStatistics",params); |
||||||
|
const buyOrSalePrice = (params)=>getAction("/erp/depotItem/buyOrSalePrice",params); |
||||||
|
//租户管理
|
||||||
|
const checkTenant = (params)=>getAction("/erp/tenant/checkIsNameExist",params); |
||||||
|
const editTenant = (params)=>putAction("/erp/tenant/update",params); |
||||||
|
//角色管理
|
||||||
|
const addRole = (params)=>postAction("/erp/role/add",params); |
||||||
|
const editRole = (params)=>putAction("/erp/role/update",params); |
||||||
|
const checkRole = (params)=>getAction("/erp/role/checkIsNameExist",params); |
||||||
|
const roleAllList = (params)=>getAction("/erp/role/allList",params); |
||||||
|
//用户管理
|
||||||
|
const registerUser = (params)=>postAction("/erp/user/registerUser",params); |
||||||
|
const addUser = (params)=>postAction("/erp/user/addUser",params); |
||||||
|
const editUser = (params)=>putAction("/erp/user/updateUser",params); |
||||||
|
const getUserList = (params)=>getAction("/erp/user/getUserList",params); |
||||||
|
const queryPermissionsByUser = (params)=>postAction("/erp/function/findMenuByPNumber",params); |
||||||
|
//机构管理
|
||||||
|
const queryOrganizationTreeList = (params)=>getAction("/erp/organization/getOrganizationTree",params); |
||||||
|
const queryOrganizationById = (params)=>getAction("/erp/organization/findById",params); |
||||||
|
const checkOrganization = (params)=>getAction("/erp/organization/checkIsNameExist",params); |
||||||
|
//经手人管理
|
||||||
|
const addPerson = (params)=>postAction("/erp/person/add",params); |
||||||
|
const editPerson = (params)=>putAction("/erp/person/update",params); |
||||||
|
const checkPerson = (params)=>getAction("/erp/person/checkIsNameExist",params); |
||||||
|
const getPersonByType = (params)=>getAction("/erp/person/getPersonByType",params); |
||||||
|
const getPersonByNumType = (params)=>getAction("/erp/person/getPersonByNumType",params); |
||||||
|
//账户管理
|
||||||
|
const addAccount = (params)=>postAction("/erp/account/add",params); |
||||||
|
const editAccount = (params)=>putAction("/erp/account/update",params); |
||||||
|
const checkAccount = (params)=>getAction("/erp/account/checkIsNameExist",params); |
||||||
|
const getAccount = (params)=>getAction("/erp/account/getAccount",params); |
||||||
|
//收支项目
|
||||||
|
const addInOutItem = (params)=>postAction("/erp/inOutItem/add",params); |
||||||
|
const editInOutItem = (params)=>putAction("/erp/inOutItem/update",params); |
||||||
|
const checkInOutItem = (params)=>getAction("/erp/inOutItem/checkIsNameExist",params); |
||||||
|
const findInOutItemByParam = (params)=>getAction("/erp/inOutItem/findBySelect",params); |
||||||
|
//仓库信息
|
||||||
|
const addDepot = (params)=>postAction("/erp/depot/add",params); |
||||||
|
const editDepot = (params)=>putAction("/erp/depot/update",params); |
||||||
|
const checkDepot = (params)=>getAction("/erp/depot/checkIsNameExist",params); |
||||||
|
//商品属性
|
||||||
|
const editMaterialProperty = (params)=>putAction("/erp/materialProperty/update",params); |
||||||
|
//商品类型
|
||||||
|
const queryMaterialCategoryTreeList = (params)=>getAction("/erp/materialCategory/getMaterialCategoryTree",params); |
||||||
|
const queryMaterialCategoryById = (params)=>getAction("/erp/materialCategory/findById",params); |
||||||
|
const checkMaterialCategory = (params)=>getAction("/erp/materialCategory/checkIsNameExist",params); |
||||||
|
//商品管理
|
||||||
|
const addMaterial = (params)=>postAction("/erp/material/add",params); |
||||||
|
const editMaterial = (params)=>putAction("/erp/material/update",params); |
||||||
|
const checkMaterial = (params)=>getAction("/erp/material/checkIsExist",params); |
||||||
|
const getMaterialBySelect = (params)=>getAction("/erp/material/findBySelect",params); |
||||||
|
const getSerialMaterialBySelect = (params)=>getAction("/erp/material/getMaterialEnableSerialNumberList",params); |
||||||
|
const getMaterialByBarCode = (params)=>getAction("/erp/material/getMaterialByBarCode",params); |
||||||
|
const getMaxBarCode = (params)=>getAction("/erp/material/getMaxBarCode",params); |
||||||
|
const checkMaterialBarCode = (params)=>getAction("/erp/materialsExtend/checkIsBarCodeExist",params); |
||||||
|
//序列号
|
||||||
|
const addSerialNumber = (params)=>postAction("/erp/serialNumber/add",params); |
||||||
|
const editSerialNumber = (params)=>putAction("/erp/serialNumber/update",params); |
||||||
|
const checkSerialNumber = (params)=>getAction("/erp/serialNumber/checkIsNameExist",params); |
||||||
|
const batAddSerialNumber = (params)=>postAction("/erp/serialNumber/batAddSerialNumber",params); |
||||||
|
const getEnableSerialNumberList = (params)=>getAction("/erp/serialNumber/getEnableSerialNumberList",params); |
||||||
|
//多属性
|
||||||
|
const addMaterialAttribute = (params)=>postAction("/erp/materialAttribute/add",params); |
||||||
|
const editMaterialAttribute = (params)=>putAction("/erp/materialAttribute/update",params); |
||||||
|
const checkMaterialAttribute = (params)=>getAction("/erp/materialAttribute/checkIsNameExist",params); |
||||||
|
const getAllMaterialAttribute = (params)=>getAction("/erp/materialAttribute/getAll",params); |
||||||
|
//功能管理
|
||||||
|
const addFunction = (params)=>postAction("/erp/function/add",params); |
||||||
|
const editFunction = (params)=>putAction("/erp/function/update",params); |
||||||
|
const checkFunction = (params)=>getAction("/erp/function/checkIsNameExist",params); |
||||||
|
//系统配置
|
||||||
|
const addSystemConfig = (params)=>postAction("/erp/systemConfig/add",params); |
||||||
|
const editSystemConfig = (params)=>putAction("/erp/systemConfig/update",params); |
||||||
|
const checkSystemConfig = (params)=>getAction("/erp/systemConfig/checkIsNameExist",params); |
||||||
|
const getCurrentSystemConfig = (params)=>getAction("/erp/systemConfig/getCurrentInfo",params); |
||||||
|
const fileSizeLimit = (params)=>getAction("/erp/systemConfig/fileSizeLimit",params); |
||||||
|
//平台参数
|
||||||
|
const addPlatformConfig = (params)=>postAction("/erp/platformConfig/add",params); |
||||||
|
const editPlatformConfig = (params)=>putAction("/erp/platformConfig/update",params); |
||||||
|
const getPlatformConfigByKey = (params)=>getAction("/erp/platformConfig/getPlatformConfigByKey",params); |
||||||
|
//用户|角色|模块关系
|
||||||
|
const addUserBusiness = (params)=>postAction("/erp/userBusiness/add",params); |
||||||
|
const editUserBusiness = (params)=>putAction("/erp/userBusiness/update",params); |
||||||
|
const checkUserBusiness = (params)=>getAction("/erp/userBusiness/checkIsValueExist",params); |
||||||
|
const updateBtnStrByRoleId = (params)=>postAction("/erp/userBusiness/updateBtnStr",params); |
||||||
|
//计量单位
|
||||||
|
const addUnit = (params)=>postAction("/erp/unit/add",params); |
||||||
|
const editUnit = (params)=>putAction("/erp/unit/update",params); |
||||||
|
const checkUnit = (params)=>getAction("/erp/unit/checkIsNameExist",params); |
||||||
|
//供应商|客户|会员
|
||||||
|
const addSupplier = (params)=>postAction("/erp/supplier/add",params); |
||||||
|
const editSupplier = (params)=>putAction("/erp/supplier/update",params); |
||||||
|
const checkSupplier = (params)=>getAction("/erp/supplier/checkIsNameAndTypeExist",params); |
||||||
|
const findBySelectSup = (params)=>postAction("/erp/supplier/findBySelect_sup",params); |
||||||
|
const findBySelectCus = (params)=>postAction("/erp/supplier/findBySelect_cus",params); |
||||||
|
const findBySelectRetail = (params)=>postAction("/erp/supplier/findBySelect_retail",params); |
||||||
|
const findBySelectOrgan = (params)=>postAction("/erp/supplier/findBySelect_organ",params); |
||||||
|
//单据相关
|
||||||
|
const findBillDetailByNumber = (params)=>getAction("/erp/depotHead/getDetailByNumber",params); |
||||||
|
const findStockByDepotAndBarCode = (params)=>getAction("/erp/depotItem/findStockByDepotAndBarCode",params); |
||||||
|
const getBatchNumberList = (params)=>getAction("/erp/depotItem/getBatchNumberList",params); |
||||||
|
const findFinancialDetailByNumber = (params)=>getAction("/erp/accountHead/getDetailByNumber",params); |
||||||
|
|
||||||
|
//租户信息
|
||||||
|
const getAlltenantInfo = (params)=>getAction("/erp/tenant/listAllTenant",params); |
||||||
|
export { |
||||||
|
getBuyAndSaleStatistics, |
||||||
|
buyOrSalePrice, |
||||||
|
checkTenant, |
||||||
|
editTenant, |
||||||
|
addRole, |
||||||
|
editRole, |
||||||
|
checkRole, |
||||||
|
roleAllList, |
||||||
|
registerUser, |
||||||
|
addUser, |
||||||
|
editUser, |
||||||
|
getUserList, |
||||||
|
queryPermissionsByUser, |
||||||
|
queryOrganizationTreeList, |
||||||
|
queryOrganizationById, |
||||||
|
checkOrganization, |
||||||
|
addPerson, |
||||||
|
editPerson, |
||||||
|
checkPerson, |
||||||
|
getPersonByType, |
||||||
|
getPersonByNumType, |
||||||
|
addAccount, |
||||||
|
editAccount, |
||||||
|
checkAccount, |
||||||
|
getAccount, |
||||||
|
addInOutItem, |
||||||
|
editInOutItem, |
||||||
|
checkInOutItem, |
||||||
|
findInOutItemByParam, |
||||||
|
addDepot, |
||||||
|
editDepot, |
||||||
|
checkDepot, |
||||||
|
editMaterialProperty, |
||||||
|
queryMaterialCategoryTreeList, |
||||||
|
queryMaterialCategoryById, |
||||||
|
checkMaterialCategory, |
||||||
|
addMaterial, |
||||||
|
editMaterial, |
||||||
|
checkMaterial, |
||||||
|
getMaterialBySelect, |
||||||
|
getSerialMaterialBySelect, |
||||||
|
getMaterialByBarCode, |
||||||
|
getMaxBarCode, |
||||||
|
checkMaterialBarCode, |
||||||
|
addSerialNumber, |
||||||
|
editSerialNumber, |
||||||
|
checkSerialNumber, |
||||||
|
batAddSerialNumber, |
||||||
|
getEnableSerialNumberList, |
||||||
|
addMaterialAttribute, |
||||||
|
editMaterialAttribute, |
||||||
|
checkMaterialAttribute, |
||||||
|
getAllMaterialAttribute, |
||||||
|
addFunction, |
||||||
|
editFunction, |
||||||
|
checkFunction, |
||||||
|
addSystemConfig, |
||||||
|
editSystemConfig, |
||||||
|
checkSystemConfig, |
||||||
|
getCurrentSystemConfig, |
||||||
|
fileSizeLimit, |
||||||
|
addPlatformConfig, |
||||||
|
editPlatformConfig, |
||||||
|
getPlatformConfigByKey, |
||||||
|
addUserBusiness, |
||||||
|
editUserBusiness, |
||||||
|
checkUserBusiness, |
||||||
|
updateBtnStrByRoleId, |
||||||
|
addUnit, |
||||||
|
editUnit, |
||||||
|
checkUnit, |
||||||
|
addSupplier, |
||||||
|
editSupplier, |
||||||
|
checkSupplier, |
||||||
|
findBySelectSup, |
||||||
|
findBySelectCus, |
||||||
|
findBySelectRetail, |
||||||
|
findBySelectOrgan, |
||||||
|
findBillDetailByNumber, |
||||||
|
findStockByDepotAndBarCode, |
||||||
|
getBatchNumberList, |
||||||
|
findFinancialDetailByNumber, |
||||||
|
getAlltenantInfo |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,273 @@ |
|||||||
|
.area-zoom-in-top-enter-active, |
||||||
|
.area-zoom-in-top-leave-active { |
||||||
|
opacity: 1; |
||||||
|
transform: scaleY(1); |
||||||
|
} |
||||||
|
|
||||||
|
.area-zoom-in-top-enter, |
||||||
|
.area-zoom-in-top-leave-active { |
||||||
|
opacity: 0; |
||||||
|
transform: scaleY(0); |
||||||
|
} |
||||||
|
|
||||||
|
.area-select { |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
font-size: 14px; |
||||||
|
font-variant: tabular-nums; |
||||||
|
line-height: 1.5; |
||||||
|
list-style: none; |
||||||
|
font-feature-settings: 'tnum'; |
||||||
|
position: relative; |
||||||
|
outline: 0; |
||||||
|
display: block; |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid #d9d9d9; |
||||||
|
border-top-width: 1.02px; |
||||||
|
border-radius: 4px; |
||||||
|
outline: none; |
||||||
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
||||||
|
-webkit-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select-wrap .area-select { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select * { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select:hover { |
||||||
|
border-color: #40a9ff; |
||||||
|
border-right-width: 1px !important; |
||||||
|
outline: 0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.area-select:active { |
||||||
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
.area-select.small { |
||||||
|
width: 126px; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select.medium { |
||||||
|
width: 160px; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select.large { |
||||||
|
width: 194px; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select.is-disabled { |
||||||
|
background: #eceff5; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select.is-disabled:hover { |
||||||
|
border-color: #e1e2e6; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select.is-disabled .area-selected-trigger { |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select .area-selected-trigger { |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
margin: 0; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
height: 100%; |
||||||
|
padding: 8px 20px 7px 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select .area-select-icon { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
margin-top: -2px; |
||||||
|
right: 6px; |
||||||
|
content: ""; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
border: 6px solid transparent; |
||||||
|
border-top-color: rgba(0, 0, 0, 0.25); |
||||||
|
transition: all .3s linear; |
||||||
|
transform-origin: center; |
||||||
|
} |
||||||
|
|
||||||
|
.area-select .area-select-icon.active { |
||||||
|
margin-top: -8px; |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
|
||||||
|
.area-selectable-list-wrap { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
max-height: 275px; |
||||||
|
z-index: 15000; |
||||||
|
background-color: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow-x: auto; |
||||||
|
margin: 2px 0; |
||||||
|
border-radius: 4px; |
||||||
|
outline: none; |
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
||||||
|
|
||||||
|
transition: opacity 0.15s, transform 0.3s !important; |
||||||
|
transform-origin: center top !important; |
||||||
|
} |
||||||
|
|
||||||
|
.area-selectable-list { |
||||||
|
position: relative; |
||||||
|
margin: 0; |
||||||
|
padding: 6px 0; |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
color: #565656; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.area-selectable-list .area-select-option { |
||||||
|
position: relative; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
cursor: pointer; |
||||||
|
padding: 0 15px 0 10px; |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.area-selectable-list .area-select-option.hover { |
||||||
|
background-color: #e6f7ff; |
||||||
|
} |
||||||
|
|
||||||
|
.area-selectable-list .area-select-option.selected { |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
font-weight: 600; |
||||||
|
background-color: #efefef; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list-wrap { |
||||||
|
position: absolute; |
||||||
|
white-space: nowrap; |
||||||
|
z-index: 15000; |
||||||
|
background-color: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
font-size: 0; |
||||||
|
margin: 2px 0; |
||||||
|
border-radius: 4px; |
||||||
|
outline: none; |
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
||||||
|
|
||||||
|
transition: opacity 0.15s, transform 0.3s !important; |
||||||
|
transform-origin: center top !important; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list { |
||||||
|
position: relative; |
||||||
|
margin: 0; |
||||||
|
font-size: 14px; |
||||||
|
color: #565656; |
||||||
|
padding: 6px 0; |
||||||
|
list-style: none; |
||||||
|
display: inline-block; |
||||||
|
height: 204px; |
||||||
|
overflow-x: hidden; |
||||||
|
overflow-y: auto; |
||||||
|
min-width: 160px; |
||||||
|
vertical-align: top; |
||||||
|
background-color: #fff; |
||||||
|
border-right: 1px solid #e4e7ed; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list:last-child { |
||||||
|
border-right: none; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list .cascader-menu-option { |
||||||
|
position: relative; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
cursor: pointer; |
||||||
|
padding: 0 15px 0 10px; |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list .cascader-menu-option.hover, |
||||||
|
.cascader-menu-list .cascader-menu-option:hover { |
||||||
|
background-color: #e6f7ff; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list .cascader-menu-option.selected { |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
font-weight: 600; |
||||||
|
background-color: #efefef; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
margin-top: -4px; |
||||||
|
right: 5px; |
||||||
|
content: ""; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
border: 4px solid transparent; |
||||||
|
border-left-color: #a1a4ad; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list::-webkit-scrollbar, |
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar { |
||||||
|
width: 8px; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen, |
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement, |
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment, |
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment, |
||||||
|
.cascader-menu-list::-webkit-scrollbar-button:vertical:decremen, |
||||||
|
.cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement, |
||||||
|
.cascader-menu-list::-webkit-scrollbar-button:vertical:increment, |
||||||
|
.cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list::-webkit-scrollbar-thumb:vertical, |
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical { |
||||||
|
background-color: #b8b8b8; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover, |
||||||
|
.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover { |
||||||
|
background-color: #777; |
||||||
|
} |
||||||
|
|
||||||
|
.resize-table-th { |
||||||
|
position: relative; |
||||||
|
.table-draggable-handle { |
||||||
|
transform: none !important; |
||||||
|
position: absolute; |
||||||
|
height: 100% !important; |
||||||
|
bottom: 0; |
||||||
|
left: auto !important; |
||||||
|
right: -5px; |
||||||
|
cursor: col-resize; |
||||||
|
touch-action: none; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,15 @@ |
|||||||
|
/** [表格主题样式一] 表格强制列不换行 */ |
||||||
|
.j-table-force-nowrap { |
||||||
|
td, th { |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.ant-table-selection-column { |
||||||
|
padding: 12px 22px !important; |
||||||
|
} |
||||||
|
|
||||||
|
/** 列自适应,弊端会导致列宽失效 */ |
||||||
|
&.ant-table-wrapper .ant-table-content { |
||||||
|
overflow-x: auto; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,74 @@ |
|||||||
|
/*列表上方操作按钮区域*/ |
||||||
|
.ant-card-body .table-operator { |
||||||
|
margin-bottom: 0px; |
||||||
|
} |
||||||
|
/** Button按钮间距 */ |
||||||
|
.table-operator .ant-btn { |
||||||
|
margin: 0 8px 8px 0; |
||||||
|
} |
||||||
|
.table-operator .ant-btn-group .ant-btn { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.table-operator .ant-btn-group .ant-btn:last-child { |
||||||
|
margin: 0 8px 8px 0; |
||||||
|
} |
||||||
|
/*列表td的padding设置 可以控制列表大小*/ |
||||||
|
.ant-table-tbody .ant-table-row td { |
||||||
|
padding-top: 15px; |
||||||
|
padding-bottom: 15px; |
||||||
|
} |
||||||
|
/*列表页面弹出modal*/ |
||||||
|
.ant-modal-cust-warp { |
||||||
|
height: 100% |
||||||
|
} |
||||||
|
/*弹出modal Y轴滚动条*/ |
||||||
|
.ant-modal-cust-warp .ant-modal-body { |
||||||
|
padding: 24px 24px 12px 24px; |
||||||
|
height: calc(100% - 110px) !important; |
||||||
|
overflow-y: auto |
||||||
|
} |
||||||
|
/*弹出modal 先有content后有body 故滚动条控制在body上*/ |
||||||
|
.ant-modal-cust-warp .ant-modal-content { |
||||||
|
height: 90%; |
||||||
|
overflow-y: hidden |
||||||
|
} |
||||||
|
/*文本框样式*/ |
||||||
|
.ant-modal-cust-warp .ant-form-item { |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
/*商品-列表页面弹出modal*/ |
||||||
|
.ant-modal-material-warp { |
||||||
|
height: 100% |
||||||
|
} |
||||||
|
/*商品-弹出modal Y轴滚动条*/ |
||||||
|
.ant-modal-material-warp .ant-modal-body { |
||||||
|
padding: 12px 24px 12px 24px; |
||||||
|
height: calc(100% - 110px) !important; |
||||||
|
overflow-y: auto |
||||||
|
} |
||||||
|
/*商品-弹出modal 先有content后有body 故滚动条控制在body上*/ |
||||||
|
.ant-modal-material-warp .ant-modal-content { |
||||||
|
height: 90%; |
||||||
|
overflow-y: hidden |
||||||
|
} |
||||||
|
/*商品-文本框样式*/ |
||||||
|
.ant-modal-material-warp .ant-form-item { |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
/*列表中有图片的加这个样式 参考用户管理*/ |
||||||
|
.anty-img-wrap { |
||||||
|
height: 25px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.anty-img-wrap > img { |
||||||
|
max-height: 100%; |
||||||
|
} |
||||||
|
/*列表中范围查询样式*/ |
||||||
|
.query-group-cust{width: calc(50% - 10px)} |
||||||
|
.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center} |
||||||
|
/*erp风格子表外框padding设置*/ |
||||||
|
.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px} |
||||||
|
/* 内嵌子表背景颜色 */ |
||||||
|
.j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row { |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
@ -0,0 +1,29 @@ |
|||||||
|
/** |
||||||
|
* 列表查询通用样式,移动端自适应 |
||||||
|
*/ |
||||||
|
.search{ |
||||||
|
margin-bottom: 54px; |
||||||
|
} |
||||||
|
.fold{ |
||||||
|
width: calc(100% - 216px); |
||||||
|
display: inline-block |
||||||
|
} |
||||||
|
.operator{ |
||||||
|
margin-bottom: 18px; |
||||||
|
} |
||||||
|
@media screen and (max-width: 900px) { |
||||||
|
.fold { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.operator button { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
i { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.trcolor{ |
||||||
|
background-color: rgba(255, 192, 203, 0.31); |
||||||
|
color:red; |
||||||
|
} |
||||||
|
|
@ -0,0 +1,36 @@ |
|||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Ellipsis', |
||||||
|
props: { |
||||||
|
prefixCls: { |
||||||
|
type: String, |
||||||
|
default: 'ant-pro-ellipsis' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
}, |
||||||
|
length: { |
||||||
|
type: Number, |
||||||
|
default: 25, |
||||||
|
}, |
||||||
|
lines: { |
||||||
|
type: Number, |
||||||
|
default: 1 |
||||||
|
}, |
||||||
|
fullWidthRecognition: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: {}, |
||||||
|
render() { |
||||||
|
const { tooltip, length } = this.$props |
||||||
|
let text = '' |
||||||
|
// 处理没有default插槽时的特殊情况 |
||||||
|
if (this.$slots.default) { |
||||||
|
text = this.$slots.default.map(vNode => vNode.text).join('') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,3 @@ |
|||||||
|
import Ellipsis from './Ellipsis' |
||||||
|
|
||||||
|
export default Ellipsis |
@ -0,0 +1,135 @@ |
|||||||
|
<template> |
||||||
|
<a-popover title="自定义列" trigger="click" placement="leftBottom"> |
||||||
|
<template slot="content"> |
||||||
|
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" |
||||||
|
:defaultValue="settingColumns" style="width: 400px;" > |
||||||
|
<a-row> |
||||||
|
<template v-for="(item,index) in defColumns_"> |
||||||
|
<template v-if="!ignoreColumns.includes(item.key) && !ignoreColumns.includes(item.dataIndex)"> |
||||||
|
<a-col :span="12"><a-checkbox :value="item.dataIndex" >{{ item.title }}</a-checkbox></a-col> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</a-row> |
||||||
|
</a-checkbox-group> |
||||||
|
</template> |
||||||
|
<a-button type="link" icon="setting">自定义列</a-button> |
||||||
|
</a-popover> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Vue from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ListColumnsSetter", |
||||||
|
|
||||||
|
props: { |
||||||
|
columns:{ |
||||||
|
type:Array, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
defColumns:{ |
||||||
|
type:Array, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
ignoreColumns:{ |
||||||
|
type: Array, |
||||||
|
default: () => ['rowIndex', 'action', 'flag'] |
||||||
|
}, |
||||||
|
listName:{ |
||||||
|
type:String, |
||||||
|
default: '', |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
model: { |
||||||
|
prop: 'columns', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
defColumns_: [], |
||||||
|
settingColumns:[] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
ls_key() { return this.$route.name + '/' + this.listName + ':colsettings'}, |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.defColumns_.push(...this.defColumns); |
||||||
|
this.initColumns(); |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
initColumns(){ |
||||||
|
//权限过滤(列权限控制时打开,修改第二个参数为授权码前缀) |
||||||
|
//this.defColumns_ = colAuthFilter(this.defColumns_,'testdemo:'); |
||||||
|
|
||||||
|
console.log(this.ls_key) |
||||||
|
let colSettings = Vue.ls.get(this.ls_key); |
||||||
|
let columns = []; |
||||||
|
if(colSettings===null||colSettings===undefined){ |
||||||
|
let allSettingColumns = []; |
||||||
|
this.defColumns_.forEach(function (item,i,array ) { |
||||||
|
allSettingColumns.push(item.dataIndex); |
||||||
|
}) |
||||||
|
this.settingColumns = allSettingColumns; |
||||||
|
columns = this.defColumns_; |
||||||
|
} else { |
||||||
|
this.settingColumns = colSettings; |
||||||
|
//默认隐藏列 |
||||||
|
// this.settingColumns.forEach((item,index) => { |
||||||
|
// if(item == "model") { |
||||||
|
// this.settingColumns.splice(index,1) |
||||||
|
// } |
||||||
|
// if(item == "color") { |
||||||
|
// this.settingColumns.splice(index,1) |
||||||
|
// } |
||||||
|
// if(item == "categoryName") { |
||||||
|
// this.settingColumns.splice(index,1) |
||||||
|
// } |
||||||
|
// if(item == "materialOther") { |
||||||
|
// this.settingColumns.splice(index,1) |
||||||
|
// } |
||||||
|
// if(item == "commodityDecimal") { |
||||||
|
// this.settingColumns.splice(index,1) |
||||||
|
// } |
||||||
|
// if(item == "lowDecimal") { |
||||||
|
// this.settingColumns.splice(index,1) |
||||||
|
// } |
||||||
|
// }) |
||||||
|
columns = this.defColumns_.filter(item => { |
||||||
|
if(this.ignoreColumns.includes(item.key) || this.ignoreColumns.includes(item.dataIndex)){ |
||||||
|
return true; |
||||||
|
} |
||||||
|
if (colSettings.includes(item.dataIndex)) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
return false; |
||||||
|
}) |
||||||
|
} |
||||||
|
this.$emit('change', columns); |
||||||
|
}, |
||||||
|
|
||||||
|
//列设置更改事件 |
||||||
|
onColSettingsChange (checkedValues) { |
||||||
|
console.log("checkedValues",checkedValues); |
||||||
|
Vue.ls.set(this.ls_key, checkedValues, 7*24*60*60*1000) |
||||||
|
this.settingColumns = checkedValues; |
||||||
|
const columns = this.defColumns_.filter(item => { |
||||||
|
if(this.ignoreColumns.includes(item.key) || this.ignoreColumns.includes(item.dataIndex)){ |
||||||
|
return true |
||||||
|
} |
||||||
|
if (this.settingColumns.includes(item.dataIndex)) { |
||||||
|
return true |
||||||
|
} |
||||||
|
return false |
||||||
|
}) |
||||||
|
this.$emit('change', columns); |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,155 @@ |
|||||||
|
<template> |
||||||
|
<div v-if="!reloading" class="j-area-linkage"> |
||||||
|
<area-cascader |
||||||
|
v-if="_type === enums.type[0]" |
||||||
|
:value="innerValue" |
||||||
|
:data="pcaa" |
||||||
|
:level="1" |
||||||
|
:style="{width}" |
||||||
|
v-bind="$attrs" |
||||||
|
v-on="_listeners" |
||||||
|
@change="handleChange" |
||||||
|
/> |
||||||
|
<area-select |
||||||
|
v-else-if="_type === enums.type[1]" |
||||||
|
:value="innerValue" |
||||||
|
:data="pcaa" |
||||||
|
:level="2" |
||||||
|
v-bind="$attrs" |
||||||
|
v-on="_listeners" |
||||||
|
@change="handleChange" |
||||||
|
/> |
||||||
|
<div v-else> |
||||||
|
<span style="color:red;"> Bad type value: {{_type}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { pcaa } from 'area-data' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JAreaLinkage', |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
// 组件的类型,可选值: |
||||||
|
// select 下拉样式 |
||||||
|
// cascader 级联样式(默认) |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: 'cascader' |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: String, |
||||||
|
default: '100%' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pcaa, |
||||||
|
innerValue: [], |
||||||
|
usedListeners: ['change'], |
||||||
|
enums: { |
||||||
|
type: ['cascader', 'select'] |
||||||
|
}, |
||||||
|
reloading: false, |
||||||
|
areaData:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
_listeners() { |
||||||
|
let listeners = { ...this.$listeners } |
||||||
|
// 去掉已使用的事件,防止冲突 |
||||||
|
this.usedListeners.forEach(key => { |
||||||
|
delete listeners[key] |
||||||
|
}) |
||||||
|
return listeners |
||||||
|
}, |
||||||
|
_type() { |
||||||
|
if (this.enums.type.includes(this.type)) { |
||||||
|
return this.type |
||||||
|
} else { |
||||||
|
console.error(`JAreaLinkage的type属性只能接收指定的值(${this.enums.type.join('|')})`) |
||||||
|
return this.enums.type[0] |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
this.loadDataByValue(this.value) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.initAreaData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 通过 value 反推 options */ |
||||||
|
loadDataByValue(value) { |
||||||
|
if(!value || value.length==0){ |
||||||
|
this.innerValue = [] |
||||||
|
this.reloading = true; |
||||||
|
setTimeout(()=>{ |
||||||
|
this.reloading = false |
||||||
|
},100) |
||||||
|
}else{ |
||||||
|
this.initAreaData(); |
||||||
|
let arr = this.areaData.getRealCode(value); |
||||||
|
this.innerValue = arr |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 通过地区code获取子级 */ |
||||||
|
loadDataByCode(value) { |
||||||
|
let options = [] |
||||||
|
let data = pcaa[value] |
||||||
|
if (data) { |
||||||
|
for (let key in data) { |
||||||
|
if (data.hasOwnProperty(key)) { |
||||||
|
options.push({ value: key, label: data[key], }) |
||||||
|
} |
||||||
|
} |
||||||
|
return options |
||||||
|
} else { |
||||||
|
return [] |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 判断是否有子节点 */ |
||||||
|
hasChildren(options) { |
||||||
|
options.forEach(option => { |
||||||
|
let data = this.loadDataByCode(option.value) |
||||||
|
option.isLeaf = data.length === 0 |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleChange(values) { |
||||||
|
let value = values[values.length - 1] |
||||||
|
this.$emit('change', value) |
||||||
|
}, |
||||||
|
initAreaData(){ |
||||||
|
if(!this.areaData){ |
||||||
|
this.areaData = new Area(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
model: { prop: 'value', event: 'change' }, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.j-area-linkage { |
||||||
|
height:40px; |
||||||
|
/deep/ .area-cascader-wrap .area-select { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .area-select .area-selected-trigger { |
||||||
|
line-height: 1.15; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,238 @@ |
|||||||
|
<template> |
||||||
|
<a-tree-select |
||||||
|
allowClear |
||||||
|
labelInValue |
||||||
|
style="width: 100%" |
||||||
|
:disabled="disabled" |
||||||
|
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" |
||||||
|
:placeholder="placeholder" |
||||||
|
:loadData="asyncLoadTreeData" |
||||||
|
:value="treeValue" |
||||||
|
:treeData="treeData" |
||||||
|
:multiple="multiple" |
||||||
|
@change="onChange"> |
||||||
|
</a-tree-select> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
|
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JCategorySelect', |
||||||
|
props: { |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
placeholder:{ |
||||||
|
type: String, |
||||||
|
default: '请选择', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
condition:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
// 是否支持多选 |
||||||
|
multiple: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
loadTriggleChange:{ |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
pid:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
pcode:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
back:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
treeValue:"", |
||||||
|
treeData:[], |
||||||
|
url:"/sys/category/loadTreeData", |
||||||
|
view:'/sys/category/loadDictItem/', |
||||||
|
tableName:"", |
||||||
|
text:"", |
||||||
|
code:"", |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value () { |
||||||
|
this.loadItemByCode() |
||||||
|
}, |
||||||
|
pcode(){ |
||||||
|
this.loadRoot(); |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.validateProp().then(()=>{ |
||||||
|
this.loadRoot() |
||||||
|
this.loadItemByCode() |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/**加载一级节点 */ |
||||||
|
loadRoot(){ |
||||||
|
let param = { |
||||||
|
pid:this.pid, |
||||||
|
pcode:!this.pcode?'0':this.pcode, |
||||||
|
condition:this.condition |
||||||
|
} |
||||||
|
getAction(this.url,param).then(res=>{ |
||||||
|
if(res.success && res.result){ |
||||||
|
for(let i of res.result){ |
||||||
|
i.value = i.key |
||||||
|
if(i.leaf==false){ |
||||||
|
i.isLeaf=false |
||||||
|
}else if(i.leaf==true){ |
||||||
|
i.isLeaf=true |
||||||
|
} |
||||||
|
} |
||||||
|
this.treeData = [...res.result] |
||||||
|
}else{ |
||||||
|
console.log("树一级节点查询结果-else",res) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/** 数据回显*/ |
||||||
|
loadItemByCode(){ |
||||||
|
if(!this.value || this.value=="0"){ |
||||||
|
this.treeValue = [] |
||||||
|
}else{ |
||||||
|
getAction(this.view,{ids:this.value}).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
let values = this.value.split(',') |
||||||
|
this.treeValue = res.result.map((item, index) => ({ |
||||||
|
key: values[index], |
||||||
|
value: values[index], |
||||||
|
label: item |
||||||
|
})) |
||||||
|
this.onLoadTriggleChange(res.result[0]); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoadTriggleChange(text){ |
||||||
|
//只有单选才会触发 |
||||||
|
if(!this.multiple && this.loadTriggleChange){ |
||||||
|
this.backValue(this.value,text) |
||||||
|
} |
||||||
|
}, |
||||||
|
backValue(value,label){ |
||||||
|
let obj = {} |
||||||
|
if(this.back){ |
||||||
|
obj[this.back] = label |
||||||
|
} |
||||||
|
this.$emit('change', value, obj) |
||||||
|
}, |
||||||
|
asyncLoadTreeData (treeNode) { |
||||||
|
return new Promise((resolve) => { |
||||||
|
if (treeNode.$vnode.children) { |
||||||
|
resolve() |
||||||
|
return |
||||||
|
} |
||||||
|
let pid = treeNode.$vnode.key |
||||||
|
let param = { |
||||||
|
pid:pid, |
||||||
|
condition:this.condition |
||||||
|
} |
||||||
|
getAction(this.url,param).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
for(let i of res.result){ |
||||||
|
i.value = i.key |
||||||
|
if(i.leaf==false){ |
||||||
|
i.isLeaf=false |
||||||
|
}else if(i.leaf==true){ |
||||||
|
i.isLeaf=true |
||||||
|
} |
||||||
|
} |
||||||
|
this.addChildren(pid,res.result,this.treeData) |
||||||
|
this.treeData = [...this.treeData] |
||||||
|
} |
||||||
|
resolve() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
addChildren(pid,children,treeArray){ |
||||||
|
if(treeArray && treeArray.length>0){ |
||||||
|
for(let item of treeArray){ |
||||||
|
if(item.key == pid){ |
||||||
|
if(!children || children.length==0){ |
||||||
|
item.isLeaf=true |
||||||
|
}else{ |
||||||
|
item.children = children |
||||||
|
} |
||||||
|
break |
||||||
|
}else{ |
||||||
|
this.addChildren(pid,children,item.children) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onChange(value){ |
||||||
|
if(!value){ |
||||||
|
this.$emit('change', ''); |
||||||
|
this.treeValue = '' |
||||||
|
} else if (value instanceof Array) { |
||||||
|
//this.$emit('change', value.map(item => item.value).join(',')) |
||||||
|
//this.treeValue = value |
||||||
|
} else { |
||||||
|
this.backValue(value.value,value.label) |
||||||
|
this.treeValue = value |
||||||
|
} |
||||||
|
}, |
||||||
|
getCurrTreeData(){ |
||||||
|
return this.treeData |
||||||
|
}, |
||||||
|
validateProp(){ |
||||||
|
let mycondition = this.condition |
||||||
|
return new Promise((resolve,reject)=>{ |
||||||
|
if(!mycondition){ |
||||||
|
resolve(); |
||||||
|
}else{ |
||||||
|
try { |
||||||
|
let test=JSON.parse(mycondition); |
||||||
|
if(typeof test == 'object' && test){ |
||||||
|
resolve() |
||||||
|
}else{ |
||||||
|
this.$message.error("组件JTreeSelect-condition传值有误,需要一个json字符串!") |
||||||
|
reject() |
||||||
|
} |
||||||
|
} catch(e) { |
||||||
|
this.$message.error("组件JTreeSelect-condition传值有误,需要一个json字符串!") |
||||||
|
reject() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼 |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,43 @@ |
|||||||
|
<template> |
||||||
|
<a-checkbox-group :options="options" :value="checkboxArray" v-bind="$attrs" @change="onChange" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'JCheckbox', |
||||||
|
props: { |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
/*label value*/ |
||||||
|
options:{ |
||||||
|
type: Array, |
||||||
|
required: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
checkboxArray:!this.value?[]:this.value.split(",") |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value (val) { |
||||||
|
if(!val){ |
||||||
|
this.checkboxArray = [] |
||||||
|
}else{ |
||||||
|
this.checkboxArray = this.value.split(",") |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
onChange (checkedValues) { |
||||||
|
this.$emit('change', checkedValues.join(",")); |
||||||
|
}, |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,429 @@ |
|||||||
|
<template> |
||||||
|
<div v-bind="fullScreenParentProps"> |
||||||
|
<a-icon v-if="fullScreen" class="full-screen-icon" :type="iconType" @click="()=>fullCoder=!fullCoder"/> |
||||||
|
|
||||||
|
<div class="code-editor-cust full-screen-child"> |
||||||
|
<textarea ref="textarea"></textarea> |
||||||
|
<span @click="nullTipClick" class="null-tip" :class="{'null-tip-hidden':hasCode}" :style="nullTipStyle">{{ placeholderShow }}</span> |
||||||
|
<template v-if="languageChange"> |
||||||
|
<a-select v-model="mode" size="small" class="code-mode-select" @change="changeMode" placeholder="请选择主题"> |
||||||
|
<a-select-option |
||||||
|
v-for="mode in modes" |
||||||
|
:key="mode.value" |
||||||
|
:value="mode.value"> |
||||||
|
{{ mode.label }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</template> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script type="text/ecmascript-6"> |
||||||
|
// 引入全局实例 |
||||||
|
import _CodeMirror from 'codemirror' |
||||||
|
|
||||||
|
// 核心样式 |
||||||
|
import 'codemirror/lib/codemirror.css' |
||||||
|
// 引入主题后还需要在 options 中指定主题才会生效 darcula gruvbox-dark hopscotch monokai |
||||||
|
import 'codemirror/theme/panda-syntax.css' |
||||||
|
//提示css |
||||||
|
import "codemirror/addon/hint/show-hint.css"; |
||||||
|
|
||||||
|
// 需要引入具体的语法高亮库才会有对应的语法高亮效果 |
||||||
|
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库 |
||||||
|
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ,所以此处才把对应的 JS 提前引入 |
||||||
|
import 'codemirror/mode/javascript/javascript.js' |
||||||
|
import 'codemirror/mode/css/css.js' |
||||||
|
import 'codemirror/mode/xml/xml.js' |
||||||
|
import 'codemirror/mode/clike/clike.js' |
||||||
|
import 'codemirror/mode/markdown/markdown.js' |
||||||
|
import 'codemirror/mode/python/python.js' |
||||||
|
import 'codemirror/mode/r/r.js' |
||||||
|
import 'codemirror/mode/shell/shell.js' |
||||||
|
import 'codemirror/mode/sql/sql.js' |
||||||
|
import 'codemirror/mode/swift/swift.js' |
||||||
|
import 'codemirror/mode/vue/vue.js' |
||||||
|
|
||||||
|
// 尝试获取全局实例 |
||||||
|
const CodeMirror = window.CodeMirror || _CodeMirror |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JCodeEditor', |
||||||
|
props: { |
||||||
|
// 外部传入的内容,用于实现双向绑定 |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 外部传入的语法类型 |
||||||
|
language: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
languageChange:{ |
||||||
|
type: Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
placeholder: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
// 显示行号 |
||||||
|
lineNumbers: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 是否显示全屏按钮 |
||||||
|
fullScreen: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 全屏以后的z-index |
||||||
|
zIndex: { |
||||||
|
type: [Number, String], |
||||||
|
default: 999 |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 内部真实的内容 |
||||||
|
code: '', |
||||||
|
iconType: 'fullscreen', |
||||||
|
hasCode:false, |
||||||
|
// 默认的语法类型 |
||||||
|
mode: 'javascript', |
||||||
|
// 编辑器实例 |
||||||
|
coder: null, |
||||||
|
// 默认配置 |
||||||
|
options: { |
||||||
|
// 缩进格式 |
||||||
|
tabSize: 2, |
||||||
|
// 主题,对应主题库 JS 需要提前引入 |
||||||
|
theme: 'panda-syntax', |
||||||
|
line: true, |
||||||
|
// extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键 |
||||||
|
hintOptions: { |
||||||
|
tables: { |
||||||
|
users: ['name', 'score', 'birthDate'], |
||||||
|
countries: ['name', 'population', 'size'] |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
// 支持切换的语法高亮类型,对应 JS 已经提前引入 |
||||||
|
// 使用的是 MIME-TYPE ,不过作为前缀的 text/ 在后面指定时写死了 |
||||||
|
modes: [{ |
||||||
|
value: 'css', |
||||||
|
label: 'CSS' |
||||||
|
}, { |
||||||
|
value: 'javascript', |
||||||
|
label: 'Javascript' |
||||||
|
}, { |
||||||
|
value: 'html', |
||||||
|
label: 'XML/HTML' |
||||||
|
}, { |
||||||
|
value: 'x-java', |
||||||
|
label: 'Java' |
||||||
|
}, { |
||||||
|
value: 'x-objectivec', |
||||||
|
label: 'Objective-C' |
||||||
|
}, { |
||||||
|
value: 'x-python', |
||||||
|
label: 'Python' |
||||||
|
}, { |
||||||
|
value: 'x-rsrc', |
||||||
|
label: 'R' |
||||||
|
}, { |
||||||
|
value: 'x-sh', |
||||||
|
label: 'Shell' |
||||||
|
}, { |
||||||
|
value: 'x-sql', |
||||||
|
label: 'SQL' |
||||||
|
}, { |
||||||
|
value: 'x-swift', |
||||||
|
label: 'Swift' |
||||||
|
}, { |
||||||
|
value: 'x-vue', |
||||||
|
label: 'Vue' |
||||||
|
}, { |
||||||
|
value: 'markdown', |
||||||
|
label: 'Markdown' |
||||||
|
}], |
||||||
|
// code 编辑器 是否全屏 |
||||||
|
fullCoder: false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
fullCoder:{ |
||||||
|
handler(value) { |
||||||
|
if(value){ |
||||||
|
this.iconType="fullscreen-exit" |
||||||
|
}else{ |
||||||
|
this.iconType="fullscreen" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// value: { |
||||||
|
// immediate: false, |
||||||
|
// handler(value) { |
||||||
|
// this._getCoder().then(() => { |
||||||
|
// this.coder.setValue(value) |
||||||
|
// }) |
||||||
|
// } |
||||||
|
// }, |
||||||
|
language: { |
||||||
|
immediate: true, |
||||||
|
handler(language) { |
||||||
|
this._getCoder().then(() => { |
||||||
|
// 尝试从父容器获取语法类型 |
||||||
|
if (language) { |
||||||
|
// 获取具体的语法类型对象 |
||||||
|
let modeObj = this._getLanguage(language) |
||||||
|
|
||||||
|
// 判断父容器传入的语法是否被支持 |
||||||
|
if (modeObj) { |
||||||
|
this.mode = modeObj.label |
||||||
|
this.coder.setOption('mode', `text/${modeObj.value}`) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
placeholderShow() { |
||||||
|
if (this.placeholder == null) { |
||||||
|
return `请在此输入${this.language}代码` |
||||||
|
} else { |
||||||
|
return this.placeholder |
||||||
|
} |
||||||
|
}, |
||||||
|
nullTipStyle(){ |
||||||
|
if (this.lineNumbers) { |
||||||
|
return { left: '36px' } |
||||||
|
} else { |
||||||
|
return { left: '12px' } |
||||||
|
} |
||||||
|
}, |
||||||
|
// coder 配置 |
||||||
|
coderOptions() { |
||||||
|
return { |
||||||
|
tabSize: this.options.tabSize, |
||||||
|
theme: this.options.theme, |
||||||
|
lineNumbers: this.lineNumbers, |
||||||
|
line: true, |
||||||
|
hintOptions: this.options.hintOptions |
||||||
|
} |
||||||
|
}, |
||||||
|
fullScreenParentProps(){ |
||||||
|
let props = { |
||||||
|
class: ['full-screen-parent', this.fullCoder ? 'full-screen' : ''], |
||||||
|
style: {} |
||||||
|
} |
||||||
|
if (this.fullCoder) { |
||||||
|
props.style['z-index'] = this.zIndex |
||||||
|
} |
||||||
|
return props |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
// 初始化 |
||||||
|
this._initialize() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 初始化 |
||||||
|
_initialize () { |
||||||
|
// 初始化编辑器实例,传入需要被实例化的文本域对象和默认配置 |
||||||
|
this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.coderOptions) |
||||||
|
// 编辑器赋值 |
||||||
|
if(this.value||this.code){ |
||||||
|
this.hasCode=true |
||||||
|
this.coder.setValue(this.value || this.code) |
||||||
|
}else{ |
||||||
|
this.coder.setValue('') |
||||||
|
this.hasCode=false |
||||||
|
} |
||||||
|
// 支持双向绑定 |
||||||
|
this.coder.on('change', (coder) => { |
||||||
|
this.code = coder.getValue() |
||||||
|
if(this.code){ |
||||||
|
this.hasCode=true |
||||||
|
}else{ |
||||||
|
this.hasCode=false |
||||||
|
} |
||||||
|
if (this.$emit) { |
||||||
|
this.$emit('input', this.code) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.coder.on('focus', () => { |
||||||
|
this.hasCode=true |
||||||
|
}) |
||||||
|
this.coder.on('blur', () => { |
||||||
|
if(this.code){ |
||||||
|
this.hasCode=true |
||||||
|
}else{ |
||||||
|
this.hasCode=false |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
/* this.coder.on('cursorActivity',()=>{ |
||||||
|
this.coder.showHint() |
||||||
|
})*/ |
||||||
|
|
||||||
|
}, |
||||||
|
getCodeContent(){ |
||||||
|
return this.code |
||||||
|
}, |
||||||
|
setCodeContent(val){ |
||||||
|
setTimeout(()=>{ |
||||||
|
if(!val){ |
||||||
|
this.coder.setValue('') |
||||||
|
}else{ |
||||||
|
this.coder.setValue(val) |
||||||
|
} |
||||||
|
},300) |
||||||
|
}, |
||||||
|
// 获取当前语法类型 |
||||||
|
_getLanguage (language) { |
||||||
|
// 在支持的语法类型列表中寻找传入的语法类型 |
||||||
|
return this.modes.find((mode) => { |
||||||
|
// 所有的值都忽略大小写,方便比较 |
||||||
|
let currentLanguage = language.toLowerCase() |
||||||
|
let currentLabel = mode.label.toLowerCase() |
||||||
|
let currentValue = mode.value.toLowerCase() |
||||||
|
|
||||||
|
// 由于真实值可能不规范,例如 java 的真实值是 x-java ,所以讲 value 和 label 同时和传入语法进行比较 |
||||||
|
return currentLabel === currentLanguage || currentValue === currentLanguage |
||||||
|
}) |
||||||
|
}, |
||||||
|
_getCoder() { |
||||||
|
let _this = this |
||||||
|
return new Promise((resolve) => { |
||||||
|
(function get() { |
||||||
|
if (_this.coder) { |
||||||
|
resolve(_this.coder) |
||||||
|
} else { |
||||||
|
setTimeout(get, 10) |
||||||
|
} |
||||||
|
})() |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 更改模式 |
||||||
|
changeMode (val) { |
||||||
|
// 修改编辑器的语法配置 |
||||||
|
this.coder.setOption('mode', `text/${val}`) |
||||||
|
|
||||||
|
// 获取修改后的语法 |
||||||
|
let label = this._getLanguage(val).label.toLowerCase() |
||||||
|
|
||||||
|
// 允许父容器通过以下函数监听当前的语法值 |
||||||
|
this.$emit('language-change', label) |
||||||
|
}, |
||||||
|
nullTipClick(){ |
||||||
|
this.coder.focus() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.code-editor-cust{ |
||||||
|
flex-grow:1; |
||||||
|
display:flex; |
||||||
|
position:relative; |
||||||
|
height:100%; |
||||||
|
.CodeMirror{ |
||||||
|
flex-grow:1; |
||||||
|
z-index:1; |
||||||
|
.CodeMirror-code{ |
||||||
|
line-height:19px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.code-mode-select{ |
||||||
|
position:absolute; |
||||||
|
z-index:2; |
||||||
|
right:10px; |
||||||
|
top:10px; |
||||||
|
max-width:130px; |
||||||
|
} |
||||||
|
.CodeMirror{ |
||||||
|
height: auto; |
||||||
|
min-height:100%; |
||||||
|
} |
||||||
|
.null-tip{ |
||||||
|
position: absolute; |
||||||
|
top: 4px; |
||||||
|
left: 36px; |
||||||
|
z-index: 10; |
||||||
|
color: #ffffffc9; |
||||||
|
line-height: initial; |
||||||
|
} |
||||||
|
.null-tip-hidden{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 全屏样式 */ |
||||||
|
.full-screen-parent { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.full-screen-icon { |
||||||
|
opacity: 0; |
||||||
|
color: black; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
line-height: 24px; |
||||||
|
background-color: white; |
||||||
|
position: absolute; |
||||||
|
top: 2px; |
||||||
|
right: 2px; |
||||||
|
z-index: 9; |
||||||
|
cursor: pointer; |
||||||
|
transition: opacity 0.3s; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
.full-screen-icon { |
||||||
|
opacity: 1; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: rgba(255, 255, 255, 0.88); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.full-screen { |
||||||
|
position: fixed; |
||||||
|
top: 10px; |
||||||
|
left: 10px; |
||||||
|
width: calc(100% - 20px); |
||||||
|
height: calc(100% - 20px); |
||||||
|
padding: 10px; |
||||||
|
background-color: #f5f5f5; |
||||||
|
|
||||||
|
.full-screen-icon { |
||||||
|
top: 12px; |
||||||
|
right: 12px; |
||||||
|
} |
||||||
|
.full-screen-child { |
||||||
|
height: 100%; |
||||||
|
max-height: 100%; |
||||||
|
min-height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.full-screen-child { |
||||||
|
min-height: 120px; |
||||||
|
max-height: 320px; |
||||||
|
overflow:hidden; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.CodeMirror-cursor{ |
||||||
|
height:18.4px !important; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,65 @@ |
|||||||
|
<template> |
||||||
|
<div class="components-input-demo-presuffix"> |
||||||
|
<a-input @click="openModal" placeholder="corn表达式" v-model="cron" @change="handleOK"> |
||||||
|
<a-icon slot="prefix" type="schedule" title="corn控件"/> |
||||||
|
<a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/> |
||||||
|
</a-input> |
||||||
|
<JCronModal ref="innerVueCron" :data="cron" @ok="handleOK"></JCronModal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import JCronModal from "./modal/JCronModal"; |
||||||
|
export default { |
||||||
|
name: 'JCron', |
||||||
|
components: { |
||||||
|
JCronModal |
||||||
|
}, |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
required: false, |
||||||
|
type: String, |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
cron: this.value, |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value(val){ |
||||||
|
this.cron = val |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
openModal(){ |
||||||
|
this.$refs.innerVueCron.show(); |
||||||
|
}, |
||||||
|
handleOK(val){ |
||||||
|
this.cron = val; |
||||||
|
this.$emit("change", this.cron); |
||||||
|
//this.$emit("change", Object.assign({}, this.cron)); |
||||||
|
}, |
||||||
|
handleEmpty(){ |
||||||
|
this.handleOK('') |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.components-input-demo-presuffix .anticon-close-circle { |
||||||
|
cursor: pointer; |
||||||
|
color: #ccc; |
||||||
|
transition: color 0.3s; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.components-input-demo-presuffix .anticon-close-circle:hover { |
||||||
|
color: #f5222d; |
||||||
|
} |
||||||
|
.components-input-demo-presuffix .anticon-close-circle:active { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,85 @@ |
|||||||
|
<template> |
||||||
|
<a-date-picker |
||||||
|
:disabled="disabled || readOnly" |
||||||
|
:placeholder="placeholder" |
||||||
|
@change="handleDateChange" |
||||||
|
:value="momVal" |
||||||
|
:showTime="showTime" |
||||||
|
:format="dateFormat" |
||||||
|
:getCalendarContainer="getCalendarContainer" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import moment from 'moment' |
||||||
|
export default { |
||||||
|
name: 'JDate', |
||||||
|
props: { |
||||||
|
placeholder:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
dateFormat:{ |
||||||
|
type: String, |
||||||
|
default: 'YYYY-MM-DD HH:mm:ss', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
//此属性可以被废弃了 |
||||||
|
triggerChange:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
readOnly:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
showTime:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
getCalendarContainer: { |
||||||
|
type: Function, |
||||||
|
default: (node) => node.parentNode |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
let dateStr = this.value; |
||||||
|
return { |
||||||
|
decorator:"", |
||||||
|
momVal:!dateStr?null:moment(dateStr,this.dateFormat) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value (val) { |
||||||
|
if(!val){ |
||||||
|
this.momVal = null |
||||||
|
}else{ |
||||||
|
this.momVal = moment(val,this.dateFormat) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
moment, |
||||||
|
handleDateChange(mom,dateStr){ |
||||||
|
this.$emit('change', dateStr); |
||||||
|
} |
||||||
|
}, |
||||||
|
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼 |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,29 @@ |
|||||||
|
<template> |
||||||
|
<a-tooltip placement="topLeft"> |
||||||
|
<template slot="title"> |
||||||
|
<span>{{value}}</span> |
||||||
|
</template> |
||||||
|
{{ value | ellipsis(length) }} |
||||||
|
</a-tooltip> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'JEllipsis', |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
length: { |
||||||
|
type: Number, |
||||||
|
required: false, |
||||||
|
default: 25, |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,61 @@ |
|||||||
|
<template> |
||||||
|
<div :class="disabled?'jeecg-form-container-disabled':''"> |
||||||
|
<fieldset :disabled="disabled"> |
||||||
|
<slot name="detail"></slot> |
||||||
|
</fieldset> |
||||||
|
<slot name="edit"></slot> |
||||||
|
<fieldset disabled> |
||||||
|
<slot></slot> |
||||||
|
</fieldset> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* 使用方法 |
||||||
|
* 在form下直接写这个组件就行了, |
||||||
|
*<a-form layout="inline" :form="form" > |
||||||
|
* <j-form-container :disabled="true"> |
||||||
|
* <!-- 表单内容省略..... --> |
||||||
|
* </j-form-container> |
||||||
|
*</a-form> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'JFormContainer', |
||||||
|
props:{ |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
console.log("我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用") |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style> |
||||||
|
.jeecg-form-container-disabled{ |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
.jeecg-form-container-disabled fieldset[disabled] { |
||||||
|
-ms-pointer-events: none; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
.jeecg-form-container-disabled .ant-select{ |
||||||
|
-ms-pointer-events: none; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.jeecg-form-container-disabled .ant-upload-select{display:none} |
||||||
|
.jeecg-form-container-disabled .ant-upload-list{cursor:grabbing} |
||||||
|
.jeecg-form-container-disabled fieldset[disabled] .ant-upload-list{ |
||||||
|
-ms-pointer-events: auto !important; |
||||||
|
pointer-events: auto !important; |
||||||
|
} |
||||||
|
|
||||||
|
.jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete, |
||||||
|
.jeecg-form-container-disabled .ant-upload-list-item .anticon-close{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,202 @@ |
|||||||
|
<template> |
||||||
|
<div class="gc-canvas" @click="reloadPic"> |
||||||
|
<canvas id="gc-canvas" :width="contentWidth" :height="contentHeight"></canvas> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JGraphicCode', |
||||||
|
props: { |
||||||
|
length:{ |
||||||
|
type: Number, |
||||||
|
default: 4 |
||||||
|
}, |
||||||
|
fontSizeMin: { |
||||||
|
type: Number, |
||||||
|
default: 20 |
||||||
|
}, |
||||||
|
fontSizeMax: { |
||||||
|
type: Number, |
||||||
|
default: 45 |
||||||
|
}, |
||||||
|
backgroundColorMin: { |
||||||
|
type: Number, |
||||||
|
default: 180 |
||||||
|
}, |
||||||
|
backgroundColorMax: { |
||||||
|
type: Number, |
||||||
|
default: 240 |
||||||
|
}, |
||||||
|
colorMin: { |
||||||
|
type: Number, |
||||||
|
default: 50 |
||||||
|
}, |
||||||
|
colorMax: { |
||||||
|
type: Number, |
||||||
|
default: 160 |
||||||
|
}, |
||||||
|
lineColorMin: { |
||||||
|
type: Number, |
||||||
|
default: 40 |
||||||
|
}, |
||||||
|
lineColorMax: { |
||||||
|
type: Number, |
||||||
|
default: 180 |
||||||
|
}, |
||||||
|
dotColorMin: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
dotColorMax: { |
||||||
|
type: Number, |
||||||
|
default: 255 |
||||||
|
}, |
||||||
|
contentWidth: { |
||||||
|
type: Number, |
||||||
|
default:136 |
||||||
|
}, |
||||||
|
contentHeight: { |
||||||
|
type: Number, |
||||||
|
default: 38 |
||||||
|
}, |
||||||
|
remote:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 生成一个随机数 |
||||||
|
randomNum (min, max) { |
||||||
|
return Math.floor(Math.random() * (max - min) + min) |
||||||
|
}, |
||||||
|
// 生成一个随机的颜色 |
||||||
|
randomColor (min, max) { |
||||||
|
let r = this.randomNum(min, max) |
||||||
|
let g = this.randomNum(min, max) |
||||||
|
let b = this.randomNum(min, max) |
||||||
|
return 'rgb(' + r + ',' + g + ',' + b + ')' |
||||||
|
}, |
||||||
|
drawPic () { |
||||||
|
this.randomCode().then(()=>{ |
||||||
|
let canvas = document.getElementById('gc-canvas') |
||||||
|
let ctx = canvas.getContext('2d') |
||||||
|
ctx.textBaseline = 'bottom' |
||||||
|
// 绘制背景 |
||||||
|
ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) |
||||||
|
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) |
||||||
|
// 绘制文字 |
||||||
|
for (let i = 0; i < this.code.length; i++) { |
||||||
|
this.drawText(ctx, this.code[i], i) |
||||||
|
} |
||||||
|
this.drawLine(ctx) |
||||||
|
this.drawDot(ctx) |
||||||
|
this.$emit("success",this.code) |
||||||
|
}) |
||||||
|
}, |
||||||
|
drawText (ctx, txt, i) { |
||||||
|
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) |
||||||
|
let fontSize = this.randomNum(this.fontSizeMin, this.fontSizeMax) |
||||||
|
ctx.font = fontSize + 'px SimHei' |
||||||
|
let padding = 10; |
||||||
|
let offset = (this.contentWidth-40)/(this.code.length-1) |
||||||
|
let x=padding; |
||||||
|
if(i>0){ |
||||||
|
x = padding+(i*offset) |
||||||
|
} |
||||||
|
//let x = (i + 1) * (this.contentWidth / (this.code.length + 1)) |
||||||
|
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) |
||||||
|
if(fontSize>40){ |
||||||
|
y=40 |
||||||
|
} |
||||||
|
var deg = this.randomNum(-10,10) |
||||||
|
// 修改坐标原点和旋转角度 |
||||||
|
ctx.translate(x, y) |
||||||
|
ctx.rotate(deg * Math.PI / 180) |
||||||
|
ctx.fillText(txt, 0, 0) |
||||||
|
// 恢复坐标原点和旋转角度 |
||||||
|
ctx.rotate(-deg * Math.PI / 180) |
||||||
|
ctx.translate(-x, -y) |
||||||
|
}, |
||||||
|
drawLine (ctx) { |
||||||
|
// 绘制干扰线 |
||||||
|
for (let i = 0; i <1; i++) { |
||||||
|
ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax) |
||||||
|
ctx.beginPath() |
||||||
|
ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) |
||||||
|
ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) |
||||||
|
ctx.stroke() |
||||||
|
} |
||||||
|
}, |
||||||
|
drawDot (ctx) { |
||||||
|
// 绘制干扰点 |
||||||
|
for (let i = 0; i < 100; i++) { |
||||||
|
ctx.fillStyle = this.randomColor(0, 255) |
||||||
|
ctx.beginPath() |
||||||
|
ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI) |
||||||
|
ctx.fill() |
||||||
|
} |
||||||
|
}, |
||||||
|
reloadPic(){ |
||||||
|
this.drawPic() |
||||||
|
}, |
||||||
|
randomCode(){ |
||||||
|
return new Promise((resolve)=>{ |
||||||
|
if(this.remote==true){ |
||||||
|
getAction("/sys/getCheckCode").then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
this.checkKey = res.result.key |
||||||
|
this.code = window.atob(res.result.code) |
||||||
|
resolve(); |
||||||
|
}else{ |
||||||
|
this.$message.error("生成验证码错误,请联系系统管理员") |
||||||
|
this.code = 'BUG' |
||||||
|
resolve(); |
||||||
|
} |
||||||
|
}).catch(()=>{ |
||||||
|
console.log("生成验证码连接服务器异常") |
||||||
|
this.code = 'BUG' |
||||||
|
resolve(); |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.randomLocalCode(); |
||||||
|
resolve(); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
randomLocalCode(){ |
||||||
|
let random = '' |
||||||
|
//去掉了I l i o O |
||||||
|
let str = "QWERTYUPLKJHGFDSAZXCVBNMqwertyupkjhgfdsazxcvbnm1234567890" |
||||||
|
for(let i = 0; i < this.length; i++) { |
||||||
|
let index = Math.floor(Math.random()*57); |
||||||
|
random += str[index]; |
||||||
|
} |
||||||
|
this.code = random |
||||||
|
}, |
||||||
|
getLoginParam(){ |
||||||
|
return { |
||||||
|
checkCode:this.code, |
||||||
|
checkKey:this.checkKey |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.drawPic() |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
code:"", |
||||||
|
checkKey:"" |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,226 @@ |
|||||||
|
<template> |
||||||
|
<a-upload |
||||||
|
name="file" |
||||||
|
listType="picture-card" |
||||||
|
:multiple="isMultiple" |
||||||
|
:action="uploadAction" |
||||||
|
:headers="headers" |
||||||
|
:data="{biz:bizPath}" |
||||||
|
:fileList="fileList" |
||||||
|
:beforeUpload="beforeUpload" |
||||||
|
:disabled="disabled" |
||||||
|
:isMultiple="isMultiple" |
||||||
|
:showUploadList="isMultiple" |
||||||
|
@change="handleChange" |
||||||
|
@preview="handlePreview"> |
||||||
|
<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="height:104px;max-width:300px"/> |
||||||
|
<div v-else > |
||||||
|
<a-icon :type="uploadLoading ? 'loading' : 'plus'" /> |
||||||
|
<div class="ant-upload-text">{{ text }}</div> |
||||||
|
</div> |
||||||
|
<a-modal :visible="previewVisible" :width="1000" :footer="null" @cancel="handleCancel()"> |
||||||
|
<img alt="example" style="width: 100%" :src="previewImage"/> |
||||||
|
</a-modal> |
||||||
|
</a-upload> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Vue from 'vue' |
||||||
|
import { getFileAccessHttpUrl } from '@/api/manage' |
||||||
|
import { fileSizeLimit } from '@/api/api' |
||||||
|
|
||||||
|
const uidGenerator=()=>{ |
||||||
|
return '-'+parseInt(Math.random()*10000+1,10); |
||||||
|
} |
||||||
|
const getFileName=(path)=>{ |
||||||
|
if(path.lastIndexOf("\\")>=0){ |
||||||
|
let reg=new RegExp("\\\\","g"); |
||||||
|
path = path.replace(reg,"/"); |
||||||
|
} |
||||||
|
return path.substring(path.lastIndexOf("/")+1); |
||||||
|
} |
||||||
|
export default { |
||||||
|
name: 'JImageUpload', |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
uploadAction:window._CONFIG['domianURL']+"/systemConfig/upload", |
||||||
|
uploadLoading:false, |
||||||
|
picUrl:false, |
||||||
|
headers:{}, |
||||||
|
fileList: [], |
||||||
|
previewImage:"", |
||||||
|
previewVisible: false, |
||||||
|
sizeLimit: 0, |
||||||
|
uploadGoOn:true, |
||||||
|
} |
||||||
|
}, |
||||||
|
props:{ |
||||||
|
text:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:"上传" |
||||||
|
}, |
||||||
|
/*这个属性用于控制文件上传的业务路径*/ |
||||||
|
bizPath:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:"temp" |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
type:[String,Array], |
||||||
|
required:false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
required:false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
isMultiple:{ |
||||||
|
type:Boolean, |
||||||
|
required:false, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value(val){ |
||||||
|
if (val instanceof Array) { |
||||||
|
this.initFileList(val.join(',')) |
||||||
|
} else { |
||||||
|
this.initFileList(val) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.initFileSizeLimit() |
||||||
|
this.headers = {"X-Access-Token":""} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
initFileSizeLimit() { |
||||||
|
fileSizeLimit().then((res)=>{ |
||||||
|
if(res.code === 200) { |
||||||
|
this.sizeLimit = res.data |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
initFileList(paths){ |
||||||
|
if(!paths || paths.length==0){ |
||||||
|
this.fileList = []; |
||||||
|
this.picUrl = false; |
||||||
|
return; |
||||||
|
} |
||||||
|
this.picUrl = true; |
||||||
|
let fileList = []; |
||||||
|
let arr = paths.split(",") |
||||||
|
for(var a=0;a<arr.length;a++){ |
||||||
|
let url = getFileAccessHttpUrl(arr[a]); |
||||||
|
fileList.push({ |
||||||
|
uid: uidGenerator(), |
||||||
|
name: getFileName(arr[a]), |
||||||
|
status: 'done', |
||||||
|
url: url, |
||||||
|
response:{ |
||||||
|
code:"history", |
||||||
|
data:arr[a] |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
this.fileList = fileList |
||||||
|
}, |
||||||
|
beforeUpload: function(file){ |
||||||
|
this.uploadGoOn=true |
||||||
|
let fileType = file.type; |
||||||
|
let fileSize = file.size; |
||||||
|
if(fileType.indexOf('image')<0){ |
||||||
|
this.$message.warning('请上传图片'); |
||||||
|
this.uploadGoOn=false |
||||||
|
return false; |
||||||
|
} |
||||||
|
//验证文件大小 |
||||||
|
if(fileSize>this.sizeLimit) { |
||||||
|
let parseSizeLimit = (this.sizeLimit/1024/1024).toFixed(2) |
||||||
|
this.$message.warning('抱歉,图片大小不能超过' + parseSizeLimit + 'M'); |
||||||
|
this.uploadGoOn=false |
||||||
|
return false; |
||||||
|
} |
||||||
|
return true |
||||||
|
}, |
||||||
|
handleChange(info) { |
||||||
|
console.log(info,"--文件列表改变--") |
||||||
|
if(!info.file.status && this.uploadGoOn === false){ |
||||||
|
info.fileList.pop(); |
||||||
|
} |
||||||
|
this.picUrl = false; |
||||||
|
let fileList = info.fileList |
||||||
|
if(info.file.status==='done'){ |
||||||
|
if(info.file.response.code === 200){ |
||||||
|
this.picUrl = true; |
||||||
|
fileList = fileList.map((file) => { |
||||||
|
if (file.response) { |
||||||
|
file.url = file.response.data; |
||||||
|
} |
||||||
|
return file; |
||||||
|
}); |
||||||
|
} |
||||||
|
//this.$message.success(`${info.file.name} 上传成功!`); |
||||||
|
}else if (info.file.status === 'error') { |
||||||
|
this.$message.error(`${info.file.name} 上传失败.`); |
||||||
|
}else if(info.file.status === 'removed'){ |
||||||
|
this.handleDelete(info.file) |
||||||
|
} |
||||||
|
this.fileList = fileList |
||||||
|
if(info.file.status==='done' || info.file.status === 'removed'){ |
||||||
|
this.handlePathChange() |
||||||
|
} |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
handlePreview (file) { |
||||||
|
this.previewImage = file.url || file.thumbUrl |
||||||
|
this.previewVisible = true |
||||||
|
}, |
||||||
|
getAvatarView(){ |
||||||
|
if(this.fileList.length>0){ |
||||||
|
let url = this.fileList[0].url |
||||||
|
return url |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePathChange(){ |
||||||
|
let uploadFiles = this.fileList |
||||||
|
let path = '' |
||||||
|
if(!uploadFiles || uploadFiles.length==0){ |
||||||
|
path = '' |
||||||
|
} |
||||||
|
let arr = []; |
||||||
|
if(!this.isMultiple){ |
||||||
|
arr.push(uploadFiles[uploadFiles.length-1].response.data) |
||||||
|
}else{ |
||||||
|
for(var a=0;a<uploadFiles.length;a++){ |
||||||
|
arr.push(uploadFiles[a].response.data) |
||||||
|
} |
||||||
|
} |
||||||
|
if(arr.length>0){ |
||||||
|
path = arr.join(",") |
||||||
|
} |
||||||
|
this.$emit('change', path); |
||||||
|
}, |
||||||
|
handleDelete(file){ |
||||||
|
//如有需要新增 删除逻辑 |
||||||
|
console.log(file) |
||||||
|
}, |
||||||
|
handleCancel() { |
||||||
|
this.close(); |
||||||
|
this.previewVisible = false; |
||||||
|
}, |
||||||
|
close () { |
||||||
|
|
||||||
|
}, |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,123 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
title="导入EXCEL" |
||||||
|
:width="600" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="uploading" |
||||||
|
@cancel="handleClose"> |
||||||
|
|
||||||
|
<a-upload |
||||||
|
name="file" |
||||||
|
:multiple="true" |
||||||
|
accept=".xls,.xlsx" |
||||||
|
:fileList="fileList" |
||||||
|
:remove="handleRemove" |
||||||
|
:beforeUpload="beforeUpload"> |
||||||
|
<a-button> |
||||||
|
<a-icon type="upload" /> |
||||||
|
选择导入文件 |
||||||
|
</a-button> |
||||||
|
</a-upload> |
||||||
|
|
||||||
|
<template slot="footer"> |
||||||
|
<a-button @click="handleClose">关闭</a-button> |
||||||
|
<a-button |
||||||
|
type="primary" |
||||||
|
@click="handleImport" |
||||||
|
:disabled="fileList.length === 0" |
||||||
|
:loading="uploading"> |
||||||
|
{{ uploading ? '上传中...' : '开始上传' }} |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
|
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { postAction } from '@/api/manage' |
||||||
|
export default { |
||||||
|
name: 'JImportModal', |
||||||
|
props:{ |
||||||
|
url:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
biz:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
visible:false, |
||||||
|
uploading:false, |
||||||
|
fileList:[], |
||||||
|
uploadAction:'', |
||||||
|
foreignKeys:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
url (val) { |
||||||
|
if(val){ |
||||||
|
this.uploadAction = window._CONFIG['domianURL']+val |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.uploadAction = window._CONFIG['domianURL']+this.url |
||||||
|
}, |
||||||
|
|
||||||
|
methods:{ |
||||||
|
handleClose(){ |
||||||
|
this.visible=false |
||||||
|
}, |
||||||
|
show(arg){ |
||||||
|
this.fileList = [] |
||||||
|
this.uploading = false |
||||||
|
this.visible = true |
||||||
|
this.foreignKeys = arg; |
||||||
|
}, |
||||||
|
handleRemove(file) { |
||||||
|
const index = this.fileList.indexOf(file); |
||||||
|
const newFileList = this.fileList.slice(); |
||||||
|
newFileList.splice(index, 1); |
||||||
|
this.fileList = newFileList |
||||||
|
}, |
||||||
|
beforeUpload(file) { |
||||||
|
this.fileList = [...this.fileList, file] |
||||||
|
return false; |
||||||
|
}, |
||||||
|
handleImport() { |
||||||
|
const { fileList } = this; |
||||||
|
const formData = new FormData(); |
||||||
|
if(this.biz){ |
||||||
|
formData.append('isSingleTableImport',this.biz); |
||||||
|
} |
||||||
|
if(this.foreignKeys && this.foreignKeys.length>0){ |
||||||
|
formData.append('foreignKeys',this.foreignKeys); |
||||||
|
} |
||||||
|
fileList.forEach((file) => { |
||||||
|
formData.append('files[]', file); |
||||||
|
}); |
||||||
|
this.uploading = true |
||||||
|
postAction(this.uploadAction, formData).then((res) => { |
||||||
|
this.uploading = false |
||||||
|
if(res.success){ |
||||||
|
this.$message.success(res.message) |
||||||
|
this.visible=false |
||||||
|
this.$emit('ok') |
||||||
|
}else{ |
||||||
|
this.$message.warning(res.message) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,100 @@ |
|||||||
|
<template> |
||||||
|
<a-input :placeholder="placeholder" :value="inputVal" @input="backValue"></a-input> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const JINPUT_QUERY_LIKE = 'like'; |
||||||
|
const JINPUT_QUERY_NE = 'ne'; |
||||||
|
const JINPUT_QUERY_GE = 'ge'; //大于等于 |
||||||
|
const JINPUT_QUERY_LE = 'le'; //小于等于 |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JInput', |
||||||
|
props:{ |
||||||
|
value:{ |
||||||
|
type:String, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:JINPUT_QUERY_LIKE |
||||||
|
}, |
||||||
|
placeholder:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value:{ |
||||||
|
immediate:true, |
||||||
|
handler:function(){ |
||||||
|
this.initVal(); |
||||||
|
} |
||||||
|
}, |
||||||
|
// update-begin author:sunjianlei date:20200225 for:当 type 变化的时候重新计算值 ------ |
||||||
|
type() { |
||||||
|
this.backValue({ target: { value: this.inputVal } }) |
||||||
|
}, |
||||||
|
// update-end author:sunjianlei date:20200225 for:当 type 变化的时候重新计算值 ------ |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
inputVal:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
initVal(){ |
||||||
|
if(!this.value){ |
||||||
|
this.inputVal = '' |
||||||
|
}else{ |
||||||
|
let text = this.value |
||||||
|
switch (this.type) { |
||||||
|
case JINPUT_QUERY_LIKE: |
||||||
|
text = text.substring(1,text.length-1); |
||||||
|
break; |
||||||
|
case JINPUT_QUERY_NE: |
||||||
|
text = text.substring(1); |
||||||
|
break; |
||||||
|
case JINPUT_QUERY_GE: |
||||||
|
text = text.substring(2); |
||||||
|
break; |
||||||
|
case JINPUT_QUERY_LE: |
||||||
|
text = text.substring(2); |
||||||
|
break; |
||||||
|
default: |
||||||
|
} |
||||||
|
this.inputVal = text |
||||||
|
} |
||||||
|
}, |
||||||
|
backValue(e){ |
||||||
|
let text = e.target.value |
||||||
|
switch (this.type) { |
||||||
|
case JINPUT_QUERY_LIKE: |
||||||
|
text = "*"+text+"*"; |
||||||
|
break; |
||||||
|
case JINPUT_QUERY_NE: |
||||||
|
text = "!"+text; |
||||||
|
break; |
||||||
|
case JINPUT_QUERY_GE: |
||||||
|
text = ">="+text; |
||||||
|
break; |
||||||
|
case JINPUT_QUERY_LE: |
||||||
|
text = "<="+text; |
||||||
|
break; |
||||||
|
default: |
||||||
|
} |
||||||
|
this.$emit("change",text) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,237 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
ref="modal" |
||||||
|
:class="getClass(modalClass)" |
||||||
|
:style="getStyle(modalStyle)" |
||||||
|
:visible="visible" |
||||||
|
v-bind="_attrs" |
||||||
|
v-on="$listeners" |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
> |
||||||
|
|
||||||
|
<slot></slot> |
||||||
|
|
||||||
|
<template v-if="!isNoTitle" slot="title"> |
||||||
|
<a-row class="j-modal-title-row" type="flex"> |
||||||
|
<a-col class="left"> |
||||||
|
<slot name="title">{{ title }}</slot> |
||||||
|
</a-col> |
||||||
|
<a-col class="right"> |
||||||
|
<a-button v-if="switchFullscreen" @click="toggleFullscreen" class="ant-modal-close ant-modal-close-x" |
||||||
|
ghost type="link" :icon="fullscreenButtonIcon"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<!-- 处理 scopedSlots --> |
||||||
|
<template v-for="slotName of scopedSlotsKeys" :slot="slotName"> |
||||||
|
<slot :name="slotName"></slot> |
||||||
|
</template> |
||||||
|
|
||||||
|
<!-- 处理 slots --> |
||||||
|
<template v-for="slotName of slotsKeys" v-slot:[slotName]> |
||||||
|
<slot :name="slotName"></slot> |
||||||
|
</template> |
||||||
|
|
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import { getClass, getStyle } from '@/utils/props-util' |
||||||
|
import { triggerWindowResizeEvent } from "@/utils/util" |
||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JModal', |
||||||
|
props: { |
||||||
|
title: String, |
||||||
|
// 可使用 .sync 修饰符 |
||||||
|
visible: Boolean, |
||||||
|
// 前缀代号 |
||||||
|
prefixNo: String, |
||||||
|
// 是否全屏弹窗,当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符 |
||||||
|
fullscreen: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 是否允许展示新手引导(允许后右上角会出现一个按钮) |
||||||
|
switchHelp: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 是否允许切换全屏(允许后右上角会出现一个按钮) |
||||||
|
switchFullscreen: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 点击确定按钮的时候是否关闭弹窗 |
||||||
|
okClose: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 内部使用的 slots ,不再处理 |
||||||
|
usedSlots: ['title'], |
||||||
|
// 实际控制是否全屏的参数 |
||||||
|
innerFullscreen: this.fullscreen, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 一些未处理的参数或特殊处理的参数绑定到 a-modal 上 |
||||||
|
_attrs() { |
||||||
|
let attrs = { ...this.$attrs } |
||||||
|
// 如果全屏就将宽度设为 100% |
||||||
|
if (this.innerFullscreen) { |
||||||
|
attrs['width'] = '100%' |
||||||
|
} |
||||||
|
return attrs |
||||||
|
}, |
||||||
|
modalClass() { |
||||||
|
return { |
||||||
|
'j-modal-box': true, |
||||||
|
'fullscreen': this.innerFullscreen, |
||||||
|
'no-title': this.isNoTitle, |
||||||
|
'no-footer': this.isNoFooter, |
||||||
|
} |
||||||
|
}, |
||||||
|
modalStyle() { |
||||||
|
let style = {} |
||||||
|
// 如果全屏就将top设为 0 |
||||||
|
if (this.innerFullscreen) { |
||||||
|
style['top'] = '0' |
||||||
|
} |
||||||
|
return style |
||||||
|
}, |
||||||
|
isNoTitle() { |
||||||
|
return !this.title && !this.allSlotsKeys.includes('title') |
||||||
|
}, |
||||||
|
isNoFooter() { |
||||||
|
return this._attrs['footer'] === null |
||||||
|
}, |
||||||
|
slotsKeys() { |
||||||
|
return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key)) |
||||||
|
}, |
||||||
|
scopedSlotsKeys() { |
||||||
|
return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key)) |
||||||
|
}, |
||||||
|
allSlotsKeys() { |
||||||
|
return this.slotsKeys.concat(this.scopedSlotsKeys) |
||||||
|
}, |
||||||
|
// 切换全屏的按钮图标 |
||||||
|
fullscreenButtonIcon() { |
||||||
|
return this.innerFullscreen ? 'fullscreen-exit' : 'fullscreen' |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible() { |
||||||
|
if (this.visible) { |
||||||
|
this.innerFullscreen = this.fullscreen |
||||||
|
} |
||||||
|
}, |
||||||
|
innerFullscreen(val) { |
||||||
|
this.$emit('update:fullscreen', val) |
||||||
|
}, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
getClass(clazz) { |
||||||
|
return { ...getClass(this), ...clazz } |
||||||
|
}, |
||||||
|
getStyle(style) { |
||||||
|
return { ...getStyle(this), ...style } |
||||||
|
}, |
||||||
|
|
||||||
|
close() { |
||||||
|
this.$emit('update:visible', false) |
||||||
|
}, |
||||||
|
|
||||||
|
handleOk() { |
||||||
|
if (this.okClose) { |
||||||
|
this.close() |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCancel() { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** 切换全屏 */ |
||||||
|
toggleFullscreen() { |
||||||
|
this.innerFullscreen = !this.innerFullscreen |
||||||
|
triggerWindowResizeEvent() |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.j-modal-box { |
||||||
|
|
||||||
|
&.fullscreen { |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
height: 100vh; |
||||||
|
|
||||||
|
& .ant-modal-content { |
||||||
|
height: 100vh; |
||||||
|
border-radius: 0; |
||||||
|
|
||||||
|
& .ant-modal-body { |
||||||
|
/* title 和 footer 各占 55px */ |
||||||
|
height: calc(100% - 55px - 55px); |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.no-title, &.no-footer { |
||||||
|
.ant-modal-body { |
||||||
|
height: calc(100% - 55px); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.no-title.no-footer { |
||||||
|
.ant-modal-body { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.j-modal-title-row { |
||||||
|
.left { |
||||||
|
width: calc(100% - 56px - 56px); |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
width: 56px; |
||||||
|
position: inherit; |
||||||
|
|
||||||
|
.ant-modal-close { |
||||||
|
right: 56px; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: rgba(0, 0, 0, 0.75); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 767px) { |
||||||
|
.j-modal-box.fullscreen { |
||||||
|
margin: 0; |
||||||
|
max-width: 100vw; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,66 @@ |
|||||||
|
<template> |
||||||
|
<a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder"> |
||||||
|
<a-select-option |
||||||
|
v-for="(item,index) in options" |
||||||
|
:key="index" |
||||||
|
:value="item.value"> |
||||||
|
{{ item.text || item.label }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
//option {label:,value:} |
||||||
|
export default { |
||||||
|
name: 'JSelectMultiple', |
||||||
|
props: { |
||||||
|
placeholder:{ |
||||||
|
type: String, |
||||||
|
default:'', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
readOnly:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
options:{ |
||||||
|
type: Array, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
triggerChange:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
arrayValue:!this.value?[]:this.value.split(",") |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value (val) { |
||||||
|
if(!val){ |
||||||
|
this.arrayValue = [] |
||||||
|
}else{ |
||||||
|
this.arrayValue = this.value.split(",") |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
onChange (selectedValue) { |
||||||
|
if(this.triggerChange){ |
||||||
|
this.$emit('change', selectedValue.join(",")); |
||||||
|
}else{ |
||||||
|
this.$emit('input', selectedValue.join(",")); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,116 @@ |
|||||||
|
<template> |
||||||
|
<div class="drag" ref="dragDiv"> |
||||||
|
<div class="drag_bg"></div> |
||||||
|
<div class="drag_text">{{confirmWords}}</div> |
||||||
|
<div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="border: 0.5px solid #fff;height: 34px;position: absolute;top: 0px;left: 0px;"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name:"JSlider", |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
beginClientX:0, /*距离屏幕左端距离*/ |
||||||
|
mouseMoveStata:false, /*触发拖动状态 判断*/ |
||||||
|
maxwidth:'', /*拖动最大宽度,依据滑块宽度算出来的*/ |
||||||
|
confirmWords:'拖动滑块验证', /*滑块文字*/ |
||||||
|
confirmSuccess:false /*验证成功判断*/ |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
isSuccess(){ |
||||||
|
return this.confirmSuccess |
||||||
|
}, |
||||||
|
mousedownFn:function (e) { |
||||||
|
if(!this.confirmSuccess){ |
||||||
|
e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件 |
||||||
|
this.mouseMoveStata = true; |
||||||
|
this.beginClientX = e.clientX; |
||||||
|
} |
||||||
|
}, //mousedoen 事件 |
||||||
|
successFunction(){ |
||||||
|
this.confirmSuccess = true |
||||||
|
this.confirmWords = '验证通过'; |
||||||
|
if(window.addEventListener){ |
||||||
|
document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn); |
||||||
|
document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn); |
||||||
|
}else { |
||||||
|
document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{}); |
||||||
|
} |
||||||
|
document.getElementsByClassName('drag_text')[0].style.color = '#fff' |
||||||
|
document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'; |
||||||
|
document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'; |
||||||
|
|
||||||
|
this.$emit("onSuccess",true) |
||||||
|
}, //验证成功函数 |
||||||
|
mouseMoveFn(e){ |
||||||
|
if(this.mouseMoveStata){ |
||||||
|
let width = e.clientX - this.beginClientX; |
||||||
|
if(width>0 && width<=this.maxwidth){ |
||||||
|
document.getElementsByClassName('handler')[0].style.left = width + 'px'; |
||||||
|
document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'; |
||||||
|
}else if(width>this.maxwidth){ |
||||||
|
this.successFunction(); |
||||||
|
} |
||||||
|
} |
||||||
|
}, //mousemove事件 |
||||||
|
moseUpFn(e){ |
||||||
|
this.mouseMoveStata = false; |
||||||
|
var width = e.clientX - this.beginClientX; |
||||||
|
if(width<this.maxwidth){ |
||||||
|
// ---- update-begin- author:sunjianlei --- date:20191009 --- for: 修复获取不到 handler 的时候报错 ---- |
||||||
|
let handler = document.getElementsByClassName('handler')[0] |
||||||
|
if (handler) { |
||||||
|
handler.style.left = 0 + 'px' |
||||||
|
document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px' |
||||||
|
} |
||||||
|
// ---- update-end- author:sunjianlei --- date:20191009 --- for: 修复获取不到 handler 的时候报错 ---- |
||||||
|
} |
||||||
|
} //mouseup事件 |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; |
||||||
|
document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn); |
||||||
|
document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.drag{ |
||||||
|
position: relative; |
||||||
|
background-color: #e8e8e8; |
||||||
|
width: 100%; |
||||||
|
height: 34px; |
||||||
|
line-height: 34px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.handler{ |
||||||
|
width: 40px; |
||||||
|
height: 32px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
cursor: move; |
||||||
|
} |
||||||
|
.handler_bg{ |
||||||
|
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center; |
||||||
|
} |
||||||
|
.handler_ok_bg{ |
||||||
|
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center; |
||||||
|
} |
||||||
|
.drag_bg{ |
||||||
|
background-color: #7ac23c; |
||||||
|
height: 34px; |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
.drag_text{ |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
width: 100%;text-align: center; |
||||||
|
-moz-user-select: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
user-select: none; |
||||||
|
-o-user-select:none; |
||||||
|
-ms-user-select:none; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,638 @@ |
|||||||
|
<template> |
||||||
|
<div class="j-super-query-box"> |
||||||
|
|
||||||
|
<slot name="button" :isActive="superQueryFlag" :isMobile="izMobile" :open="handleOpen" :reset="handleReset"> |
||||||
|
<a-tooltip v-if="superQueryFlag" v-bind="tooltipProps" :mouseLeaveDelay="0.2"> |
||||||
|
<!-- begin 不知道为什么不加上这段代码就无法生效 --> |
||||||
|
<span v-show="false">{{tooltipProps}}</span> |
||||||
|
<!-- end 不知道为什么不加上这段代码就无法生效 --> |
||||||
|
<template slot="title"> |
||||||
|
<span>已有高级查询条件生效</span> |
||||||
|
<a-divider type="vertical"/> |
||||||
|
<a @click="handleReset">清空</a> |
||||||
|
</template> |
||||||
|
<a-button-group> |
||||||
|
<a-button type="primary" @click="handleOpen"> |
||||||
|
<a-icon type="appstore" theme="twoTone" spin/> |
||||||
|
<span>高级查询</span> |
||||||
|
</a-button> |
||||||
|
<a-button v-if="izMobile" type="primary" icon="delete" @click="handleReset"/> |
||||||
|
</a-button-group> |
||||||
|
</a-tooltip> |
||||||
|
<a-button v-else type="primary" icon="filter" @click="handleOpen">高级查询</a-button> |
||||||
|
</slot> |
||||||
|
|
||||||
|
<j-modal |
||||||
|
title="高级查询构造器" |
||||||
|
:width="1000" |
||||||
|
:visible="visible" |
||||||
|
@cancel="handleCancel" |
||||||
|
:mask="false" |
||||||
|
:fullscreen="izMobile" |
||||||
|
class="j-super-query-modal" |
||||||
|
style="top:5%;max-height: 95%;" |
||||||
|
> |
||||||
|
|
||||||
|
<template slot="footer"> |
||||||
|
<div style="float: left"> |
||||||
|
<a-button :loading="loading" @click="handleReset">重置</a-button> |
||||||
|
<a-button :loading="loading" @click="handleSave">保存查询条件</a-button> |
||||||
|
</div> |
||||||
|
<a-button :loading="loading" @click="handleCancel">关闭</a-button> |
||||||
|
<a-button :loading="loading" type="primary" @click="handleOk">查询</a-button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-spin :spinning="loading"> |
||||||
|
<a-row> |
||||||
|
<a-col :sm="24" :md="24-5"> |
||||||
|
|
||||||
|
<a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;"> |
||||||
|
<div slot="description"> |
||||||
|
<span>没有任何查询条件</span> |
||||||
|
<a-divider type="vertical"/> |
||||||
|
<a @click="handleAdd">点击新增</a> |
||||||
|
</div> |
||||||
|
</a-empty> |
||||||
|
|
||||||
|
<a-form v-else layout="inline"> |
||||||
|
|
||||||
|
<a-row style="margin-bottom: 12px;"> |
||||||
|
<a-col :md="12" :xs="24"> |
||||||
|
<a-form-item label="过滤条件匹配" :labelCol="{md: 6,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;"> |
||||||
|
<a-select v-model="matchType" :getPopupContainer="node=>node.parentNode" style="width: 100%;"> |
||||||
|
<a-select-option value="and">AND(所有条件都要求匹配)</a-select-option> |
||||||
|
<a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
|
||||||
|
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index"> |
||||||
|
|
||||||
|
<a-col :md="8" :xs="24" style="margin-bottom: 12px;"> |
||||||
|
<a-tree-select |
||||||
|
showSearch |
||||||
|
v-model="item.field" |
||||||
|
:treeData="fieldTreeData" |
||||||
|
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" |
||||||
|
placeholder="选择查询字段" |
||||||
|
allowClear |
||||||
|
treeDefaultExpandAll |
||||||
|
:getPopupContainer="node=>node.parentNode" |
||||||
|
style="width: 100%" |
||||||
|
@select="(val,option)=>handleSelected(option,item)" |
||||||
|
> |
||||||
|
</a-tree-select> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
<a-col :md="4" :xs="24" style="margin-bottom: 12px;"> |
||||||
|
<a-select placeholder="匹配规则" :value="item.rule" :getPopupContainer="node=>node.parentNode" @change="handleRuleChange(item,$event)"> |
||||||
|
<a-select-option value="eq">等于</a-select-option> |
||||||
|
<a-select-option value="like">包含</a-select-option> |
||||||
|
<a-select-option value="right_like">以..开始</a-select-option> |
||||||
|
<a-select-option value="left_like">以..结尾</a-select-option> |
||||||
|
<a-select-option value="in">在...中</a-select-option> |
||||||
|
<a-select-option value="ne">不等于</a-select-option> |
||||||
|
<a-select-option value="gt">大于</a-select-option> |
||||||
|
<a-select-option value="ge">大于等于</a-select-option> |
||||||
|
<a-select-option value="lt">小于</a-select-option> |
||||||
|
<a-select-option value="le">小于等于</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
<a-col :md="8" :xs="24" style="margin-bottom: 12px;"> |
||||||
|
<template v-if="item.dictCode"> |
||||||
|
<template v-if="item.type === 'table-dict'"> |
||||||
|
<j-popup |
||||||
|
v-model="item.val" |
||||||
|
:code="item.dictTable" |
||||||
|
:field="item.dictCode" |
||||||
|
:orgFields="item.dictCode" |
||||||
|
:destFields="item.dictCode" |
||||||
|
></j-popup> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<j-multi-select-tag v-show="allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/> |
||||||
|
<j-dict-select-tag v-show="!allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
<j-popup v-else-if="item.type === 'popup'" :value="item.val" v-bind="item.popup" group-id="superQuery" @input="(e,v)=>handleChangeJPopup(item,e,v)"/> |
||||||
|
<j-select-multi-user |
||||||
|
v-else-if="item.type === 'select-user' || item.type === 'sel_user'" |
||||||
|
v-model="item.val" |
||||||
|
:buttons="false" |
||||||
|
:multiple="false" |
||||||
|
placeholder="请选择用户" |
||||||
|
:returnKeys="['id', item.customReturnField || 'username']" |
||||||
|
/> |
||||||
|
<j-select-depart |
||||||
|
v-else-if="item.type === 'select-depart' || item.type === 'sel_depart'" |
||||||
|
v-model="item.val" |
||||||
|
:multi="false" |
||||||
|
placeholder="请选择部门" |
||||||
|
:customReturnField="item.customReturnField || 'id'" |
||||||
|
/> |
||||||
|
<a-select |
||||||
|
v-else-if="item.options instanceof Array" |
||||||
|
v-model="item.val" |
||||||
|
:options="item.options" |
||||||
|
allowClear |
||||||
|
placeholder="请选择" |
||||||
|
:mode="allowMultiple(item)?'multiple':''" |
||||||
|
/> |
||||||
|
<j-area-linkage v-model="item.val" v-else-if="item.type==='area-linkage' || item.type==='pca'" style="width: 100%"/> |
||||||
|
<j-date v-else-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期" style="width: 100%"></j-date> |
||||||
|
<j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></j-date> |
||||||
|
<a-time-picker v-else-if="item.type==='time'" :value="item.val ? moment(item.val,'HH:mm:ss') : null" format="HH:mm:ss" style="width: 100%" @change="(time,value)=>item.val=value"/> |
||||||
|
<a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/> |
||||||
|
<a-input v-else v-model="item.val" placeholder="请输入值"/> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
<a-col :md="4" :xs="0" style="margin-bottom: 12px;"> |
||||||
|
<a-button @click="handleAdd" icon="plus"></a-button> |
||||||
|
<a-button @click="handleDel( index )" icon="minus"></a-button> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
<a-col :md="0" :xs="24" style="margin-bottom: 12px;text-align: right;"> |
||||||
|
<a-button @click="handleAdd" icon="plus"></a-button> |
||||||
|
<a-button @click="handleDel( index )" icon="minus"></a-button> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
</a-row> |
||||||
|
|
||||||
|
</a-form> |
||||||
|
</a-col> |
||||||
|
<a-col :sm="24" :md="5"> |
||||||
|
<!-- 查询记录 --> |
||||||
|
|
||||||
|
<a-card class="j-super-query-history-card" :bordered="true"> |
||||||
|
<div slot="title"> |
||||||
|
保存的查询 |
||||||
|
</div> |
||||||
|
|
||||||
|
<a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/> |
||||||
|
<a-tree |
||||||
|
v-else |
||||||
|
class="j-super-query-history-tree" |
||||||
|
showIcon |
||||||
|
:treeData="saveTreeData" |
||||||
|
:selectedKeys="[]" |
||||||
|
@select="handleTreeSelect" |
||||||
|
> |
||||||
|
</a-tree> |
||||||
|
</a-card> |
||||||
|
|
||||||
|
|
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
|
||||||
|
|
||||||
|
</a-spin> |
||||||
|
|
||||||
|
<a-modal title="请输入保存的名称" :visible="prompt.visible" @cancel="prompt.visible=false" @ok="handlePromptOk"> |
||||||
|
<a-input v-model="prompt.value"></a-input> |
||||||
|
</a-modal> |
||||||
|
|
||||||
|
</j-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import moment from 'moment' |
||||||
|
import * as utils from '@/utils/util' |
||||||
|
import JDate from '@/components/jeecg/JDate.vue' |
||||||
|
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart' |
||||||
|
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser' |
||||||
|
import JAreaLinkage from '@comp/jeecg/JAreaLinkage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSuperQuery', |
||||||
|
// mixins: [mixinDevice], |
||||||
|
components: { JAreaLinkage, JDate, JSelectDepart, JSelectMultiUser }, |
||||||
|
props: { |
||||||
|
/* |
||||||
|
fieldList: [{ |
||||||
|
value:'', |
||||||
|
text:'', |
||||||
|
type:'', |
||||||
|
dictCode:'' // 只要 dictCode 有值,无论 type 是什么,都显示为字典下拉框 |
||||||
|
}] |
||||||
|
type:date datetime int number string |
||||||
|
* */ |
||||||
|
fieldList: { |
||||||
|
type: Array, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
/* |
||||||
|
* 这个回调函数接收一个数组参数 即查询条件 |
||||||
|
* */ |
||||||
|
callback: { |
||||||
|
type: String, |
||||||
|
required: false, |
||||||
|
default: 'handleSuperQuery' |
||||||
|
}, |
||||||
|
|
||||||
|
// 当前是否在加载中 |
||||||
|
loading: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
|
||||||
|
// 保存查询条件的唯一 code,通过该 code 区分 |
||||||
|
// 默认为 null,代表以当前路由全路径为区分Code |
||||||
|
saveCode: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
moment, |
||||||
|
fieldTreeData: [], |
||||||
|
|
||||||
|
prompt: { |
||||||
|
visible: false, |
||||||
|
value: '' |
||||||
|
}, |
||||||
|
|
||||||
|
visible: false, |
||||||
|
queryParamsModel: [], |
||||||
|
treeIcon: <a-icon type="file-text"/>, |
||||||
|
// 保存查询条件的treeData |
||||||
|
saveTreeData: [], |
||||||
|
// 保存查询条件的前缀名 |
||||||
|
saveCodeBefore: 'JSuperQuerySaved_', |
||||||
|
// 查询类型,过滤条件匹配(and、or) |
||||||
|
matchType: 'and', |
||||||
|
superQueryFlag: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
izMobile() { |
||||||
|
return this.device === 'mobile' |
||||||
|
}, |
||||||
|
tooltipProps() { |
||||||
|
return this.izMobile ? { visible: false } : {} |
||||||
|
}, |
||||||
|
fullSaveCode() { |
||||||
|
let saveCode = this.saveCode |
||||||
|
if (saveCode == null || saveCode === '') { |
||||||
|
saveCode = this.$route.fullPath |
||||||
|
} |
||||||
|
return this.saveCodeBefore + saveCode |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// 当 saveCode 变化时,重新查询已保存的条件 |
||||||
|
fullSaveCode: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
let list = this.$ls.get(this.fullSaveCode) |
||||||
|
if (list instanceof Array) { |
||||||
|
this.saveTreeData = list.map(i => this.renderSaveTreeData(i)) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
fieldList: { |
||||||
|
deep: true, |
||||||
|
immediate: true, |
||||||
|
handler(val) { |
||||||
|
let mainData = [], subData = [] |
||||||
|
val.forEach(item => { |
||||||
|
let data = { ...item } |
||||||
|
data.label = data.label || data.text |
||||||
|
let hasChildren = (data.children instanceof Array) |
||||||
|
data.disabled = hasChildren |
||||||
|
data.selectable = !hasChildren |
||||||
|
if (hasChildren) { |
||||||
|
data.children = data.children.map(item2 => { |
||||||
|
let child = { ...item2 } |
||||||
|
child.label = child.label || child.text |
||||||
|
child.label = data.label + '-' + child.label |
||||||
|
child.value = data.value + ',' + child.value |
||||||
|
child.val = '' |
||||||
|
return child |
||||||
|
}) |
||||||
|
data.val = '' |
||||||
|
subData.push(data) |
||||||
|
} else { |
||||||
|
mainData.push(data) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.fieldTreeData = mainData.concat(subData) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
show() { |
||||||
|
if (!this.queryParamsModel || this.queryParamsModel.length === 0) { |
||||||
|
this.resetLine() |
||||||
|
} |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
handleOk() { |
||||||
|
if (!this.isNullArray(this.queryParamsModel)) { |
||||||
|
let event = { |
||||||
|
matchType: this.matchType, |
||||||
|
params: this.removeEmptyObject(this.queryParamsModel) |
||||||
|
} |
||||||
|
// 移动端模式下关闭弹窗 |
||||||
|
if (this.izMobile) { |
||||||
|
this.visible = false |
||||||
|
} |
||||||
|
this.emitCallback(event) |
||||||
|
} else { |
||||||
|
this.$message.warn("不能查询空条件") |
||||||
|
} |
||||||
|
}, |
||||||
|
emitCallback(event = {}) { |
||||||
|
let { params = [], matchType = this.matchType } = event |
||||||
|
this.superQueryFlag = (params && params.length > 0) |
||||||
|
for (let param of params) { |
||||||
|
if (Array.isArray(param.val)) { |
||||||
|
param.val = param.val.join(',') |
||||||
|
} |
||||||
|
} |
||||||
|
console.debug('---高级查询参数--->', { params, matchType }) |
||||||
|
this.$emit(this.callback, params, matchType) |
||||||
|
}, |
||||||
|
handleCancel() { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('close') |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
handleAdd() { |
||||||
|
this.addNewLine() |
||||||
|
}, |
||||||
|
addNewLine() { |
||||||
|
this.queryParamsModel.push({ rule: 'eq' }) |
||||||
|
}, |
||||||
|
resetLine() { |
||||||
|
this.superQueryFlag = false |
||||||
|
this.queryParamsModel = [] |
||||||
|
this.addNewLine() |
||||||
|
}, |
||||||
|
handleDel(index) { |
||||||
|
this.queryParamsModel.splice(index, 1) |
||||||
|
}, |
||||||
|
handleSelected(node, item) { |
||||||
|
let { type, options, dictCode, dictTable, customReturnField, popup } = node.dataRef |
||||||
|
item['type'] = type |
||||||
|
item['options'] = options |
||||||
|
item['dictCode'] = dictCode |
||||||
|
item['dictTable'] = dictTable |
||||||
|
item['customReturnField'] = customReturnField |
||||||
|
if (popup) { |
||||||
|
item['popup'] = popup |
||||||
|
} |
||||||
|
this.$set(item, 'val', undefined) |
||||||
|
}, |
||||||
|
handleOpen() { |
||||||
|
this.show() |
||||||
|
}, |
||||||
|
handleReset() { |
||||||
|
this.resetLine() |
||||||
|
this.emitCallback() |
||||||
|
}, |
||||||
|
handleSave() { |
||||||
|
let queryParams = this.removeEmptyObject(this.queryParamsModel) |
||||||
|
if (this.isNullArray(queryParams)) { |
||||||
|
this.$message.warning('空条件不能保存') |
||||||
|
} else { |
||||||
|
this.prompt.value = '' |
||||||
|
this.prompt.visible = true |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePromptOk() { |
||||||
|
let { value } = this.prompt |
||||||
|
if(!value){ |
||||||
|
this.$message.warning('保存名称不能为空') |
||||||
|
return |
||||||
|
} |
||||||
|
// 取出查询条件 |
||||||
|
let records = this.removeEmptyObject(this.queryParamsModel) |
||||||
|
// 判断有没有重名的 |
||||||
|
let filterList = this.saveTreeData.filter(i => i.originTitle === value) |
||||||
|
if (filterList.length > 0) { |
||||||
|
this.$confirm({ |
||||||
|
content: `${value} 已存在,是否覆盖?`, |
||||||
|
onOk: () => { |
||||||
|
this.prompt.visible = false |
||||||
|
filterList[0].records = records |
||||||
|
this.saveToLocalStore() |
||||||
|
this.$message.success('保存成功') |
||||||
|
} |
||||||
|
}) |
||||||
|
} else { |
||||||
|
// 没有重名的,直接添加 |
||||||
|
this.prompt.visible = false |
||||||
|
// 添加到树列表中 |
||||||
|
this.saveTreeData.push(this.renderSaveTreeData({ |
||||||
|
title: value, |
||||||
|
matchType: this.matchType, |
||||||
|
records: records |
||||||
|
})) |
||||||
|
// 保存到 LocalStore |
||||||
|
this.saveToLocalStore() |
||||||
|
this.$message.success('保存成功') |
||||||
|
} |
||||||
|
}, |
||||||
|
handleTreeSelect(idx, event) { |
||||||
|
if (event.selectedNodes[0]) { |
||||||
|
let { matchType, records } = event.selectedNodes[0].data.props |
||||||
|
// 将保存的matchType取出,兼容旧数据,如果没有保存就还是使用原来的 |
||||||
|
this.matchType = matchType || this.matchType |
||||||
|
this.queryParamsModel = utils.cloneObject(records) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleRemoveSaveTreeItem(event, vNode) { |
||||||
|
// 阻止事件冒泡 |
||||||
|
event.stopPropagation() |
||||||
|
|
||||||
|
this.$confirm({ |
||||||
|
content: '是否删除当前查询?', |
||||||
|
onOk: () => { |
||||||
|
let { eventKey } = vNode |
||||||
|
this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1) |
||||||
|
this.saveToLocalStore() |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 将查询保存到 LocalStore 里 |
||||||
|
saveToLocalStore() { |
||||||
|
let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records })) |
||||||
|
this.$ls.set(this.fullSaveCode, saveValue) |
||||||
|
}, |
||||||
|
|
||||||
|
isNullArray(array) { |
||||||
|
//判断是不是空数组对象 |
||||||
|
if (!array || array.length === 0) { |
||||||
|
return true |
||||||
|
} |
||||||
|
if (array.length === 1) { |
||||||
|
let obj = array[0] |
||||||
|
if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) { |
||||||
|
return true |
||||||
|
} |
||||||
|
} |
||||||
|
return false |
||||||
|
}, |
||||||
|
// 去掉数组中的空对象 |
||||||
|
removeEmptyObject(arr) { |
||||||
|
let array = utils.cloneObject(arr) |
||||||
|
for (let i = 0; i < array.length; i++) { |
||||||
|
let item = array[i] |
||||||
|
if (item == null || Object.keys(item).length <= 0) { |
||||||
|
array.splice(i--, 1) |
||||||
|
} else { |
||||||
|
if (Array.isArray(item.options)) { |
||||||
|
// 如果有字典属性,就不需要保存 options 了 |
||||||
|
if (item.dictCode) { |
||||||
|
// 去掉特殊属性 |
||||||
|
delete item.options |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return array |
||||||
|
}, |
||||||
|
|
||||||
|
/** 渲染保存查询条件的 title(加个删除按钮) */ |
||||||
|
renderSaveTreeData(item) { |
||||||
|
item.icon = this.treeIcon |
||||||
|
item.originTitle = item['title'] |
||||||
|
item.title = (fn, vNode) => { |
||||||
|
let { originTitle } = vNode.dataRef |
||||||
|
return ( |
||||||
|
<div class="j-history-tree-title"> |
||||||
|
<span>{originTitle}</span> |
||||||
|
|
||||||
|
<div class="j-history-tree-title-closer" onClick={e => this.handleRemoveSaveTreeItem(e, vNode)}> |
||||||
|
<a-icon type="close-circle"/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
return item |
||||||
|
}, |
||||||
|
|
||||||
|
/** 判断是否允许多选 */ |
||||||
|
allowMultiple(item) { |
||||||
|
return item.rule === 'in' |
||||||
|
}, |
||||||
|
|
||||||
|
handleRuleChange(item, newValue) { |
||||||
|
let oldValue = item.rule |
||||||
|
this.$set(item, 'rule', newValue) |
||||||
|
// 上一个规则是否是 in,且type是字典或下拉 |
||||||
|
if (oldValue === 'in') { |
||||||
|
if (item.dictCode || item.options instanceof Array) { |
||||||
|
let value = item.val |
||||||
|
if (typeof item.val === 'string') { |
||||||
|
value = item.val.split(',')[0] |
||||||
|
} else if (Array.isArray(item.val)) { |
||||||
|
value = item.val[0] |
||||||
|
} |
||||||
|
this.$set(item, 'val', value) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
handleChangeJPopup(item, e, values) { |
||||||
|
item.val = values[item.popup['destFields']] |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
|
||||||
|
.j-super-query-box { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.j-super-query-modal { |
||||||
|
|
||||||
|
.j-super-query-history-card { |
||||||
|
/deep/ .ant-card-body, |
||||||
|
/deep/ .ant-card-head-title { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .ant-card-head { |
||||||
|
padding: 4px 8px; |
||||||
|
min-height: initial; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.j-super-query-history-empty { |
||||||
|
/deep/ .ant-empty-image { |
||||||
|
height: 80px; |
||||||
|
line-height: 80px; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ img { |
||||||
|
width: 80px; |
||||||
|
height: 65px; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .ant-empty-description { |
||||||
|
color: #afafaf; |
||||||
|
margin: 8px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.j-super-query-history-tree { |
||||||
|
|
||||||
|
.j-history-tree-title { |
||||||
|
width: calc(100% - 24px); |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
&-closer { |
||||||
|
color: #999999; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
text-align: center; |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.3s, color 0.3s; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
.j-history-tree-title-closer { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .ant-tree-switcher { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .ant-tree-node-content-wrapper { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,57 @@ |
|||||||
|
<template> |
||||||
|
<a-switch v-model="checkStatus" :disabled="disabled" @change="handleChange"/> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSwitch', |
||||||
|
props: { |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
options:{ |
||||||
|
type:Array, |
||||||
|
required:false, |
||||||
|
default:()=>['Y','N'] |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
checkStatus: false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value:{ |
||||||
|
immediate: true, |
||||||
|
handler(val){ |
||||||
|
if(!val){ |
||||||
|
this.checkStatus = false |
||||||
|
this.$emit('change', this.options[1]); |
||||||
|
}else{ |
||||||
|
if(this.options[0]==val){ |
||||||
|
this.checkStatus = true |
||||||
|
}else{ |
||||||
|
this.checkStatus = false |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleChange(checked){ |
||||||
|
let flag = checked===false?this.options[1]:this.options[0]; |
||||||
|
this.$emit('change', flag); |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,199 @@ |
|||||||
|
<template> |
||||||
|
<a-tree-select |
||||||
|
allowClear |
||||||
|
labelInValue |
||||||
|
style="width: 100%" |
||||||
|
:disabled="disabled" |
||||||
|
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" |
||||||
|
:placeholder="placeholder" |
||||||
|
:loadData="asyncLoadTreeData" |
||||||
|
:value="treeValue" |
||||||
|
:treeData="treeData" |
||||||
|
@change="onChange" |
||||||
|
@search="onSearch"> |
||||||
|
</a-tree-select> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JTreeDict', |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
treeData:[], |
||||||
|
treeValue: null, |
||||||
|
url_root:"/sys/category/loadTreeRoot", |
||||||
|
url_children:"/sys/category/loadTreeChildren", |
||||||
|
url_view:'/sys/category/loadOne', |
||||||
|
} |
||||||
|
}, |
||||||
|
props:{ |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
placeholder:{ |
||||||
|
type: String, |
||||||
|
default: '请选择', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
parentCode:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
field:{ |
||||||
|
type: String, |
||||||
|
default: 'id', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
root:{ |
||||||
|
type:Object, |
||||||
|
required:false, |
||||||
|
default:()=>{ |
||||||
|
return { |
||||||
|
pid:'0' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
async:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
root:{ |
||||||
|
handler(val){ |
||||||
|
console.log("root-change",val) |
||||||
|
}, |
||||||
|
deep:true |
||||||
|
}, |
||||||
|
parentCode:{ |
||||||
|
handler(){ |
||||||
|
this.loadRoot() |
||||||
|
} |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
handler(){ |
||||||
|
this.loadViewInfo() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.loadRoot() |
||||||
|
this.loadViewInfo() |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
loadViewInfo(){ |
||||||
|
if(!this.value || this.value=="0"){ |
||||||
|
this.treeValue = null |
||||||
|
}else{ |
||||||
|
let param = { |
||||||
|
field:this.field, |
||||||
|
val:this.value |
||||||
|
} |
||||||
|
getAction(this.url_view,param).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
this.treeValue = { |
||||||
|
value:this.value, |
||||||
|
label:res.result.name |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
loadRoot(){ |
||||||
|
let param = { |
||||||
|
async:this.async, |
||||||
|
pcode:this.parentCode |
||||||
|
} |
||||||
|
getAction(this.url_root,param).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
this.handleTreeNodeValue(res.result) |
||||||
|
console.log("aaaa",res.result) |
||||||
|
this.treeData = [...res.result] |
||||||
|
}else{ |
||||||
|
this.$message.error(res.message) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
asyncLoadTreeData (treeNode) { |
||||||
|
return new Promise((resolve) => { |
||||||
|
if(!this.async){ |
||||||
|
resolve() |
||||||
|
return |
||||||
|
} |
||||||
|
if (treeNode.$vnode.children) { |
||||||
|
resolve() |
||||||
|
return |
||||||
|
} |
||||||
|
let pid = treeNode.$vnode.key |
||||||
|
let param = { |
||||||
|
pid:pid |
||||||
|
} |
||||||
|
getAction(this.url_children,param).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
this.handleTreeNodeValue(res.result) |
||||||
|
this.addChildren(pid,res.result,this.treeData) |
||||||
|
this.treeData = [...this.treeData] |
||||||
|
} |
||||||
|
resolve() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
addChildren(pid,children,treeArray){ |
||||||
|
if(treeArray && treeArray.length>0){ |
||||||
|
for(let item of treeArray){ |
||||||
|
if(item.key == pid){ |
||||||
|
if(!children || children.length==0){ |
||||||
|
item.leaf = true |
||||||
|
}else{ |
||||||
|
item.children = children |
||||||
|
} |
||||||
|
break |
||||||
|
}else{ |
||||||
|
this.addChildren(pid,children,item.children) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
handleTreeNodeValue(result){ |
||||||
|
let storeField = this.field=='code'?'code':'key' |
||||||
|
for(let i of result){ |
||||||
|
i.value = i[storeField] |
||||||
|
i.isLeaf = (!i.leaf)?false:true |
||||||
|
if(i.children && i.children.length>0){ |
||||||
|
this.handleTreeNodeValue(i.children) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onChange(value){ |
||||||
|
console.log(value) |
||||||
|
if(!value){ |
||||||
|
this.$emit('change', ''); |
||||||
|
}else{ |
||||||
|
this.$emit('change', value.value); |
||||||
|
} |
||||||
|
this.treeValue = value |
||||||
|
}, |
||||||
|
onSearch(value){ |
||||||
|
console.log(value) |
||||||
|
}, |
||||||
|
getCurrTreeData(){ |
||||||
|
return this.treeData |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,260 @@ |
|||||||
|
<template> |
||||||
|
<a-tree-select |
||||||
|
allowClear |
||||||
|
labelInValue |
||||||
|
:getPopupContainer="(node) => node.parentNode" |
||||||
|
style="width: 100%" |
||||||
|
:disabled="disabled" |
||||||
|
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" |
||||||
|
:placeholder="placeholder" |
||||||
|
:loadData="asyncLoadTreeData" |
||||||
|
:value="treeValue" |
||||||
|
:treeData="treeData" |
||||||
|
:multiple="multiple" |
||||||
|
@change="onChange" |
||||||
|
@search="onSearch"> |
||||||
|
</a-tree-select> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
|
||||||
|
/* |
||||||
|
* 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件 |
||||||
|
* <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select> |
||||||
|
* */ |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JTreeSelect', |
||||||
|
props: { |
||||||
|
value:{ |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
placeholder:{ |
||||||
|
type: String, |
||||||
|
default: '请选择', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
dict:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
pidField:{ |
||||||
|
type: String, |
||||||
|
default: 'pid', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
pidValue:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
hasChildField:{ |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
required: false |
||||||
|
}, |
||||||
|
condition:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
// 是否支持多选 |
||||||
|
multiple: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
loadTriggleChange:{ |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
treeValue: null, |
||||||
|
treeData:[], |
||||||
|
url:"/sys/dict/loadTreeData", |
||||||
|
view:'/sys/dict/loadDictItem/', |
||||||
|
tableName:"", |
||||||
|
text:"", |
||||||
|
code:"", |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value () { |
||||||
|
this.loadItemByCode() |
||||||
|
}, |
||||||
|
dict(){ |
||||||
|
this.initDictInfo() |
||||||
|
this.loadRoot(); |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.validateProp().then(()=>{ |
||||||
|
this.initDictInfo() |
||||||
|
this.loadRoot() |
||||||
|
this.loadItemByCode() |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
loadItemByCode(){ |
||||||
|
if(!this.value || this.value=="0"){ |
||||||
|
this.treeValue = null |
||||||
|
}else{ |
||||||
|
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
let values = this.value.split(',') |
||||||
|
this.treeValue = res.result.map((item, index) => ({ |
||||||
|
key: values[index], |
||||||
|
value: values[index], |
||||||
|
label: item |
||||||
|
})) |
||||||
|
this.onLoadTriggleChange(res.result[0]); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoadTriggleChange(text){ |
||||||
|
//只有单选才会触发 |
||||||
|
if(!this.multiple && this.loadTriggleChange){ |
||||||
|
this.$emit('change', this.value,text) |
||||||
|
} |
||||||
|
}, |
||||||
|
initDictInfo(){ |
||||||
|
let arr = this.dict.split(",") |
||||||
|
this.tableName = arr[0] |
||||||
|
this.text = arr[1] |
||||||
|
this.code = arr[2] |
||||||
|
}, |
||||||
|
asyncLoadTreeData (treeNode) { |
||||||
|
return new Promise((resolve) => { |
||||||
|
if (treeNode.$vnode.children) { |
||||||
|
resolve() |
||||||
|
return |
||||||
|
} |
||||||
|
let pid = treeNode.$vnode.key |
||||||
|
let param = { |
||||||
|
pid:pid, |
||||||
|
tableName:this.tableName, |
||||||
|
text:this.text, |
||||||
|
code:this.code, |
||||||
|
pidField:this.pidField, |
||||||
|
hasChildField:this.hasChildField, |
||||||
|
condition:this.condition |
||||||
|
} |
||||||
|
getAction(this.url,param).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
for(let i of res.result){ |
||||||
|
i.value = i.key |
||||||
|
if(i.leaf==false){ |
||||||
|
i.isLeaf=false |
||||||
|
}else if(i.leaf==true){ |
||||||
|
i.isLeaf=true |
||||||
|
} |
||||||
|
} |
||||||
|
this.addChildren(pid,res.result,this.treeData) |
||||||
|
this.treeData = [...this.treeData] |
||||||
|
} |
||||||
|
resolve() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
addChildren(pid,children,treeArray){ |
||||||
|
if(treeArray && treeArray.length>0){ |
||||||
|
for(let item of treeArray){ |
||||||
|
if(item.key == pid){ |
||||||
|
if(!children || children.length==0){ |
||||||
|
item.isLeaf=true |
||||||
|
}else{ |
||||||
|
item.children = children |
||||||
|
} |
||||||
|
break |
||||||
|
}else{ |
||||||
|
this.addChildren(pid,children,item.children) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
loadRoot(){ |
||||||
|
let param = { |
||||||
|
pid:this.pidValue, |
||||||
|
tableName:this.tableName, |
||||||
|
text:this.text, |
||||||
|
code:this.code, |
||||||
|
pidField:this.pidField, |
||||||
|
hasChildField:this.hasChildField, |
||||||
|
condition:this.condition |
||||||
|
} |
||||||
|
getAction(this.url,param).then(res=>{ |
||||||
|
if(res.success && res.result){ |
||||||
|
for(let i of res.result){ |
||||||
|
i.value = i.key |
||||||
|
if(i.leaf==false){ |
||||||
|
i.isLeaf=false |
||||||
|
}else if(i.leaf==true){ |
||||||
|
i.isLeaf=true |
||||||
|
} |
||||||
|
} |
||||||
|
this.treeData = [...res.result] |
||||||
|
}else{ |
||||||
|
console.log("数根节点查询结果-else",res) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
onChange(value){ |
||||||
|
if(!value){ |
||||||
|
this.$emit('change', ''); |
||||||
|
this.treeValue = null |
||||||
|
} else if (value instanceof Array) { |
||||||
|
this.$emit('change', value.map(item => item.value).join(',')) |
||||||
|
this.treeValue = value |
||||||
|
} else { |
||||||
|
this.$emit('change', value.value,value.label) |
||||||
|
this.treeValue = value |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
onSearch(value){ |
||||||
|
console.log(value) |
||||||
|
}, |
||||||
|
getCurrTreeData(){ |
||||||
|
return this.treeData |
||||||
|
}, |
||||||
|
validateProp(){ |
||||||
|
let mycondition = this.condition |
||||||
|
return new Promise((resolve,reject)=>{ |
||||||
|
if(!mycondition){ |
||||||
|
resolve(); |
||||||
|
}else{ |
||||||
|
try { |
||||||
|
let test=JSON.parse(mycondition); |
||||||
|
console.log("aaaaasdsdd",typeof test) |
||||||
|
if(typeof test == 'object' && test){ |
||||||
|
resolve() |
||||||
|
}else{ |
||||||
|
this.$message.error("组件JTreeSelect-condition传值有误,需要一个json字符串!") |
||||||
|
reject() |
||||||
|
} |
||||||
|
} catch(e) { |
||||||
|
this.$message.error("组件JTreeSelect-condition传值有误,需要一个json字符串!") |
||||||
|
reject() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼 |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,180 @@ |
|||||||
|
<template> |
||||||
|
<a-table |
||||||
|
:rowKey="rowKey" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:expandedRowKeys="expandedRowKeys" |
||||||
|
v-bind="tableAttrs" |
||||||
|
v-on="$listeners" |
||||||
|
@expand="handleExpand" |
||||||
|
@expandedRowsChange="expandedRowKeys=$event"> |
||||||
|
|
||||||
|
<template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index"> |
||||||
|
<slot :name="slotItem" v-bind="{text,record,index}"></slot> |
||||||
|
</template> |
||||||
|
|
||||||
|
</a-table> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JTreeTable', |
||||||
|
props: { |
||||||
|
rowKey: { |
||||||
|
type: String, |
||||||
|
default: 'id' |
||||||
|
}, |
||||||
|
// 根据什么查询,如果传递 id 就根据 id 查询 |
||||||
|
queryKey: { |
||||||
|
type: String, |
||||||
|
default: 'parentId' |
||||||
|
}, |
||||||
|
queryParams: { |
||||||
|
type: Object, |
||||||
|
default: () => ({}) |
||||||
|
}, |
||||||
|
// 查询顶级时的值,如果顶级为0,则传0 |
||||||
|
topValue: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
columns: { |
||||||
|
type: Array, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
url: { |
||||||
|
type: String, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
childrenUrl: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
tableProps: { |
||||||
|
type: Object, |
||||||
|
default: () => ({}) |
||||||
|
}, |
||||||
|
/** 是否在创建组件的时候就查询数据 */ |
||||||
|
immediateRequest: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
condition:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dataSource: [], |
||||||
|
expandedRowKeys: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
getChildrenUrl() { |
||||||
|
if (this.childrenUrl) { |
||||||
|
return this.childrenUrl |
||||||
|
} else { |
||||||
|
return this.url |
||||||
|
} |
||||||
|
}, |
||||||
|
slots() { |
||||||
|
let slots = [] |
||||||
|
for (let column of this.columns) { |
||||||
|
if (column.scopedSlots && column.scopedSlots.customRender) { |
||||||
|
slots.push(column.scopedSlots.customRender) |
||||||
|
} |
||||||
|
} |
||||||
|
return slots |
||||||
|
}, |
||||||
|
tableAttrs() { |
||||||
|
return Object.assign(this.$attrs, this.tableProps) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
queryParams: { |
||||||
|
deep: true, |
||||||
|
handler() { |
||||||
|
this.loadData() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
if (this.immediateRequest) this.loadData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
/** 加载数据*/ |
||||||
|
loadData(id = this.topValue, first = true, url = this.url) { |
||||||
|
this.$emit('requestBefore', { first }) |
||||||
|
|
||||||
|
if (first) { |
||||||
|
this.expandedRowKeys = [] |
||||||
|
} |
||||||
|
|
||||||
|
let params = Object.assign({}, this.queryParams || {}) |
||||||
|
params[this.queryKey] = id |
||||||
|
if(this.condition && this.condition.length>0){ |
||||||
|
params['condition'] = this.condition |
||||||
|
} |
||||||
|
|
||||||
|
return getAction(url, params).then(res => { |
||||||
|
let list = [] |
||||||
|
if (res.result instanceof Array) { |
||||||
|
list = res.result |
||||||
|
} else if (res.result.records instanceof Array) { |
||||||
|
list = res.result.records |
||||||
|
} else { |
||||||
|
throw '返回数据类型不识别' |
||||||
|
} |
||||||
|
let dataSource = list.map(item => { |
||||||
|
// 判断是否标记了带有子级 |
||||||
|
if (item.hasChildren === true) { |
||||||
|
// 查找第一个带有dataIndex的值的列 |
||||||
|
let firstColumn |
||||||
|
for (let column of this.columns) { |
||||||
|
firstColumn = column.dataIndex |
||||||
|
if (firstColumn) break |
||||||
|
} |
||||||
|
// 定义默认展开时显示的loading子级,实际子级数据只在展开时加载 |
||||||
|
let loadChild = { id: `${item.id}_loadChild`, [firstColumn]: 'loading...', isLoading: true } |
||||||
|
item.children = [loadChild] |
||||||
|
} |
||||||
|
return item |
||||||
|
}) |
||||||
|
if (first) { |
||||||
|
this.dataSource = dataSource |
||||||
|
} |
||||||
|
this.$emit('requestSuccess', { first, dataSource, res }) |
||||||
|
return Promise.resolve(dataSource) |
||||||
|
}).finally(() => this.$emit('requestFinally', { first })) |
||||||
|
}, |
||||||
|
|
||||||
|
/** 点击展开图标时触发 */ |
||||||
|
handleExpand(expanded, record) { |
||||||
|
// 判断是否是展开状态 |
||||||
|
if (expanded) { |
||||||
|
// 判断子级的首个项的标记是否是“正在加载中”,如果是就加载数据 |
||||||
|
if (record.children[0].isLoading === true) { |
||||||
|
this.loadData(record.id, false, this.getChildrenUrl).then(dataSource => { |
||||||
|
// 处理好的数据可直接赋值给children |
||||||
|
if (dataSource.length === 0) { |
||||||
|
record.children = null |
||||||
|
} else { |
||||||
|
record.children = dataSource |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,452 @@ |
|||||||
|
<template> |
||||||
|
<div :id="containerId" style="position: relative"> |
||||||
|
|
||||||
|
<!-- ---------------------------- begin 图片左右换位置 ------------------------------------- --> |
||||||
|
<div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;"> |
||||||
|
<div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px"> |
||||||
|
<a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a> |
||||||
|
<a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- ---------------------------- end 图片左右换位置 ------------------------------------- --> |
||||||
|
|
||||||
|
<a-upload |
||||||
|
name="file" |
||||||
|
:multiple="true" |
||||||
|
:action="uploadAction" |
||||||
|
:headers="headers" |
||||||
|
:data="{'biz':bizPath}" |
||||||
|
:fileList="fileList" |
||||||
|
:beforeUpload="beforeUpload" |
||||||
|
@change="handleChange" |
||||||
|
:disabled="disabled" |
||||||
|
:returnUrl="returnUrl" |
||||||
|
:listType="complistType" |
||||||
|
@preview="handlePreview" |
||||||
|
:class="{'uploadty-disabled':disabled}"> |
||||||
|
<template> |
||||||
|
<div v-if="isImageComp"> |
||||||
|
<a-icon type="plus" /> |
||||||
|
<div class="ant-upload-text">{{ text }}</div> |
||||||
|
</div> |
||||||
|
<a-button v-else-if="buttonVisible"> |
||||||
|
<a-icon type="upload" />{{ text }} |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
</a-upload> |
||||||
|
<a-modal :visible="previewVisible" :width="1000" :footer="null" @cancel="handleCancel"> |
||||||
|
<img alt="example" style="width: 100%" :src="previewImage" /> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import Vue from 'vue' |
||||||
|
import { getFileAccessHttpUrl } from '@/api/manage'; |
||||||
|
import { fileSizeLimit } from '@/api/api' |
||||||
|
|
||||||
|
const FILE_TYPE_ALL = "all" |
||||||
|
const FILE_TYPE_IMG = "image" |
||||||
|
const FILE_TYPE_TXT = "file" |
||||||
|
const uidGenerator=()=>{ |
||||||
|
return '-'+parseInt(Math.random()*10000+1,10); |
||||||
|
} |
||||||
|
const getFileName=(path)=>{ |
||||||
|
if(path.lastIndexOf("\\")>=0){ |
||||||
|
let reg=new RegExp("\\\\","g"); |
||||||
|
path = path.replace(reg,"/"); |
||||||
|
} |
||||||
|
return path.substring(path.lastIndexOf("/")+1); |
||||||
|
} |
||||||
|
export default { |
||||||
|
name: 'JUpload', |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
uploadAction:window._CONFIG['domianURL']+"/systemConfig/upload", |
||||||
|
headers:{}, |
||||||
|
fileList: [], |
||||||
|
newFileList: [], |
||||||
|
uploadGoOn:true, |
||||||
|
previewVisible: false, |
||||||
|
//---------------------------- begin 图片左右换位置 ------------------------------------- |
||||||
|
previewImage: '', |
||||||
|
containerId:'', |
||||||
|
top:'', |
||||||
|
left:'', |
||||||
|
moveDisplay:'none', |
||||||
|
showMoverTask:false, |
||||||
|
moverHold:false, |
||||||
|
currentImg:'', |
||||||
|
//---------------------------- end 图片左右换位置 ------------------------------------- |
||||||
|
sizeLimit: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
props:{ |
||||||
|
text:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:"点击上传" |
||||||
|
}, |
||||||
|
fileType:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:FILE_TYPE_ALL |
||||||
|
}, |
||||||
|
/*这个属性用于控制文件上传的业务路径*/ |
||||||
|
bizPath:{ |
||||||
|
type:String, |
||||||
|
required:false, |
||||||
|
default:"temp" |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
type:[String,Array], |
||||||
|
required:false |
||||||
|
}, |
||||||
|
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击 |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
required:false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击 |
||||||
|
//此属性被废弃了 |
||||||
|
triggerChange:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
/** |
||||||
|
* update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url, |
||||||
|
* true:仅返回url |
||||||
|
* false:返回fileName filePath fileSize |
||||||
|
*/ |
||||||
|
returnUrl:{ |
||||||
|
type:Boolean, |
||||||
|
required:false, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
number:{ |
||||||
|
type:Number, |
||||||
|
required:false, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
buttonVisible:{ |
||||||
|
type:Boolean, |
||||||
|
required:false, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value:{ |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
let val = this.value |
||||||
|
if (val instanceof Array) { |
||||||
|
if(this.returnUrl){ |
||||||
|
this.initFileList(val.join(',')) |
||||||
|
}else{ |
||||||
|
this.initFileListArr(val); |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.initFileList(val) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed:{ |
||||||
|
isImageComp(){ |
||||||
|
return this.fileType === FILE_TYPE_IMG |
||||||
|
}, |
||||||
|
complistType(){ |
||||||
|
return this.fileType === FILE_TYPE_IMG?'picture-card':'text' |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.initFileSizeLimit() |
||||||
|
const token = Vue.ls.get(""); |
||||||
|
//---------------------------- begin 图片左右换位置 ------------------------------------- |
||||||
|
this.headers = {"X-Access-Token":token}; |
||||||
|
this.containerId = 'container-ty-'+new Date().getTime(); |
||||||
|
//---------------------------- end 图片左右换位置 ------------------------------------- |
||||||
|
}, |
||||||
|
|
||||||
|
methods:{ |
||||||
|
initFileSizeLimit() { |
||||||
|
fileSizeLimit().then((res)=>{ |
||||||
|
if(res.code === 200) { |
||||||
|
this.sizeLimit = res.data |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
initFileListArr(val){ |
||||||
|
if(!val || val.length==0){ |
||||||
|
this.fileList = []; |
||||||
|
return; |
||||||
|
} |
||||||
|
let fileList = []; |
||||||
|
for(var a=0;a<val.length;a++){ |
||||||
|
let url = getFileAccessHttpUrl(val[a].filePath); |
||||||
|
fileList.push({ |
||||||
|
uid:uidGenerator(), |
||||||
|
name:val[a].fileName, |
||||||
|
status: 'done', |
||||||
|
url: url, |
||||||
|
response:{ |
||||||
|
code:"history", |
||||||
|
data:val[a].filePath |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
this.fileList = fileList |
||||||
|
}, |
||||||
|
initFileList(paths){ |
||||||
|
if(!paths || paths.length==0){ |
||||||
|
//return []; |
||||||
|
// update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug |
||||||
|
this.fileList = []; |
||||||
|
return; |
||||||
|
// update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug |
||||||
|
} |
||||||
|
let fileList = []; |
||||||
|
let arr = paths.split(",") |
||||||
|
for(var a=0;a<arr.length;a++){ |
||||||
|
let url = getFileAccessHttpUrl(arr[a]); |
||||||
|
fileList.push({ |
||||||
|
uid:uidGenerator(), |
||||||
|
name:getFileName(arr[a]), |
||||||
|
status: 'done', |
||||||
|
url: url, |
||||||
|
response:{ |
||||||
|
code:"history", |
||||||
|
data:arr[a] |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
this.fileList = fileList |
||||||
|
}, |
||||||
|
handlePathChange(){ |
||||||
|
let uploadFiles = this.fileList |
||||||
|
let path = '' |
||||||
|
if(!uploadFiles || uploadFiles.length==0){ |
||||||
|
path = '' |
||||||
|
} |
||||||
|
let arr = []; |
||||||
|
|
||||||
|
for(var a=0;a<uploadFiles.length;a++){ |
||||||
|
arr.push(uploadFiles[a].response.data) |
||||||
|
} |
||||||
|
if(arr.length>0){ |
||||||
|
path = arr.join(",") |
||||||
|
} |
||||||
|
this.$emit('change', path); |
||||||
|
}, |
||||||
|
beforeUpload(file){ |
||||||
|
this.uploadGoOn=true |
||||||
|
let fileType = file.type; |
||||||
|
let fileSize = file.size; |
||||||
|
if(this.fileType===FILE_TYPE_IMG){ |
||||||
|
if(fileType.indexOf('image')<0){ |
||||||
|
this.$message.warning('请上传图片'); |
||||||
|
this.uploadGoOn=false |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
//验证文件大小 |
||||||
|
if(fileSize>this.sizeLimit) { |
||||||
|
let parseSizeLimit = (this.sizeLimit/1024/1024).toFixed(2) |
||||||
|
this.$message.warning('抱歉,文件大小不能超过' + parseSizeLimit + 'M'); |
||||||
|
this.uploadGoOn=false |
||||||
|
return false; |
||||||
|
} |
||||||
|
return true |
||||||
|
}, |
||||||
|
handleChange(info) { |
||||||
|
console.log("--文件列表改变--") |
||||||
|
if(!info.file.status && this.uploadGoOn === false){ |
||||||
|
info.fileList.pop(); |
||||||
|
} |
||||||
|
let fileList = info.fileList |
||||||
|
if(info.file.status==='done'){ |
||||||
|
if(this.number>0){ |
||||||
|
fileList = fileList.slice(-this.number); |
||||||
|
} |
||||||
|
if(info.file.response.code === 200){ |
||||||
|
fileList = fileList.map((file) => { |
||||||
|
if (file.response) { |
||||||
|
let reUrl = file.response.data; |
||||||
|
file.url = getFileAccessHttpUrl(reUrl); |
||||||
|
} |
||||||
|
return file; |
||||||
|
}); |
||||||
|
} |
||||||
|
//this.$message.success(`${info.file.name} 上传成功!`); |
||||||
|
}else if (info.file.status === 'error') { |
||||||
|
this.$message.error(`${info.file.name} 上传失败.`); |
||||||
|
}else if(info.file.status === 'removed'){ |
||||||
|
this.handleDelete(info.file) |
||||||
|
} |
||||||
|
this.fileList = fileList |
||||||
|
if(info.file.status==='done' || info.file.status === 'removed'){ |
||||||
|
//returnUrl为true时仅返回文件路径 |
||||||
|
if(this.returnUrl){ |
||||||
|
this.handlePathChange() |
||||||
|
}else{ |
||||||
|
//returnUrl为false时返回文件名称、文件路径及文件大小 |
||||||
|
this.newFileList = []; |
||||||
|
for(var a=0;a<fileList.length;a++){ |
||||||
|
var fileJson = { |
||||||
|
fileName:fileList[a].name, |
||||||
|
filePath:fileList[a].response.data, |
||||||
|
fileSize:fileList[a].size |
||||||
|
}; |
||||||
|
this.newFileList.push(fileJson); |
||||||
|
} |
||||||
|
this.$emit('change', this.newFileList); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDelete(file){ |
||||||
|
//如有需要新增 删除逻辑 |
||||||
|
console.log(file) |
||||||
|
}, |
||||||
|
handlePreview(file){ |
||||||
|
let postfix = file.name.substring(file.name.indexOf('.')) |
||||||
|
if(postfix === '.gif' || postfix === '.jpg' || postfix === '.jpeg' || postfix === '.png' || |
||||||
|
postfix === '.GIF' || postfix === '.JPG' || postfix === '.JPEG' || postfix === '.PNG') { |
||||||
|
this.previewImage = file.url || file.thumbUrl; |
||||||
|
this.previewVisible = true; |
||||||
|
}else{ |
||||||
|
location.href=file.url |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCancel(){ |
||||||
|
this.previewVisible = false; |
||||||
|
}, |
||||||
|
//---------------------------- begin 图片左右换位置 ------------------------------------- |
||||||
|
moveLast(){ |
||||||
|
//console.log(ev) |
||||||
|
//console.log(this.fileList) |
||||||
|
//console.log(this.currentImg) |
||||||
|
let index = this.getIndexByUrl(); |
||||||
|
if(index==0){ |
||||||
|
this.$message.warn('未知的操作') |
||||||
|
}else{ |
||||||
|
let curr = this.fileList[index].url; |
||||||
|
let last = this.fileList[index-1].url; |
||||||
|
let arr =[] |
||||||
|
for(let i=0;i<this.fileList.length;i++){ |
||||||
|
if(i==index-1){ |
||||||
|
arr.push(curr) |
||||||
|
}else if(i==index){ |
||||||
|
arr.push(last) |
||||||
|
}else{ |
||||||
|
arr.push(this.fileList[i].url) |
||||||
|
} |
||||||
|
} |
||||||
|
this.currentImg = last |
||||||
|
this.$emit('change',arr.join(',')) |
||||||
|
} |
||||||
|
}, |
||||||
|
moveNext(){ |
||||||
|
let index = this.getIndexByUrl(); |
||||||
|
if(index==this.fileList.length-1){ |
||||||
|
this.$message.warn('已到最后~') |
||||||
|
}else{ |
||||||
|
let curr = this.fileList[index].url; |
||||||
|
let next = this.fileList[index+1].url; |
||||||
|
let arr =[] |
||||||
|
for(let i=0;i<this.fileList.length;i++){ |
||||||
|
if(i==index+1){ |
||||||
|
arr.push(curr) |
||||||
|
}else if(i==index){ |
||||||
|
arr.push(next) |
||||||
|
}else{ |
||||||
|
arr.push(this.fileList[i].url) |
||||||
|
} |
||||||
|
} |
||||||
|
this.currentImg = next |
||||||
|
this.$emit('change',arr.join(',')) |
||||||
|
} |
||||||
|
}, |
||||||
|
getIndexByUrl(){ |
||||||
|
for(let i=0;i<this.fileList.length;i++){ |
||||||
|
if(this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg){ |
||||||
|
return i; |
||||||
|
} |
||||||
|
} |
||||||
|
return -1; |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
const moverObj = document.getElementById(this.containerId+'-mover'); |
||||||
|
moverObj.addEventListener('mouseover',()=>{ |
||||||
|
this.moverHold = true |
||||||
|
this.moveDisplay = 'block'; |
||||||
|
}); |
||||||
|
moverObj.addEventListener('mouseout',()=>{ |
||||||
|
this.moverHold = false |
||||||
|
this.moveDisplay = 'none'; |
||||||
|
}); |
||||||
|
let picList = document.getElementById(this.containerId)?document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card'):[]; |
||||||
|
if(picList && picList.length>0){ |
||||||
|
picList[0].addEventListener('mouseover',(ev)=>{ |
||||||
|
ev = ev || window.event; |
||||||
|
let target = ev.target || ev.srcElement; |
||||||
|
if('ant-upload-list-item-info' == target.className){ |
||||||
|
this.showMoverTask=false |
||||||
|
let item = target.parentElement |
||||||
|
this.left = item.offsetLeft |
||||||
|
this.top=item.offsetTop+item.offsetHeight-50; |
||||||
|
this.moveDisplay = 'block'; |
||||||
|
this.currentImg = target.getElementsByTagName('img')[0].src |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
picList[0].addEventListener('mouseout',(ev)=>{ |
||||||
|
ev = ev || window.event; |
||||||
|
let target = ev.target || ev.srcElement; |
||||||
|
//console.log('移除',target) |
||||||
|
if('ant-upload-list-item-info' == target.className){ |
||||||
|
this.showMoverTask=true |
||||||
|
setTimeout(()=>{ |
||||||
|
if(this.moverHold === false) |
||||||
|
this.moveDisplay = 'none'; |
||||||
|
},100) |
||||||
|
} |
||||||
|
if('ant-upload-list-item ant-upload-list-item-done' == target.className || 'ant-upload-list ant-upload-list-picture-card'== target.className){ |
||||||
|
this.moveDisplay = 'none'; |
||||||
|
} |
||||||
|
}) |
||||||
|
//---------------------------- end 图片左右换位置 ------------------------------------- |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.uploadty-disabled{ |
||||||
|
.ant-upload-list-item { |
||||||
|
.anticon-close{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.anticon-delete{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
//---------------------------- begin 图片左右换位置 ------------------------------------- |
||||||
|
.uploadty-mover-mask{ |
||||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||||
|
opacity: .8; |
||||||
|
color: #fff; |
||||||
|
height: 28px; |
||||||
|
line-height: 28px; |
||||||
|
} |
||||||
|
//---------------------------- end 图片左右换位置 ------------------------------------- |
||||||
|
</style> |
@ -0,0 +1,509 @@ |
|||||||
|
# JDate 日期组件 使用文档 |
||||||
|
|
||||||
|
###### 说明: antd-vue日期组件需要用moment中转一下,用起来不是很方便,特二次封装,使用时只需要传字符串即可 |
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 |说明| |
||||||
|
|--------------|---------|----|---------| |
||||||
|
| placeholder |string | | placeholder | |
||||||
|
| readOnly | boolean | | true/false 默认false | |
||||||
|
| value | string | | 绑定v-model或是v-decorator后不需要设置 | |
||||||
|
| showTime | boolean | | 是否展示时间true/false 默认false | |
||||||
|
| dateFormat | string | |日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如:YYYY-MM-DD HH:mm:ss) | |
||||||
|
| triggerChange | string | |触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true | |
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
1.组件带有v-model的使用方法 |
||||||
|
```vue |
||||||
|
<j-date v-model="dateStr"></j-date> |
||||||
|
``` |
||||||
|
|
||||||
|
2.组件带有v-decorator的使用方法 |
||||||
|
a).设置trigger-change属性为true |
||||||
|
```vue |
||||||
|
<j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date> |
||||||
|
``` |
||||||
|
|
||||||
|
b).设置decorator的option.trigger为input |
||||||
|
```vue |
||||||
|
<j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date> |
||||||
|
``` |
||||||
|
|
||||||
|
3.其他使用 |
||||||
|
添加style |
||||||
|
```vue |
||||||
|
<j-date v-model="dateStr" style="width:100%"></j-date> |
||||||
|
``` |
||||||
|
添加placeholder |
||||||
|
```vue |
||||||
|
<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date> |
||||||
|
``` |
||||||
|
添加readOnly |
||||||
|
```vue |
||||||
|
<j-date v-model="dateStr" :read-only="true"></j-date> |
||||||
|
``` |
||||||
|
|
||||||
|
备注: |
||||||
|
script内需引入jdate |
||||||
|
```vue |
||||||
|
<script> |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
export default { |
||||||
|
name: "demo", |
||||||
|
components: { |
||||||
|
JDate |
||||||
|
} |
||||||
|
//... |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
|
||||||
|
# JSuperQuery 高级查询 使用文档 |
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 | 说明 | |
||||||
|
|--------------|---------|----|----------------------| |
||||||
|
| fieldList | array |✔| 需要查询的列集合示例如下,type类型有:date/datetime/string/int/number | |
||||||
|
| callback | array | | 回调函数名称(非必须)默认handleSuperQuery | |
||||||
|
|
||||||
|
fieldList结构示例: |
||||||
|
```vue |
||||||
|
const superQueryFieldList=[{ |
||||||
|
type:"date", |
||||||
|
value:"birthday", |
||||||
|
text:"生日" |
||||||
|
},{ |
||||||
|
type:"string", |
||||||
|
value:"name", |
||||||
|
text:"用户名" |
||||||
|
},{ |
||||||
|
type:"int", |
||||||
|
value:"age", |
||||||
|
text:"年龄" |
||||||
|
}] |
||||||
|
``` |
||||||
|
页面代码概述: |
||||||
|
---- |
||||||
|
1.import之后再components之内声明 |
||||||
|
```vue |
||||||
|
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'; |
||||||
|
export default { |
||||||
|
name: "JeecgDemoList", |
||||||
|
components: { |
||||||
|
JSuperQuery |
||||||
|
}, |
||||||
|
|
||||||
|
``` |
||||||
|
2.页面引用 |
||||||
|
```vue |
||||||
|
<!-- 高级查询区域 --> |
||||||
|
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> |
||||||
|
``` |
||||||
|
3.list页面data中需要定义三个属性: |
||||||
|
```vue |
||||||
|
fieldList:superQueryFieldList, |
||||||
|
superQueryFlag:false, |
||||||
|
superQueryParams:"" |
||||||
|
``` |
||||||
|
4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可) |
||||||
|
```vue |
||||||
|
//高级查询方法 |
||||||
|
handleSuperQuery(arg) { |
||||||
|
if(!arg){ |
||||||
|
this.superQueryParams='' |
||||||
|
this.superQueryFlag = false |
||||||
|
}else{ |
||||||
|
this.superQueryFlag = true |
||||||
|
this.superQueryParams=JSON.stringify(arg) |
||||||
|
} |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
``` |
||||||
|
5.改造list页面方法 |
||||||
|
```vue |
||||||
|
// 获取查询条件 |
||||||
|
getQueryParams() { |
||||||
|
let sqp = {} |
||||||
|
if(this.superQueryParams){ |
||||||
|
sqp['superQueryParams']=encodeURI(this.superQueryParams) |
||||||
|
} |
||||||
|
var param = Object.assign(sqp, this.queryParam, this.isorter); |
||||||
|
param.field = this.getQueryField(); |
||||||
|
param.pageNo = this.ipagination.current; |
||||||
|
param.pageSize = this.ipagination.pageSize; |
||||||
|
return filterObj(param); |
||||||
|
}, |
||||||
|
``` |
||||||
|
6.打开弹框调用show方法: |
||||||
|
```vue |
||||||
|
this.$refs.superQueryModal.show(); |
||||||
|
``` |
||||||
|
|
||||||
|
# JEllipsis 字符串超长截取省略号显示 |
||||||
|
|
||||||
|
###### 说明: 遇到超长文本展示,通过此标签可以截取省略号显示,鼠标放置会提示全文本 |
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 | 说明 | |
||||||
|
|--------|---------|----|----------------| |
||||||
|
| value |string | 必填 | 字符串文本| |
||||||
|
| length | number | 非必填 | 默认25 | |
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
1.组件带有v-model的使用方法 |
||||||
|
```vue |
||||||
|
<j-ellipsis :value="text"/> |
||||||
|
|
||||||
|
|
||||||
|
# Modal弹框实现最大化功能 |
||||||
|
|
||||||
|
1.定义modal的宽度: |
||||||
|
```vue |
||||||
|
<a-modal |
||||||
|
:width="modalWidth" |
||||||
|
|
||||||
|
|
||||||
|
/> |
||||||
|
``` |
||||||
|
2.自定义modal的title,居右显示切换图标 |
||||||
|
```vue |
||||||
|
<template slot="title"> |
||||||
|
<div style="width: 100%;"> |
||||||
|
<span>{{ title }}</span> |
||||||
|
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right"> |
||||||
|
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
``` |
||||||
|
3.定义toggleScreen事件,用于切换modal宽度 |
||||||
|
```vue |
||||||
|
toggleScreen(){ |
||||||
|
if(this.modaltoggleFlag){ |
||||||
|
this.modalWidth = window.innerWidth; |
||||||
|
}else{ |
||||||
|
this.modalWidth = 800; |
||||||
|
} |
||||||
|
this.modaltoggleFlag = !this.modaltoggleFlag; |
||||||
|
}, |
||||||
|
``` |
||||||
|
4.data中声明上述用到的属性 |
||||||
|
```vue |
||||||
|
data () { |
||||||
|
return { |
||||||
|
modalWidth:800, |
||||||
|
modaltoggleFlag:true, |
||||||
|
``` |
||||||
|
|
||||||
|
# <a-select/> 下拉选项滚动错位的解决方法 |
||||||
|
|
||||||
|
## 问题描述 |
||||||
|
|
||||||
|
当使用了 `a-modal` 或其他带有滚动条的组件时,使用`a-select`组件并打开下拉框时滚动滚动条,就会导致错位的问题产生。 |
||||||
|
|
||||||
|
## 解决方法 |
||||||
|
|
||||||
|
大多数情况下,在 `a-select` 上添加一个 `getPopupContainer` 属性,值为`node => node.parentNode`即可解决。 |
||||||
|
但是如果遇到 `a-select` 标签层级过深的情况,可能仍然会显示异常,只需要多加几个`.parentNode` (例:node => node.parentNode.parentNode.parentNode)多尝试几次直到解决问题即可。 |
||||||
|
|
||||||
|
### 代码示例 |
||||||
|
|
||||||
|
```html |
||||||
|
<a-select |
||||||
|
placeholder="请选择展示模板" |
||||||
|
:options="dicts.displayTemplate" |
||||||
|
:getPopupContainer="node => node.parentNode" |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
# JAsyncTreeList 异步数列表组件使用说明 |
||||||
|
|
||||||
|
## 引入组件 |
||||||
|
|
||||||
|
```js |
||||||
|
import JTreeTable from '@/components/jeecg/JTreeTable' |
||||||
|
export default { |
||||||
|
components: { JTreeTable } |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
## 所需参数 |
||||||
|
|
||||||
|
| 参数 | 类型 | 必填 | 说明 | |
||||||
|
|-------------|--------|--------|--------------------------------------------------------------| |
||||||
|
| rowKey | String | 非必填 | 表格行 key 的取值,默认为"id" | |
||||||
|
| columns | Array | 必填 | 表格列的配置描述,具体见Antd官方文档 | |
||||||
|
| url | String | 必填 | 数据查询url | |
||||||
|
| childrenUrl | String | 非必填 | 查询子级时的url,若不填则使用url参数查询子级 | |
||||||
|
| queryKey | String | 非必填 | 根据某个字段查询,如果传递 id 就根据 id 查询,默认为parentId | |
||||||
|
| queryParams | Object | 非必填 | 查询参数,当查询参数改变的时候会自动重新查询,默认为{} | |
||||||
|
| topValue | String | 非必填 | 查询顶级时的值,如果顶级为0,则传0,默认为null | |
||||||
|
| tableProps | Object | 非必填 | 自定义给内部table绑定的props | |
||||||
|
|
||||||
|
## 代码示例 |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<a-card :bordered="false"> |
||||||
|
<j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JTreeTable from '@/components/jeecg/JTreeTable' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'AsyncTreeTable', |
||||||
|
components: { JTreeTable }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
url: '/api/asynTreeList', |
||||||
|
columns: [ |
||||||
|
{ title: '菜单名称', dataIndex: 'name' }, |
||||||
|
{ title: '组件', dataIndex: 'component' }, |
||||||
|
{ title: '排序', dataIndex: 'orderNum' } |
||||||
|
], |
||||||
|
selectedRowKeys: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
tableProps() { |
||||||
|
let _this = this |
||||||
|
return { |
||||||
|
// 列表项是否可选择 |
||||||
|
// 配置项见:https://vue.ant.design/components/table-cn/#rowSelection |
||||||
|
rowSelection: { |
||||||
|
selectedRowKeys: _this.selectedRowKeys, |
||||||
|
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
# JCheckbox 使用文档 |
||||||
|
|
||||||
|
###### 说明: antd-vue checkbox组件处理的是数组,用起来不是很方便,特二次封装,使用时只需处理字符串即可 |
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 |说明| |
||||||
|
|--------------|---------|----|---------| |
||||||
|
| options |array |✔| checkbox需要配置的项,是个数组,数组中每个对象包含两个属性:label(用于显示)和value(用于存储) | |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-form-item label="v-model式用法"> |
||||||
|
<j-checkbox v-model="sport" :options="sportOptions"></j-checkbox><span>{{ sport }}</span> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="v-decorator式用法"> |
||||||
|
<j-checkbox v-decorator="['sport']" :options="sportOptions"></j-checkbox><span>{{ getFormFieldValue('sport') }}</span> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JCheckbox from '@/components/jeecg/JCheckbox' |
||||||
|
export default { |
||||||
|
components: {JCheckbox}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: this.$form.createForm(this), |
||||||
|
sport:'', |
||||||
|
sportOptions:[ |
||||||
|
{ |
||||||
|
label:"足球", |
||||||
|
value:"1" |
||||||
|
},{ |
||||||
|
label:"篮球", |
||||||
|
value:"2" |
||||||
|
},{ |
||||||
|
label:"乒乓球", |
||||||
|
value:"3" |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getFormFieldValue(field){ |
||||||
|
return this.form.getFieldValue(field) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
# JCodeEditor 使用文档 |
||||||
|
|
||||||
|
###### 说明: 一个简易版的代码编辑器,支持语法高亮 |
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 |说明| |
||||||
|
|--------------|---------|----|---------| |
||||||
|
| language |string | | 表示当前编写代码的类型 javascript/html/css/sql | |
||||||
|
| placeholder |string | | placeholder | |
||||||
|
| lineNumbers |Boolean | | 是否显示行号 | |
||||||
|
| fullScreen |Boolean | | 是否显示全屏按钮 | |
||||||
|
| zIndex |string | | 全屏以后的z-index | |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<j-code-editor |
||||||
|
language="javascript" |
||||||
|
v-model="editorValue" |
||||||
|
:fullScreen="true" |
||||||
|
style="min-height: 100px"/> |
||||||
|
{{ editorValue }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JCodeEditor from '@/components/jeecg/JCodeEditor' |
||||||
|
export default { |
||||||
|
components: {JCodeEditor}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: this.$form.createForm(this), |
||||||
|
editorValue:'', |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
# JFormContainer 使用文档 |
||||||
|
|
||||||
|
###### 说明: 暂用于表单禁用 |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<!-- 在form下直接写这个组件,设置disabled为true就能将此form中的控件禁用 --> |
||||||
|
<a-form layout="inline" :form="form" > |
||||||
|
<j-form-container disabled> |
||||||
|
<!-- 表单内容省略..... --> |
||||||
|
</j-form-container> |
||||||
|
</a-form> |
||||||
|
``` |
||||||
|
|
||||||
|
# JImportModal 使用文档 |
||||||
|
|
||||||
|
###### 说明: 用于列表页面导入excel功能 |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
|
||||||
|
<template> |
||||||
|
<!-- 此处省略部分代码...... --> |
||||||
|
<a-button @click="handleImportXls" type="primary" icon="upload">导入</a-button> |
||||||
|
<!-- 此处省略部分代码...... --> |
||||||
|
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal> |
||||||
|
<!-- 此处省略部分代码...... --> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JCodeEditor from '@/components/jeecg/JCodeEditor' |
||||||
|
export default { |
||||||
|
components: {JCodeEditor}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//省略代码...... |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
//省略部分代码...... |
||||||
|
handleImportXls(){ |
||||||
|
this.$refs.importModal.show() |
||||||
|
}, |
||||||
|
getImportUrl(){ |
||||||
|
return '你自己处理上传业务的后台地址' |
||||||
|
}, |
||||||
|
importOk(){ |
||||||
|
this.loadData(1) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
# JSlider 滑块验证码 |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<div style="width: 300px"> |
||||||
|
<j-slider @onSuccess="sliderSuccess"></j-slider> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSlider from '@/components/jeecg/JSlider' |
||||||
|
export default { |
||||||
|
components: {JSlider}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: this.$form.createForm(this), |
||||||
|
editorValue:'', |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
sliderSuccess(){ |
||||||
|
console.log("验证完成") |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
|
||||||
|
# JTreeSelect 树形下拉组件 |
||||||
|
异步加载的树形下拉组件 |
||||||
|
|
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 |说明| |
||||||
|
|--------------|---------|----|---------| |
||||||
|
| placeholder |string | | placeholder | |
||||||
|
| dict |string | ✔| 表名,显示字段名,存储字段名拼接的字符串 | |
||||||
|
| pidField |string | ✔| 父ID的字段名 | |
||||||
|
| pidValue |string | | 根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件,而数据库根节点父ID为空,请修改之 | |
||||||
|
| multiple |boolean | |是否支持多选 | |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<a-form> |
||||||
|
<a-form-item label="树形下拉测试" style="width: 300px"> |
||||||
|
<j-tree-select |
||||||
|
v-model="departId" |
||||||
|
placeholder="请选择部门" |
||||||
|
dict="sys_depart,depart_name,id" |
||||||
|
pidField="parent_id"> |
||||||
|
</j-tree-select> |
||||||
|
{{ departId }} |
||||||
|
</a-form-item> |
||||||
|
</a-form > |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JTreeSelect from '@/components/jeecg/JTreeSelect' |
||||||
|
export default { |
||||||
|
components: {JTreeSelect}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
departId:"" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
|
@ -0,0 +1,9 @@ |
|||||||
|
import JModal from './JModal' |
||||||
|
import JFormContainer from './JFormContainer.vue' |
||||||
|
|
||||||
|
export default { |
||||||
|
install(Vue) { |
||||||
|
Vue.component('JFormContainer', JFormContainer) |
||||||
|
Vue.component(JModal.name, JModal) |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,113 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-modal |
||||||
|
title="文件上传" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
@ok="ok" |
||||||
|
cancelText="取消" |
||||||
|
@cancel="close"> |
||||||
|
<!--style="top: 20px;"--> |
||||||
|
<j-upload :file-type="fileType" :value="filePath" @change="handleChange" :disabled="disabled"></j-upload> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import { getFileAccessHttpUrl } from '@/api/manage'; |
||||||
|
|
||||||
|
const getFileName=(path)=>{ |
||||||
|
if(path.lastIndexOf("\\")>=0){ |
||||||
|
let reg=new RegExp("\\\\","g"); |
||||||
|
path = path.replace(reg,"/"); |
||||||
|
} |
||||||
|
return path.substring(path.lastIndexOf("/")+1); |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JFilePop', |
||||||
|
components: { JUpload }, |
||||||
|
props:{ |
||||||
|
title:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
position:{ |
||||||
|
type:String, |
||||||
|
default:'right', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
height:{ |
||||||
|
type:Number, |
||||||
|
default:200, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
width:{ |
||||||
|
type:Number, |
||||||
|
default:520, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
|
||||||
|
popContainer:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
visible:false, |
||||||
|
filePath:'', |
||||||
|
id:'', |
||||||
|
fileType:'file' |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
handleChange(value){ |
||||||
|
this.filePath = value; |
||||||
|
}, |
||||||
|
show(id,value,flag){ |
||||||
|
this.id = id; |
||||||
|
this.filePath = value; |
||||||
|
this.visible=true |
||||||
|
if(flag === 'img'){ |
||||||
|
this.fileType = 'image' |
||||||
|
}else{ |
||||||
|
this.fileType = 'file' |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
ok(){ |
||||||
|
if(!this.filePath){ |
||||||
|
this.$message.error("未上传任何文件") |
||||||
|
return false; |
||||||
|
} |
||||||
|
let arr = this.filePath.split(",") |
||||||
|
let obj = { |
||||||
|
name:getFileName(arr[0]), |
||||||
|
url:getFileAccessHttpUrl(arr[0]), |
||||||
|
path:this.filePath, |
||||||
|
status: 'done', |
||||||
|
id:this.id |
||||||
|
} |
||||||
|
this.$emit('ok',obj) |
||||||
|
this.visible=false |
||||||
|
}, |
||||||
|
close(){ |
||||||
|
this.visible=false |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,98 @@ |
|||||||
|
<template> |
||||||
|
<a-popover trigger="contextmenu" v-model="visible" :placement="position"> |
||||||
|
<!--"(node) => node.parentNode.parentNode"--> |
||||||
|
<div slot="title"> |
||||||
|
<span>{{ title }}</span> |
||||||
|
<span style="float: right" title="关闭"> |
||||||
|
<a-icon type="close" @click="visible=false"/> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<a-input :value="inputContent" @change="handleInputChange"> |
||||||
|
<a-icon slot="suffix" type="fullscreen" @click.stop="pop" /> |
||||||
|
</a-input> |
||||||
|
<div slot="content"> |
||||||
|
<textarea :value="inputContent" @input="handleInputChange" :style="{ height: height + 'px', width: width + 'px' }"></textarea> |
||||||
|
</div> |
||||||
|
</a-popover> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'JInputPop', |
||||||
|
props:{ |
||||||
|
title:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
position:{ |
||||||
|
type:String, |
||||||
|
default:'right', |
||||||
|
required:false |
||||||
|
}, |
||||||
|
height:{ |
||||||
|
type:Number, |
||||||
|
default:200, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
width:{ |
||||||
|
type:Number, |
||||||
|
default:150, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
type:String, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
popContainer:{ |
||||||
|
type:String, |
||||||
|
default:'', |
||||||
|
required:false |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
visible:false, |
||||||
|
inputContent:'' |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
watch:{ |
||||||
|
value:{ |
||||||
|
immediate:true, |
||||||
|
handler:function(){ |
||||||
|
if(this.value && this.value.length>0){ |
||||||
|
this.inputContent = this.value; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
handleInputChange(event){ |
||||||
|
this.inputContent = event.target.value |
||||||
|
this.$emit('change',this.inputContent) |
||||||
|
}, |
||||||
|
pop(){ |
||||||
|
this.visible=true |
||||||
|
}, |
||||||
|
getPopupContainer(node){ |
||||||
|
if(!this.popContainer){ |
||||||
|
return node.parentNode |
||||||
|
}else{ |
||||||
|
return document.getElementById(this.popContainer) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,928 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
title="corn表达式" |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭"> |
||||||
|
<div class="card-container"> |
||||||
|
<a-tabs type="card"> |
||||||
|
<a-tab-pane key="1" type="card"> |
||||||
|
<span slot="tab"><a-icon type="schedule" /> 秒</span> |
||||||
|
<a-radio-group v-model="result.second.cronEvery"> |
||||||
|
<a-row> |
||||||
|
<a-radio value="1">每一秒钟</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="2">每隔 |
||||||
|
<a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="59"></a-input-number> |
||||||
|
秒执行 从 |
||||||
|
<a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number> |
||||||
|
秒开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="3">具体秒数(可多选)</a-radio> |
||||||
|
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="4">周期从 |
||||||
|
<a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="59"></a-input-number> |
||||||
|
到 |
||||||
|
<a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number> |
||||||
|
秒 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
</a-radio-group> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="2"> |
||||||
|
<span slot="tab"><a-icon type="schedule" />分</span> |
||||||
|
<div class="tabBody"> |
||||||
|
<a-radio-group v-model="result.minute.cronEvery"> |
||||||
|
<a-row> |
||||||
|
<a-radio value="1">每一分钟</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="2">每隔 |
||||||
|
<a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number> |
||||||
|
分执行 从 |
||||||
|
<a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number> |
||||||
|
分开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="3">具体分钟数(可多选)</a-radio> |
||||||
|
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="4">周期从 |
||||||
|
<a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number> |
||||||
|
到 |
||||||
|
<a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number> |
||||||
|
分 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
</a-radio-group> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="3"> |
||||||
|
<span slot="tab"><a-icon type="schedule" /> 时</span> |
||||||
|
<div class="tabBody"> |
||||||
|
<a-radio-group v-model="result.hour.cronEvery"> |
||||||
|
<a-row> |
||||||
|
<a-radio value="1">每一小时</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="2">每隔 |
||||||
|
<a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number> |
||||||
|
小时执行 从 |
||||||
|
<a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number> |
||||||
|
小时开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio class="long" value="3">具体小时数(可多选)</a-radio> |
||||||
|
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="4">周期从 |
||||||
|
<a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number> |
||||||
|
到 |
||||||
|
<a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number> |
||||||
|
小时 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
</a-radio-group> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="4"> |
||||||
|
<span slot="tab"><a-icon type="schedule" /> 天</span> |
||||||
|
<div class="tabBody"> |
||||||
|
<a-radio-group v-model="result.day.cronEvery"> |
||||||
|
<a-row> |
||||||
|
<a-radio value="1">每一天</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="2">每隔 |
||||||
|
<a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number> |
||||||
|
周执行 从 |
||||||
|
<a-select size="small" v-model="result.week.incrementStart"> |
||||||
|
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="3">每隔 |
||||||
|
<a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number> |
||||||
|
天执行 从 |
||||||
|
<a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number> |
||||||
|
天开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio class="long" value="4">具体星期几(可多选)</a-radio> |
||||||
|
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio class="long" value="5">具体天数(可多选)</a-radio> |
||||||
|
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index+1">{{ index+1 }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="6">在这个月的最后一天</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="7">在这个月的最后一个工作日</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="8">在这个月的最后一个 |
||||||
|
<a-select size="small" v-model="result.day.cronLastSpecificDomDay"> |
||||||
|
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="9"> |
||||||
|
在本月底前 |
||||||
|
<a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number> |
||||||
|
天 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="10">最近的工作日(周一至周五)至本月 |
||||||
|
<a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number> |
||||||
|
日 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="11">在这个月的第 |
||||||
|
<a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number> |
||||||
|
个 |
||||||
|
<a-select size="small" v-model="result.week.cronNthDayDay"> |
||||||
|
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
|
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
</a-radio-group> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="5"> |
||||||
|
<span slot="tab"><a-icon type="schedule" /> 月</span> |
||||||
|
<div class="tabBody"> |
||||||
|
<a-radio-group v-model="result.month.cronEvery"> |
||||||
|
<a-row> |
||||||
|
<a-radio value="1">每一月</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="2">每隔 |
||||||
|
<a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number> |
||||||
|
月执行 从 |
||||||
|
<a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number> |
||||||
|
月开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio class="long" value="3">具体月数(可多选)</a-radio> |
||||||
|
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index+1">{{ index+1 }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="4">从 |
||||||
|
<a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number> |
||||||
|
到 |
||||||
|
<a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number> |
||||||
|
月之间的每个月 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
</a-radio-group> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="6"> |
||||||
|
<span slot="tab"><a-icon type="schedule" /> 年</span> |
||||||
|
<div class="tabBody"> |
||||||
|
<a-radio-group v-model="result.year.cronEvery"> |
||||||
|
<a-row> |
||||||
|
<a-radio value="1">每一年</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="2">每隔 |
||||||
|
<a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number> |
||||||
|
年执行 从 |
||||||
|
<a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number> |
||||||
|
年开始 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio class="long" value="3">具体年份(可多选)</a-radio> |
||||||
|
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific"> |
||||||
|
<a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-radio value="4">从 |
||||||
|
<a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number> |
||||||
|
到 |
||||||
|
<a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number> |
||||||
|
年之间的每一年 |
||||||
|
</a-radio> |
||||||
|
</a-row> |
||||||
|
</a-radio-group> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
</a-tabs> |
||||||
|
<div class="bottom"> |
||||||
|
<span class="value">{{this.cron }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name:'VueCron', |
||||||
|
props:['data'], |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
visible: false, |
||||||
|
confirmLoading:false, |
||||||
|
size:'large', |
||||||
|
weekDays:['天','一','二','三','四','五','六'].map(val=>'星期'+val), |
||||||
|
result: { |
||||||
|
second:{}, |
||||||
|
minute:{}, |
||||||
|
hour:{}, |
||||||
|
day:{}, |
||||||
|
week:{}, |
||||||
|
month:{}, |
||||||
|
year:{} |
||||||
|
}, |
||||||
|
defaultValue: { |
||||||
|
second:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:0, |
||||||
|
specificSpecific:[], |
||||||
|
}, |
||||||
|
minute:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:'0', |
||||||
|
specificSpecific:[], |
||||||
|
}, |
||||||
|
hour:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:'0', |
||||||
|
rangeEnd:'0', |
||||||
|
specificSpecific:[], |
||||||
|
}, |
||||||
|
day:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:1, |
||||||
|
incrementIncrement:'1', |
||||||
|
rangeStart:'', |
||||||
|
rangeEnd:'', |
||||||
|
specificSpecific:[], |
||||||
|
cronLastSpecificDomDay:1, |
||||||
|
cronDaysBeforeEomMinus:1, |
||||||
|
cronDaysNearestWeekday:1, |
||||||
|
}, |
||||||
|
week:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:1, |
||||||
|
incrementIncrement:1, |
||||||
|
specificSpecific:[], |
||||||
|
cronNthDayDay:1, |
||||||
|
cronNthDayNth:1, |
||||||
|
}, |
||||||
|
month:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:1, |
||||||
|
specificSpecific:[], |
||||||
|
}, |
||||||
|
year:{ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:2017, |
||||||
|
incrementIncrement:1, |
||||||
|
rangeStart:2019, |
||||||
|
rangeEnd: 2019, |
||||||
|
specificSpecific:[], |
||||||
|
}, |
||||||
|
label:'' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
modalWidth(){ |
||||||
|
return 608; |
||||||
|
}, |
||||||
|
secondsText() { |
||||||
|
let seconds = ''; |
||||||
|
let cronEvery=this.result.second.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
seconds = '*'; |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
seconds = this.result.second.incrementStart+'/'+this.result.second.incrementIncrement; |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
this.result.second.specificSpecific.map(val=> {seconds += val+','}); |
||||||
|
seconds = seconds.slice(0, -1); |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
seconds = this.result.second.rangeStart+'-'+this.result.second.rangeEnd; |
||||||
|
break; |
||||||
|
} |
||||||
|
return seconds; |
||||||
|
}, |
||||||
|
minutesText() { |
||||||
|
let minutes = ''; |
||||||
|
let cronEvery=this.result.minute.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
minutes = '*'; |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
minutes = this.result.minute.incrementStart+'/'+this.result.minute.incrementIncrement; |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
this.result.minute.specificSpecific.map(val=> { |
||||||
|
minutes += val+',' |
||||||
|
}); |
||||||
|
minutes = minutes.slice(0, -1); |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
minutes = this.result.minute.rangeStart+'-'+this.result.minute.rangeEnd; |
||||||
|
break; |
||||||
|
} |
||||||
|
return minutes; |
||||||
|
}, |
||||||
|
hoursText() { |
||||||
|
let hours = ''; |
||||||
|
let cronEvery=this.result.hour.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
hours = '*'; |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
hours = this.result.hour.incrementStart+'/'+this.result.hour.incrementIncrement; |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
this.result.hour.specificSpecific.map(val=> { |
||||||
|
hours += val+',' |
||||||
|
}); |
||||||
|
hours = hours.slice(0, -1); |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
hours = this.result.hour.rangeStart+'-'+this.result.hour.rangeEnd; |
||||||
|
break; |
||||||
|
} |
||||||
|
return hours; |
||||||
|
}, |
||||||
|
daysText() { |
||||||
|
let days=''; |
||||||
|
let cronEvery=this.result.day.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
case '4': |
||||||
|
case '11': |
||||||
|
days = '?'; |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
days = this.result.day.incrementStart+'/'+this.result.day.incrementIncrement; |
||||||
|
break; |
||||||
|
case '5': |
||||||
|
this.result.day.specificSpecific.map(val=> { |
||||||
|
days += val+',' |
||||||
|
}); |
||||||
|
days = days.slice(0, -1); |
||||||
|
break; |
||||||
|
case '6': |
||||||
|
days = "L"; |
||||||
|
break; |
||||||
|
case '7': |
||||||
|
days = "LW"; |
||||||
|
break; |
||||||
|
case '8': |
||||||
|
days = this.result.day.cronLastSpecificDomDay + 'L'; |
||||||
|
break; |
||||||
|
case '9': |
||||||
|
days = 'L-' + this.result.day.cronDaysBeforeEomMinus; |
||||||
|
break; |
||||||
|
case '10': |
||||||
|
days = this.result.day.cronDaysNearestWeekday+"W"; |
||||||
|
break |
||||||
|
} |
||||||
|
return days; |
||||||
|
}, |
||||||
|
weeksText() { |
||||||
|
let weeks = ''; |
||||||
|
let cronEvery=this.result.day.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
case '3': |
||||||
|
case '5': |
||||||
|
weeks = '?'; |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
weeks = this.result.week.incrementStart+'/'+this.result.week.incrementIncrement; |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
this.result.week.specificSpecific.map(val=> { |
||||||
|
weeks += val+',' |
||||||
|
}); |
||||||
|
weeks = weeks.slice(0, -1); |
||||||
|
break; |
||||||
|
case '6': |
||||||
|
case '7': |
||||||
|
case '8': |
||||||
|
case '9': |
||||||
|
case '10': |
||||||
|
weeks = "?"; |
||||||
|
break; |
||||||
|
case '11': |
||||||
|
weeks = this.result.week.cronNthDayDay+"#"+this.result.week.cronNthDayNth; |
||||||
|
break; |
||||||
|
} |
||||||
|
return weeks; |
||||||
|
}, |
||||||
|
monthsText() { |
||||||
|
let months = ''; |
||||||
|
let cronEvery=this.result.month.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
months = '*'; |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
months = this.result.month.incrementStart+'/'+this.result.month.incrementIncrement; |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
this.result.month.specificSpecific.map(val=> { |
||||||
|
months += val+',' |
||||||
|
}); |
||||||
|
months = months.slice(0, -1); |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
months = this.result.month.rangeStart+'-'+this.result.month.rangeEnd; |
||||||
|
break; |
||||||
|
} |
||||||
|
return months; |
||||||
|
}, |
||||||
|
yearsText() { |
||||||
|
let years = ''; |
||||||
|
let cronEvery=this.result.year.cronEvery||''; |
||||||
|
switch (cronEvery.toString()){ |
||||||
|
case '1': |
||||||
|
years = '*'; |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
years = this.result.year.incrementStart+'/'+this.result.year.incrementIncrement; |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
this.result.year.specificSpecific.map(val=> { |
||||||
|
years += val+',' |
||||||
|
}); |
||||||
|
years = years.slice(0, -1); |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
years = this.result.year.rangeStart+'-'+this.result.year.rangeEnd; |
||||||
|
break; |
||||||
|
} |
||||||
|
return years; |
||||||
|
}, |
||||||
|
cron(){ |
||||||
|
return `${this.secondsText||'*'} ${this.minutesText||'*'} ${this.hoursText||'*'} ${this.daysText||'*'} ${this.monthsText||'*'} ${this.weeksText||'?'} ${this.yearsText||'*'}` |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
visible:{ |
||||||
|
handler() { |
||||||
|
// if(this.data){ |
||||||
|
// //this. result = Object.keys(this.data.value).length>0?this.deepCopy(this.data.value):this.deepCopy(this.defaultValue); |
||||||
|
// //this.result = Object.keys(this.data.value).length>0?clone(this.data.value):clone(this.defaultValue); |
||||||
|
// //this.result = Object.keys(this.data.value).length>0?clone(JSON.parse(this.data.value)):clone(this.defaultValue); |
||||||
|
// this.result = Object.keys(this.data.value).length>0?JSON.parse(this.data.value):JSON.parse(JSON.stringify(this.defaultValue)); |
||||||
|
// }else{ |
||||||
|
// //this.result = this.deepCopy(this.defaultValue); |
||||||
|
// //this.result = clone(this.defaultValue); |
||||||
|
// this.result = JSON.parse(JSON.stringify(this.defaultValue)); |
||||||
|
// } |
||||||
|
let label = this.data; |
||||||
|
if(label){ |
||||||
|
this.secondsReverseExp(label) |
||||||
|
this.minutesReverseExp(label); |
||||||
|
this.hoursReverseExp(label); |
||||||
|
this.daysReverseExp(label); |
||||||
|
this.daysReverseExp(label); |
||||||
|
this.monthsReverseExp(label); |
||||||
|
this.yearReverseExp(label); |
||||||
|
JSON.parse(JSON.stringify(label)); |
||||||
|
}else { |
||||||
|
this.result = JSON.parse(JSON.stringify(this.defaultValue)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
show(){ |
||||||
|
this.visible = true; |
||||||
|
// console.log('secondsReverseExp',this.secondsReverseExp(this.data)); |
||||||
|
// console.log('minutesReverseExp',this.minutesReverseExp(this.data)); |
||||||
|
// console.log('hoursReverseExp',this.hoursReverseExp(this.data)); |
||||||
|
// console.log('daysReverseExp',this.daysReverseExp(this.data)); |
||||||
|
// console.log('monthsReverseExp',this.monthsReverseExp(this.data)); |
||||||
|
// console.log('yearReverseExp',this.yearReverseExp(this.data)); |
||||||
|
|
||||||
|
}, |
||||||
|
handleSubmit(){ |
||||||
|
this.$emit('ok',this.cron); |
||||||
|
this.close(); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
close(){ |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
secondsReverseExp(seconds) { |
||||||
|
let val = seconds.split(" ")[0]; |
||||||
|
//alert(val); |
||||||
|
let second = { |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:0, |
||||||
|
specificSpecific:[] |
||||||
|
}; |
||||||
|
switch (true) { |
||||||
|
case val.includes('*'): |
||||||
|
second.cronEvery = '1'; |
||||||
|
break; |
||||||
|
case val.includes('/'): |
||||||
|
second.cronEvery = '2'; |
||||||
|
second.incrementStart = val.split('/')[0]; |
||||||
|
second.incrementIncrement = val.split('/')[1]; |
||||||
|
break; |
||||||
|
case val.includes(','): |
||||||
|
second.cronEvery = '3'; |
||||||
|
second.specificSpecific = val.split(',').map(Number).sort(); |
||||||
|
break; |
||||||
|
case val.includes('-'): |
||||||
|
second.cronEvery = '4'; |
||||||
|
second.rangeStart = val.split('-')[0]; |
||||||
|
second.rangeEnd = val.split('-')[1]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
second.cronEvery = '1'; |
||||||
|
} |
||||||
|
this.result.second = second; |
||||||
|
}, |
||||||
|
minutesReverseExp(minutes) { |
||||||
|
let val = minutes.split(" ")[1]; |
||||||
|
let minute = { |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:0, |
||||||
|
specificSpecific:[], |
||||||
|
} |
||||||
|
switch (true) { |
||||||
|
case val.includes('*'): |
||||||
|
minute.cronEvery = '1'; |
||||||
|
break; |
||||||
|
case val.includes('/'): |
||||||
|
minute.cronEvery = '2'; |
||||||
|
minute.incrementStart = val.split('/')[0]; |
||||||
|
minute.incrementIncrement = val.split('/')[1]; |
||||||
|
break; |
||||||
|
case val.includes(','): |
||||||
|
minute.cronEvery = '3'; |
||||||
|
minute.specificSpecific = val.split(',').map(Number).sort(); |
||||||
|
break; |
||||||
|
case val.includes('-'): |
||||||
|
minute.cronEvery = '4'; |
||||||
|
minute.rangeStart = val.split('-')[0]; |
||||||
|
minute.rangeEnd = val.split('-')[1]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
minute.cronEvery = '1'; |
||||||
|
} |
||||||
|
this.result.minute = minute; |
||||||
|
}, |
||||||
|
hoursReverseExp(hours) { |
||||||
|
let val = hours.split(" ")[2]; |
||||||
|
let hour ={ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:'0', |
||||||
|
specificSpecific:[], |
||||||
|
}; |
||||||
|
switch (true) { |
||||||
|
case val.includes('*'): |
||||||
|
hour.cronEvery = '1'; |
||||||
|
break; |
||||||
|
case val.includes('/'): |
||||||
|
hour.cronEvery = '2'; |
||||||
|
hour.incrementStart = val.split('/')[0]; |
||||||
|
hour.incrementIncrement = val.split('/')[1]; |
||||||
|
break; |
||||||
|
case val.includes(','): |
||||||
|
hour.cronEvery = '3'; |
||||||
|
hour.specificSpecific = val.split(',').map(Number).sort(); |
||||||
|
break; |
||||||
|
case val.includes('-'): |
||||||
|
hour.cronEvery = '4'; |
||||||
|
hour.rangeStart = val.split('-')[0]; |
||||||
|
hour.rangeEnd = val.split('-')[1]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
hour.cronEvery = '1'; |
||||||
|
} |
||||||
|
this.result.hour = hour; |
||||||
|
}, |
||||||
|
daysReverseExp(cron) { |
||||||
|
let days = cron.split(" ")[3]; |
||||||
|
let weeks = cron.split(" ")[5]; |
||||||
|
let day ={ |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:1, |
||||||
|
incrementIncrement:1, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:1, |
||||||
|
specificSpecific:[], |
||||||
|
cronLastSpecificDomDay:1, |
||||||
|
cronDaysBeforeEomMinus:1, |
||||||
|
cronDaysNearestWeekday:1, |
||||||
|
}; |
||||||
|
let week = { |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:1, |
||||||
|
incrementIncrement:1, |
||||||
|
specificSpecific:[], |
||||||
|
cronNthDayDay:1, |
||||||
|
cronNthDayNth:'1', |
||||||
|
}; |
||||||
|
if (!days.includes('?')) { |
||||||
|
switch (true) { |
||||||
|
case days.includes('*'): |
||||||
|
day.cronEvery = '1'; |
||||||
|
break; |
||||||
|
case days.includes('?'): |
||||||
|
// 2、4、11 |
||||||
|
break; |
||||||
|
case days.includes('/'): |
||||||
|
day.cronEvery = '3'; |
||||||
|
day.incrementStart = days.split('/')[0]; |
||||||
|
day.incrementIncrement = days.split('/')[1]; |
||||||
|
break; |
||||||
|
case days.includes(','): |
||||||
|
day.cronEvery = '5'; |
||||||
|
day.specificSpecific = days.split(',').map(Number).sort(); |
||||||
|
// day.specificSpecific.forEach(function (value, index) { |
||||||
|
// day.specificSpecific[index] = value -1; |
||||||
|
// }); |
||||||
|
break; |
||||||
|
case days.includes('LW'): |
||||||
|
day.cronEvery = '7'; |
||||||
|
break; |
||||||
|
case days.includes('L-'): |
||||||
|
day.cronEvery = '9'; |
||||||
|
day.cronDaysBeforeEomMinus = days.split('L-')[1]; |
||||||
|
break; |
||||||
|
case days.includes('L'): |
||||||
|
|
||||||
|
//alert(days); |
||||||
|
if(days.len == 1){ |
||||||
|
day.cronEvery = '6'; |
||||||
|
day.cronLastSpecificDomDay = '1'; |
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
day.cronEvery = '8'; |
||||||
|
day.cronLastSpecificDomDay = Number(days.split('L')[0]); |
||||||
|
} |
||||||
|
break; |
||||||
|
case days.includes('W'): |
||||||
|
day.cronEvery = '10'; |
||||||
|
day.cronDaysNearestWeekday = days.split('W')[0]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
day.cronEvery = '1'; |
||||||
|
} |
||||||
|
}else { |
||||||
|
switch (true){ |
||||||
|
case weeks.includes('/'): |
||||||
|
day.cronEvery = '2'; |
||||||
|
week.incrementStart = weeks.split("/")[0]; |
||||||
|
week.incrementIncrement = weeks.split("/")[1]; |
||||||
|
break; |
||||||
|
case weeks.includes(','): |
||||||
|
day.cronEvery = '4'; |
||||||
|
week.specificSpecific = weeks.split(',').map(Number).sort(); |
||||||
|
break; |
||||||
|
case '#': |
||||||
|
day.cronEvery = '11'; |
||||||
|
week.cronNthDayDay = weeks.split("#")[0]; |
||||||
|
week.cronNthDayNth = weeks.split("#")[1]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
day.cronEvery = '1'; |
||||||
|
week.cronEvery = '1'; |
||||||
|
} |
||||||
|
} |
||||||
|
this.result.day = day; |
||||||
|
this.result.week = week; |
||||||
|
}, |
||||||
|
monthsReverseExp(cron) { |
||||||
|
let months = cron.split(" ")[4]; |
||||||
|
let month = { |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:1, |
||||||
|
rangeEnd:1, |
||||||
|
specificSpecific:[], |
||||||
|
}; |
||||||
|
switch (true){ |
||||||
|
case months.includes('*'): |
||||||
|
month.cronEvery = '1'; |
||||||
|
break; |
||||||
|
case months.includes('/'): |
||||||
|
month.cronEvery = '2'; |
||||||
|
month.incrementStart = months.split('/')[0]; |
||||||
|
month.incrementIncrement = months.split('/')[1]; |
||||||
|
break; |
||||||
|
case months.includes(','): |
||||||
|
month.cronEvery = '3'; |
||||||
|
month.specificSpecific = months.split(',').map(Number).sort(); |
||||||
|
break; |
||||||
|
case months.includes('-'): |
||||||
|
month.cronEvery = '4'; |
||||||
|
month.rangeStart = months.split('-')[0]; |
||||||
|
month.rangeEnd = months.split('-')[1]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
month.cronEvery = '1'; |
||||||
|
} |
||||||
|
this.result.month = month; |
||||||
|
}, |
||||||
|
yearReverseExp(cron) { |
||||||
|
let years = cron.split(" ")[6]; |
||||||
|
let year = { |
||||||
|
cronEvery:'', |
||||||
|
incrementStart:3, |
||||||
|
incrementIncrement:5, |
||||||
|
rangeStart:2019, |
||||||
|
rangeEnd:2019, |
||||||
|
specificSpecific:[], |
||||||
|
}; |
||||||
|
switch (true){ |
||||||
|
case years.includes('*'): |
||||||
|
year.cronEvery = '1'; |
||||||
|
break; |
||||||
|
case years.includes('/'): |
||||||
|
year.cronEvery = '2'; |
||||||
|
year.incrementStart = years.split('/')[0]; |
||||||
|
year.incrementIncrement = years.split('/')[1]; |
||||||
|
break; |
||||||
|
case years.includes(','): |
||||||
|
year.cronEvery = '3'; |
||||||
|
year.specificSpecific = years.split(',').map(Number).sort(); |
||||||
|
break; |
||||||
|
case years.includes('-'): |
||||||
|
year.cronEvery = '4'; |
||||||
|
year.rangeStart = years.split('-')[0]; |
||||||
|
year.rangeEnd = years.split('-')[1]; |
||||||
|
break; |
||||||
|
default: |
||||||
|
year.cronEvery = '1'; |
||||||
|
} |
||||||
|
this.result.year = year; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.card-container { |
||||||
|
background: #fff; |
||||||
|
overflow: hidden; |
||||||
|
padding: 12px; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
.ant-tabs{ |
||||||
|
border:1px solid #e6ebf5; |
||||||
|
padding: 0; |
||||||
|
.ant-tabs-bar { |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
border-bottom: none; |
||||||
|
.ant-tabs-nav-container{ |
||||||
|
margin: 0; |
||||||
|
.ant-tabs-tab { |
||||||
|
padding: 0 24px!important; |
||||||
|
background-color: #f5f7fa!important; |
||||||
|
margin-right: 0px!important; |
||||||
|
border-radius: 0; |
||||||
|
line-height: 38px; |
||||||
|
border: 1px solid transparent!important; |
||||||
|
border-bottom: 1px solid #e6ebf5!important; |
||||||
|
} |
||||||
|
.ant-tabs-tab-active.ant-tabs-tab{ |
||||||
|
color: #409eff; |
||||||
|
background-color: #fff!important; |
||||||
|
border-right:1px solid #e6ebf5!important; |
||||||
|
border-left:1px solid #e6ebf5!important; |
||||||
|
border-bottom:1px solid #fff!important; |
||||||
|
font-weight: normal; |
||||||
|
transition:none!important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.ant-tabs-tabpane{ |
||||||
|
padding: 15px; |
||||||
|
.ant-row{ |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
.ant-select,.ant-input-number{ |
||||||
|
width: 100px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style lang="less" scoped> |
||||||
|
.container-widthEn{ |
||||||
|
width: 755px; |
||||||
|
} |
||||||
|
.container-widthCn{ |
||||||
|
width: 608px; |
||||||
|
} |
||||||
|
.language{ |
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
right: 13px; |
||||||
|
top: 13px; |
||||||
|
border: 1px solid transparent; |
||||||
|
height: 40px; |
||||||
|
line-height: 38px; |
||||||
|
font-size: 16px; |
||||||
|
color: #409eff; |
||||||
|
z-index: 1; |
||||||
|
background: #f5f7fa; |
||||||
|
outline: none; |
||||||
|
width: 47px; |
||||||
|
border-bottom: 1px solid #e6ebf5; |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
.card-container{ |
||||||
|
.bottom{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
padding: 10px 0 0 0; |
||||||
|
.cronButton{ |
||||||
|
margin: 0 10px; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tabBody{ |
||||||
|
.a-row{ |
||||||
|
margin: 10px 0; |
||||||
|
.long{ |
||||||
|
.a-select{ |
||||||
|
width:354px; |
||||||
|
} |
||||||
|
} |
||||||
|
.a-input-number{ |
||||||
|
width: 110px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,334 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
centered |
||||||
|
:title="name + '选择'" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭"> |
||||||
|
|
||||||
|
<a-row :gutter="18"> |
||||||
|
<a-col :span="16"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<a-form layout="inline"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
|
||||||
|
<a-col :span="14"> |
||||||
|
<a-form-item :label="(queryParamText||name)"> |
||||||
|
<a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :span="8"> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
||||||
|
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> |
||||||
|
</span> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a-table |
||||||
|
size="small" |
||||||
|
bordered |
||||||
|
:rowKey="rowKey" |
||||||
|
:columns="innerColumns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:loading="loading" |
||||||
|
:scroll="{ y: 240 }" |
||||||
|
:rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}" |
||||||
|
:customRow="customRowFn" |
||||||
|
@change="handleTableChange"> |
||||||
|
</a-table> |
||||||
|
|
||||||
|
</a-col> |
||||||
|
<a-col :span="8"> |
||||||
|
<a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}"> |
||||||
|
|
||||||
|
<a-table size="small" :rowKey="rowKey" bordered v-bind="selectedTable"> |
||||||
|
<span slot="action" slot-scope="text, record, index"> |
||||||
|
<a @click="handleDeleteSelected(record, index)">删除</a> |
||||||
|
</span> |
||||||
|
</a-table> |
||||||
|
|
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import Ellipsis from '@/components/Ellipsis' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { cloneObject, pushIfNotExist } from '@/utils/util' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectBizComponentModal', |
||||||
|
mixins: [JeecgListMixin], |
||||||
|
components: { Ellipsis }, |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
visible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
valueKey: { |
||||||
|
type: String, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
multiple: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: Number, |
||||||
|
default: 900 |
||||||
|
}, |
||||||
|
|
||||||
|
name: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
listUrl: { |
||||||
|
type: String, |
||||||
|
required: true, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 根据 value 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname |
||||||
|
valueUrl: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
displayKey: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
columns: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
// 查询条件Code |
||||||
|
queryParamCode: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
// 查询条件文字 |
||||||
|
queryParamText: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
rowKey: { |
||||||
|
type: String, |
||||||
|
default: 'id' |
||||||
|
}, |
||||||
|
// 过长裁剪长度,设置为 -1 代表不裁剪 |
||||||
|
ellipsisLength: { |
||||||
|
type: Number, |
||||||
|
default: 12 |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
innerValue: [], |
||||||
|
// 已选择列表 |
||||||
|
selectedTable: { |
||||||
|
pagination: false, |
||||||
|
scroll: { y: 240 }, |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
...this.columns[0], |
||||||
|
width: this.columns[0].widthRight || this.columns[0].width, |
||||||
|
}, |
||||||
|
{ title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, } |
||||||
|
], |
||||||
|
dataSource: [], |
||||||
|
}, |
||||||
|
renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>), |
||||||
|
url: { list: this.listUrl }, |
||||||
|
/* 分页参数 */ |
||||||
|
ipagination: { |
||||||
|
current: 1, |
||||||
|
pageSize: 5, |
||||||
|
pageSizeOptions: ['5', '10', '20', '30'], |
||||||
|
showTotal: (total, range) => { |
||||||
|
return range[0] + '-' + range[1] + ' 共' + total + '条' |
||||||
|
}, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
options: [], |
||||||
|
dataSourceMap: {}, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 表头 |
||||||
|
innerColumns() { |
||||||
|
let columns = cloneObject(this.columns) |
||||||
|
columns.forEach(column => { |
||||||
|
// 给所有的列加上过长裁剪 |
||||||
|
if (this.ellipsisLength !== -1) { |
||||||
|
column.customRender = (text) => this.renderEllipsis(text) |
||||||
|
} |
||||||
|
}) |
||||||
|
return columns |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value: { |
||||||
|
deep: true, |
||||||
|
immediate: true, |
||||||
|
handler(val) { |
||||||
|
this.innerValue = cloneObject(val) |
||||||
|
this.selectedRowKeys = [] |
||||||
|
this.valueWatchHandler(val) |
||||||
|
this.queryOptionsByValue(val) |
||||||
|
} |
||||||
|
}, |
||||||
|
dataSource: { |
||||||
|
deep: true, |
||||||
|
handler(val) { |
||||||
|
this.emitOptions(val) |
||||||
|
this.valueWatchHandler(this.innerValue) |
||||||
|
} |
||||||
|
}, |
||||||
|
selectedRowKeys: { |
||||||
|
immediate: true, |
||||||
|
deep: true, |
||||||
|
handler(val) { |
||||||
|
this.selectedTable.dataSource = val.map(key => { |
||||||
|
for (let data of this.dataSource) { |
||||||
|
if (data[this.rowKey] === key) { |
||||||
|
pushIfNotExist(this.innerValue, data[this.valueKey]) |
||||||
|
return data |
||||||
|
} |
||||||
|
} |
||||||
|
for (let data of this.selectedTable.dataSource) { |
||||||
|
if (data[this.rowKey] === key) { |
||||||
|
pushIfNotExist(this.innerValue, data[this.valueKey]) |
||||||
|
return data |
||||||
|
} |
||||||
|
} |
||||||
|
console.warn('未找到选择的行信息,key:' + key) |
||||||
|
return {} |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
|
||||||
|
/** 关闭弹窗 */ |
||||||
|
close() { |
||||||
|
this.$emit('update:visible', false) |
||||||
|
}, |
||||||
|
|
||||||
|
valueWatchHandler(val) { |
||||||
|
val.forEach(item => { |
||||||
|
this.dataSource.concat(this.selectedTable.dataSource).forEach(data => { |
||||||
|
if (data[this.valueKey] === item) { |
||||||
|
pushIfNotExist(this.selectedRowKeys, data[this.rowKey]) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
queryOptionsByValue(value) { |
||||||
|
if (!value || value.length === 0) { |
||||||
|
return |
||||||
|
} |
||||||
|
// 判断options是否存在value,如果已存在数据就不再请求后台了 |
||||||
|
let notExist = false |
||||||
|
for (let val of value) { |
||||||
|
let find = false |
||||||
|
for (let option of this.options) { |
||||||
|
if (val === option.value) { |
||||||
|
find = true |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
if (!find) { |
||||||
|
notExist = true |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
if (!notExist) return |
||||||
|
getAction(this.valueUrl || this.listUrl, { |
||||||
|
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确 |
||||||
|
[this.valueKey]: value.join(',') + ',', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: value.length |
||||||
|
}).then((res) => { |
||||||
|
if (res.success) { |
||||||
|
let dataSource = res.result |
||||||
|
if (!(dataSource instanceof Array)) { |
||||||
|
dataSource = res.result.records |
||||||
|
} |
||||||
|
this.emitOptions(dataSource, (data) => { |
||||||
|
pushIfNotExist(this.innerValue, data[this.valueKey]) |
||||||
|
pushIfNotExist(this.selectedRowKeys, data[this.rowKey]) |
||||||
|
pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey) |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
emitOptions(dataSource, callback) { |
||||||
|
dataSource.forEach(data => { |
||||||
|
let key = data[this.valueKey] |
||||||
|
this.dataSourceMap[key] = data |
||||||
|
pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value') |
||||||
|
typeof callback === 'function' ? callback(data) : '' |
||||||
|
}) |
||||||
|
this.$emit('options', this.options, this.dataSourceMap) |
||||||
|
}, |
||||||
|
|
||||||
|
/** 完成选择 */ |
||||||
|
handleOk() { |
||||||
|
let value = this.selectedTable.dataSource.map(data => data[this.valueKey]) |
||||||
|
this.$emit('input', value) |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
|
||||||
|
/** 删除已选择的 */ |
||||||
|
handleDeleteSelected(record, index) { |
||||||
|
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1) |
||||||
|
this.selectedTable.dataSource.splice(index, 1) |
||||||
|
}, |
||||||
|
|
||||||
|
customRowFn(record) { |
||||||
|
return { |
||||||
|
on: { |
||||||
|
click: () => { |
||||||
|
let key = record[this.rowKey] |
||||||
|
if (!this.multiple) { |
||||||
|
this.selectedRowKeys = [key] |
||||||
|
this.selectedTable.dataSource = [record] |
||||||
|
} else { |
||||||
|
let index = this.selectedRowKeys.indexOf(key) |
||||||
|
if (index === -1) { |
||||||
|
this.selectedRowKeys.push(key) |
||||||
|
this.selectedTable.dataSource.push(record) |
||||||
|
} else { |
||||||
|
this.handleDeleteSelected(record, index) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
</style> |
@ -0,0 +1,36 @@ |
|||||||
|
# JSelectBizComponent |
||||||
|
|
||||||
|
Jeecg 选择组件的公共可复用组件 |
||||||
|
|
||||||
|
## 引用方式 |
||||||
|
|
||||||
|
```js |
||||||
|
import JSelectBizComponent from '@/src/components/jeecgbiz/JSelectBizComponent' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { JSelectBizComponent } |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
## 参数 |
||||||
|
|
||||||
|
### 配置参数 |
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 默认值 | 备注 | |
||||||
|
|-----------------------|---------|------|--------------|--------------------------------------------------------------------------------------| |
||||||
|
| rowKey | String | | "id" | 唯一标识的字段名 | |
||||||
|
| value(v-model) | String | | "" | 默认选择的数据,多个用半角逗号分割 | |
||||||
|
| name | String | | "" | 显示名字,例如选择用户就填写"用户" | |
||||||
|
| listUrl | String | 是 | | 数据请求地址,必须是封装了分页的地址 | |
||||||
|
| valueUrl | String | | "" | 获取显示文本的地址,例如存的是 username,可以通过该地址获取到 realname | |
||||||
|
| displayKey | String | | null | 显示在标签上的字段 key ,不传则直接显示数据 | |
||||||
|
| returnKeys | Array | | ['id', 'id'] | v-model 绑定的 keys,是个数组,默认使用第二项,当配置了 `returnId=true` 就返回第一项 | |
||||||
|
| returnId | Boolean | | false | 返回ID,设为true后将返回配置的 `returnKeys` 中的第一项 | |
||||||
|
| selectButtonText | String | | "选择" | 选择按钮的文字 | |
||||||
|
| queryParamText | String | | null | 查询条件显示文字,不传则使用 `name` | |
||||||
|
| columns | Array | 是 | | 列配置项,与antd的table的配置完全一致。列的第一项会被配置成右侧已选择的列表上 | |
||||||
|
| columns[0].widthRight | String | | null | 仅列的第一项可以应用此配置,表示右侧已选择列表的宽度,建议 `70%`,不传则应用`width` | |
||||||
|
| placeholder | String | | "请选择" | 占位符 | |
||||||
|
| disabled | Boolean | | false | 是否禁用 | |
||||||
|
| multiple | Boolean | | false | 是否可多选 | |
||||||
|
| buttons | Boolean | | true | 是否显示"选择"按钮,如果不显示,可以直接点击文本框打开选择界面 | |
@ -0,0 +1,165 @@ |
|||||||
|
<template> |
||||||
|
<a-row class="j-select-biz-component-box" type="flex" :gutter="8"> |
||||||
|
<a-col class="left" :class="{'full': !buttons}"> |
||||||
|
<slot name="left"> |
||||||
|
<a-select |
||||||
|
mode="multiple" |
||||||
|
:placeholder="placeholder" |
||||||
|
v-model="selectValue" |
||||||
|
:options="selectOptions" |
||||||
|
allowClear |
||||||
|
:disabled="disabled" |
||||||
|
:open="selectOpen" |
||||||
|
style="width: 100%;" |
||||||
|
@dropdownVisibleChange="handleDropdownVisibleChange" |
||||||
|
@click.native="visible=(buttons?visible:true)" |
||||||
|
/> |
||||||
|
</slot> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
<a-col v-if="buttons" class="right"> |
||||||
|
<a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button> |
||||||
|
</a-col> |
||||||
|
|
||||||
|
<j-select-biz-component-modal |
||||||
|
v-model="selectValue" |
||||||
|
:visible.sync="visible" |
||||||
|
v-bind="modalProps" |
||||||
|
@options="handleOptions" |
||||||
|
/> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectBizComponentModal from './JSelectBizComponentModal' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectBizComponent', |
||||||
|
components: { JSelectBizComponentModal }, |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
/** 是否返回 id,默认 false,返回 code */ |
||||||
|
returnId: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
placeholder: { |
||||||
|
type: String, |
||||||
|
default: '请选择' |
||||||
|
}, |
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 是否支持多选,默认 true |
||||||
|
multiple: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 是否显示按钮,默认 true |
||||||
|
buttons: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 显示的 Key |
||||||
|
displayKey: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
// 返回的 key |
||||||
|
returnKeys: { |
||||||
|
type: Array, |
||||||
|
default: () => ['id', 'id'] |
||||||
|
}, |
||||||
|
// 选择按钮文字 |
||||||
|
selectButtonText: { |
||||||
|
type: String, |
||||||
|
default: '选择' |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
selectValue: [], |
||||||
|
selectOptions: [], |
||||||
|
dataSourceMap: {}, |
||||||
|
visible: false, |
||||||
|
selectOpen: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
valueKey() { |
||||||
|
return this.returnId ? this.returnKeys[0] : this.returnKeys[1] |
||||||
|
}, |
||||||
|
modalProps() { |
||||||
|
return Object.assign({ |
||||||
|
valueKey: this.valueKey, |
||||||
|
multiple: this.multiple, |
||||||
|
returnKeys: this.returnKeys, |
||||||
|
displayKey: this.displayKey || this.valueKey |
||||||
|
}, this.$attrs) |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value: { |
||||||
|
immediate: true, |
||||||
|
handler(val) { |
||||||
|
if (val) { |
||||||
|
this.selectValue = val.split(',') |
||||||
|
} else { |
||||||
|
this.selectValue = [] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
selectValue: { |
||||||
|
deep: true, |
||||||
|
handler(val) { |
||||||
|
let rows = val.map(key => this.dataSourceMap[key]) |
||||||
|
this.$emit('select', rows) |
||||||
|
let data = val.join(',') |
||||||
|
this.$emit('input', data) |
||||||
|
this.$emit('change', data) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleOptions(options, dataSourceMap) { |
||||||
|
this.selectOptions = options |
||||||
|
this.dataSourceMap = dataSourceMap |
||||||
|
}, |
||||||
|
handleDropdownVisibleChange() { |
||||||
|
// 解决antdv自己的bug —— open 设置为 false 了,点击后还是添加了 open 样式,导致点击事件失效 |
||||||
|
this.selectOpen = true |
||||||
|
this.$nextTick(() => { |
||||||
|
this.selectOpen = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.j-select-biz-component-box { |
||||||
|
|
||||||
|
@width: 82px; |
||||||
|
|
||||||
|
.left { |
||||||
|
width: calc(100% - @width - 8px); |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
width: @width; |
||||||
|
} |
||||||
|
|
||||||
|
.full { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .ant-select-search__field { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,122 @@ |
|||||||
|
<template> |
||||||
|
<div class="components-input-demo-presuffix"> |
||||||
|
<!----> |
||||||
|
<a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled"> |
||||||
|
<a-icon slot="prefix" type="cluster" title="部门选择控件"/> |
||||||
|
<a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/> |
||||||
|
</a-input> |
||||||
|
|
||||||
|
<j-select-depart-modal |
||||||
|
ref="innerDepartSelectModal" |
||||||
|
:modal-width="modalWidth" |
||||||
|
:multi="multi" |
||||||
|
:rootOpened="rootOpened" |
||||||
|
:depart-id="departIds" |
||||||
|
@ok="handleOK" |
||||||
|
@initComp="initComp"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectDepartModal from './modal/JSelectDepartModal' |
||||||
|
export default { |
||||||
|
name: 'JSelectDepart', |
||||||
|
components:{ |
||||||
|
JSelectDepartModal |
||||||
|
}, |
||||||
|
props:{ |
||||||
|
modalWidth:{ |
||||||
|
type:Number, |
||||||
|
default:500, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
multi:{ |
||||||
|
type:Boolean, |
||||||
|
default:false, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
rootOpened:{ |
||||||
|
type:Boolean, |
||||||
|
default:true, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
type:String, |
||||||
|
required:false |
||||||
|
}, |
||||||
|
disabled:{ |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 自定义返回字段,默认返回 id |
||||||
|
customReturnField: { |
||||||
|
type: String, |
||||||
|
default: 'id' |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
visible:false, |
||||||
|
confirmLoading:false, |
||||||
|
departNames:"", |
||||||
|
departIds:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.departIds = this.value |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
value(val){ |
||||||
|
if (this.customReturnField === 'id') { |
||||||
|
this.departIds = val |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
initComp(departNames){ |
||||||
|
this.departNames = departNames |
||||||
|
}, |
||||||
|
openModal(){ |
||||||
|
this.$refs.innerDepartSelectModal.show() |
||||||
|
}, |
||||||
|
handleOK(rows, idstr) { |
||||||
|
let value = '' |
||||||
|
if (!rows && rows.length <= 0) { |
||||||
|
this.departNames = '' |
||||||
|
this.departIds = '' |
||||||
|
} else { |
||||||
|
value = rows.map(row => row[this.customReturnField]).join(',') |
||||||
|
this.departNames = rows.map(row => row['departName']).join(',') |
||||||
|
this.departIds = idstr |
||||||
|
} |
||||||
|
this.$emit("change", value) |
||||||
|
}, |
||||||
|
getDepartNames(){ |
||||||
|
return this.departNames |
||||||
|
}, |
||||||
|
handleEmpty(){ |
||||||
|
this.handleOK('') |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.components-input-demo-presuffix .anticon-close-circle { |
||||||
|
cursor: pointer; |
||||||
|
color: #ccc; |
||||||
|
transition: color 0.3s; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.components-input-demo-presuffix .anticon-close-circle:hover { |
||||||
|
color: #f5222d; |
||||||
|
} |
||||||
|
.components-input-demo-presuffix .anticon-close-circle:active { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,327 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<!-- <a-input-search v-if="kind === 'material'" v-model="names" placeholder="请选择" @search="onSearch"></a-input-search> --> |
||||||
|
<a-select |
||||||
|
:value="value" |
||||||
|
v-if="kind === 'material'" |
||||||
|
placeholder="编码 名称" |
||||||
|
show-search |
||||||
|
style="width: 100px" |
||||||
|
dropdownClassName="drop-down-Style" |
||||||
|
option-label-prop="value" |
||||||
|
:dropdownMatchSelectWidth="false" |
||||||
|
:default-active-first-option="false" |
||||||
|
:show-arrow="false" |
||||||
|
:filter-option="false" |
||||||
|
:not-found-content="fetching ? undefined : null" |
||||||
|
@search="fetchUser" |
||||||
|
@change="handleChange" |
||||||
|
@focus="loadData()" |
||||||
|
> |
||||||
|
<div slot="notFoundContent"> |
||||||
|
<a-spin v-if="fetching" size="small" /> |
||||||
|
</div> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0" /> |
||||||
|
<div |
||||||
|
@mousedown="(e) => e.preventDefault()" |
||||||
|
style="display: flex; justify-content: space-between; margin: 0 5px" |
||||||
|
> |
||||||
|
<a-pagination |
||||||
|
:default-current="6" |
||||||
|
:current.sync="queryParam.current" |
||||||
|
:pageSize.sync="queryParam.pageSize" |
||||||
|
@change="changeCurrent" |
||||||
|
:total="queryParam.total" |
||||||
|
style="margin-bottom: 4px" |
||||||
|
/> |
||||||
|
<a-button type="primary" @click="confirmSelected">确定</a-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a-select-opt-group v-if="materailList.length"> |
||||||
|
<span slot="label"> |
||||||
|
<div class="select-option"> |
||||||
|
<a-checkbox style="margin-right:5px" :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> |
||||||
|
</a-checkbox> |
||||||
|
<span class="mr10" style="width: 100px; font-size: 16px">物料编码</span> |
||||||
|
<span class="mr10" style="width: 400px; font-size: 16px;">名称</span> |
||||||
|
<span class="mr10" style="width: 100px; font-size: 16px">类别</span> |
||||||
|
<span class="mr10" style="width: 100px; font-size: 16px">单位</span> |
||||||
|
<span class="mr10" style="width: 100px; font-size: 16px">多属性</span> |
||||||
|
<span class="mr10" style="width: 100px; font-size: 16px">库存</span> |
||||||
|
<span class="mr10" style="width: 100px; font-size: 16px">扩展信息</span> |
||||||
|
</div> |
||||||
|
</span> |
||||||
|
|
||||||
|
<a-select-option |
||||||
|
style="width: 400px" |
||||||
|
:value="item.mBarCode" |
||||||
|
v-for="(item, index) in materailList" |
||||||
|
:key="item.id" |
||||||
|
> |
||||||
|
<div class="select-option"> |
||||||
|
<div style="margin-left: -8px;"> |
||||||
|
<a-checkbox |
||||||
|
style="margin-right:5px" |
||||||
|
:id="item.mBarCode" |
||||||
|
:key="index" |
||||||
|
:checked="checkedList.indexOf(item.mBarCode) !== -1" |
||||||
|
@change="(e) => onchange(e, item)" |
||||||
|
@click.stop.native="() => {}" |
||||||
|
> |
||||||
|
</a-checkbox> |
||||||
|
</div> |
||||||
|
<span class="mr10" style="width: 100px">{{ item.mBarCode }}</span> |
||||||
|
<span class="mr10" style="width: 400px;width-space:nowrap;text-overflow:ellipsis;overflow: hidden;white-space:nowrap;">{{ item.name }}</span> |
||||||
|
<span class="mr10" style="width: 100px">{{ item.categoryName }}</span> |
||||||
|
<span class="mr10" style="width: 100px">{{ item.unit }}</span> |
||||||
|
<span class="mr10" style="width: 100px">{{ item.sku }}</span> |
||||||
|
<span class="mr10" style="width: 100px">{{ item.stock }}</span> |
||||||
|
<span class="mr10" style="width: 100px">{{ item.expand }}</span> |
||||||
|
</div> |
||||||
|
</a-select-option> |
||||||
|
</a-select-opt-group> |
||||||
|
</a-select> |
||||||
|
<a-input-search |
||||||
|
v-if="kind === 'batch' || kind === 'sn'" |
||||||
|
v-model="names" |
||||||
|
placeholder="请选择" |
||||||
|
readOnly |
||||||
|
@search="onSearch" |
||||||
|
></a-input-search> |
||||||
|
<j-select-material-modal |
||||||
|
v-if="kind === 'material'" |
||||||
|
ref="selectModal" |
||||||
|
:modal-width="modalWidth" |
||||||
|
:rows="rows" |
||||||
|
:multi="multi" |
||||||
|
:bar-code="value" |
||||||
|
@ok="selectOK" |
||||||
|
@initComp="initComp" |
||||||
|
/> |
||||||
|
<j-select-batch-modal |
||||||
|
v-if="kind === 'batch'" |
||||||
|
ref="selectModal" |
||||||
|
:modal-width="modalWidth" |
||||||
|
:rows="rows" |
||||||
|
:multi="multi" |
||||||
|
:bar-code="value" |
||||||
|
@ok="selectOK" |
||||||
|
@initComp="initComp" |
||||||
|
/> |
||||||
|
<j-select-sn-modal |
||||||
|
v-if="kind === 'sn'" |
||||||
|
ref="selectModal" |
||||||
|
:modal-width="modalWidth" |
||||||
|
:rows="rows" |
||||||
|
:multi="multi" |
||||||
|
:bar-code="value" |
||||||
|
@ok="selectOK" |
||||||
|
@initComp="initComp" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectMaterialModal from './modal/JSelectMaterialModal' |
||||||
|
import JSelectBatchModal from './modal/JSelectBatchModal' |
||||||
|
import JSelectSnModal from './modal/JSelectSnModal' |
||||||
|
import { filterObj, getMpListShort } from '@/utils/util' |
||||||
|
import { getMaterialByBarCode, getMaterialBySelect } from '@/api/api' |
||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectList', |
||||||
|
components: { |
||||||
|
JSelectMaterialModal, |
||||||
|
JSelectBatchModal, |
||||||
|
JSelectSnModal, |
||||||
|
VNodes: { |
||||||
|
functional: true, |
||||||
|
render: (h, ctx) => ctx.props.vnodes, |
||||||
|
}, |
||||||
|
}, |
||||||
|
props: { |
||||||
|
modalWidth: { |
||||||
|
type: Number, |
||||||
|
default: 1300, |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
rows: { |
||||||
|
type: String, |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
kind: { |
||||||
|
type: String, |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
multi: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
required: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
ids: '', |
||||||
|
names: '', |
||||||
|
materailList: [], |
||||||
|
fetching: false, |
||||||
|
queryParam: { |
||||||
|
q: '', |
||||||
|
current: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 0, |
||||||
|
}, |
||||||
|
checkedList: [], |
||||||
|
checkAll: false, |
||||||
|
indeterminate: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.ids = this.value |
||||||
|
// this.loadData() |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(val) { |
||||||
|
this.ids = val |
||||||
|
}, |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change', |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onCheckAllChange(e) { |
||||||
|
Object.assign(this, { |
||||||
|
checkedList: e.target.checked ? this.materailList.map((item) => item.mBarCode) : [], |
||||||
|
indeterminate: false, |
||||||
|
checkAll: e.target.checked, |
||||||
|
}) |
||||||
|
}, |
||||||
|
onchange(event, item) { |
||||||
|
let index = this.checkedList.indexOf(item.mBarCode) |
||||||
|
if (index !== -1) { |
||||||
|
this.checkedList.splice(index, 1) |
||||||
|
} else { |
||||||
|
this.checkedList.push(item.mBarCode) |
||||||
|
} |
||||||
|
this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.materailList.length |
||||||
|
this.checkAll = this.checkedList.length === this.materailList.length |
||||||
|
}, |
||||||
|
confirmSelected() { |
||||||
|
let ids = this.checkedList.join(',') |
||||||
|
this.$emit('change', ids) |
||||||
|
this.open = false |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
changeCurrent(current) { |
||||||
|
this.queryParam.current = current |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
fetchUser(value) { |
||||||
|
clearTimeout(this.timeout) |
||||||
|
this.timeout = setTimeout(() => { |
||||||
|
this.queryParam.q = value |
||||||
|
this.loadData(1) |
||||||
|
}, 800) |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
let param = {} |
||||||
|
param.mpList = getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
param.page = this.queryParam.current |
||||||
|
param.rows = this.queryParam.pageSize |
||||||
|
param.q = this.queryParam.q |
||||||
|
return filterObj(param) |
||||||
|
}, |
||||||
|
async loadData(arg) { |
||||||
|
if (arg === 1) { |
||||||
|
this.queryParam.current = 1 |
||||||
|
} |
||||||
|
this.fetching = true |
||||||
|
let params = this.getQueryParams() //查询条件 |
||||||
|
await getMaterialBySelect(params) |
||||||
|
.then((res) => { |
||||||
|
if (res) { |
||||||
|
this.checkedList = [] |
||||||
|
this.materailList = res.rows |
||||||
|
this.queryParam.total = res.total || 0 |
||||||
|
} |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
this.fetching = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
initComp(name) { |
||||||
|
this.names = name |
||||||
|
}, |
||||||
|
onSearch() { |
||||||
|
if (this.kind === 'material') { |
||||||
|
let param = { |
||||||
|
barCode: this.names, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性 |
||||||
|
prefixNo: this.prefixNo, |
||||||
|
} |
||||||
|
getMaterialByBarCode(param).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
let mList = res.data |
||||||
|
if (mList && mList.length === 1) { |
||||||
|
//如果条码可以查到商品,则直接加载,不用弹窗再选择 |
||||||
|
this.$emit('change', this.names) |
||||||
|
} else { |
||||||
|
this.$refs.selectModal.showModal(this.names) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$refs.selectModal.showModal() |
||||||
|
} |
||||||
|
}, |
||||||
|
selectOK(rows, idstr) { |
||||||
|
console.log('选中id', idstr) |
||||||
|
if (!rows) { |
||||||
|
this.ids = '' |
||||||
|
} else { |
||||||
|
this.names = idstr |
||||||
|
this.ids = idstr |
||||||
|
} |
||||||
|
this.$emit('change', this.ids) |
||||||
|
}, |
||||||
|
handleChange(value) { |
||||||
|
this.names = value |
||||||
|
this.$emit('change', value) |
||||||
|
}, |
||||||
|
focus() { |
||||||
|
if (this.names) { |
||||||
|
this.queryParam.q = '' |
||||||
|
this.loadData() |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
/deep/ .drop-down-Style { |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
.select-option { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding-top: 5px; |
||||||
|
width: 1000px; |
||||||
|
} |
||||||
|
.mr10 { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,87 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-input-search |
||||||
|
v-model="materialNames" |
||||||
|
placeholder="请选择商品" |
||||||
|
readOnly |
||||||
|
@search="onSearchMaterial"> |
||||||
|
</a-input-search> |
||||||
|
<j-select-material-modal ref="selectModal" :modal-width="modalWidth" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectMaterialModal from './modal/JSelectMaterialModal' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectMaterial', |
||||||
|
components: {JSelectMaterialModal}, |
||||||
|
props: { |
||||||
|
modalWidth: { |
||||||
|
type: Number, |
||||||
|
default: 1300, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
multi: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
required: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
materialIds: "", |
||||||
|
materialNames: "", |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.materialIds = this.value |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(val) { |
||||||
|
this.materialIds = val |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initComp(barCode) { |
||||||
|
this.materialNames = barCode |
||||||
|
}, |
||||||
|
onSearchMaterial() { |
||||||
|
this.$refs.selectModal.showModal() |
||||||
|
}, |
||||||
|
selectOK(rows, idstr) { |
||||||
|
console.log("选中商品", rows) |
||||||
|
console.log("选中商品id", idstr) |
||||||
|
if (!rows) { |
||||||
|
this.materialNames = '' |
||||||
|
this.materialIds = '' |
||||||
|
} else { |
||||||
|
let temp = '' |
||||||
|
for (let item of rows) { |
||||||
|
temp += ',' + item.mBarCode |
||||||
|
} |
||||||
|
this.materialNames = temp.substring(1) |
||||||
|
this.materialIds = idstr |
||||||
|
} |
||||||
|
this.$emit("change", this.materialIds) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,47 @@ |
|||||||
|
<template> |
||||||
|
<!-- 定义在这里的参数都是不可在外部覆盖的,防止出现问题 --> |
||||||
|
<j-select-biz-component |
||||||
|
:value="value" |
||||||
|
:ellipsisLength="25" |
||||||
|
:listUrl="url.list" |
||||||
|
:columns="columns" |
||||||
|
v-on="$listeners" |
||||||
|
v-bind="attrs" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectBizComponent from './JSelectBizComponent' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectMultiUser', |
||||||
|
components: { JSelectBizComponent }, |
||||||
|
props: ['value'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
url: { list: '/sys/user/list' }, |
||||||
|
columns: [ |
||||||
|
{ title: '姓名', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'realname' }, |
||||||
|
{ title: '账号', align: 'center', width: '25%', dataIndex: 'username' }, |
||||||
|
{ title: '电话', align: 'center', width: '20%', dataIndex: 'phone' }, |
||||||
|
{ title: '出生日期', align: 'center', width: '20%', dataIndex: 'birthday' } |
||||||
|
], |
||||||
|
// 定义在这里的参数都是可以在外部传递覆盖的,可以更灵活的定制化使用的组件 |
||||||
|
default: { |
||||||
|
name: '用户', |
||||||
|
width: 1200, |
||||||
|
displayKey: 'realname', |
||||||
|
returnKeys: ['id', 'username'], |
||||||
|
queryParamText: '账号', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
attrs() { |
||||||
|
return Object.assign(this.default, this.$attrs) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped></style> |
@ -0,0 +1,37 @@ |
|||||||
|
<template> |
||||||
|
<j-select-biz-component :width="1000" v-bind="configs" v-on="$listeners"/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectBizComponent from './JSelectBizComponent' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectPosition', |
||||||
|
components: { JSelectBizComponent }, |
||||||
|
props: ['value'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
settings: { |
||||||
|
name: '职务', |
||||||
|
displayKey: 'name', |
||||||
|
returnKeys: ['id', 'code'], |
||||||
|
listUrl: '/sys/position/list', |
||||||
|
queryParamCode: 'name', |
||||||
|
queryParamText: '职务名称', |
||||||
|
columns: [ |
||||||
|
{ title: '职务名称', dataIndex: 'name', align: 'center', width: '30%', widthRight: '70%' }, |
||||||
|
{ title: '职务编码', dataIndex: 'code', align: 'center', width: '35%' }, |
||||||
|
{ title: '职级', dataIndex: 'rank_dictText', align: 'center', width: '25%' } |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
configs() { |
||||||
|
return Object.assign({ value: this.value }, this.settings, this.$attrs) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped></style> |
@ -0,0 +1,38 @@ |
|||||||
|
<template> |
||||||
|
<j-select-biz-component |
||||||
|
:value="value" |
||||||
|
|
||||||
|
name="角色" |
||||||
|
displayKey="roleName" |
||||||
|
|
||||||
|
:returnKeys="returnKeys" |
||||||
|
:listUrl="url.list" |
||||||
|
:columns="columns" |
||||||
|
queryParamText="角色编码" |
||||||
|
|
||||||
|
v-on="$listeners" |
||||||
|
v-bind="$attrs" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectBizComponent from './JSelectBizComponent' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectMultiUser', |
||||||
|
components: { JSelectBizComponent }, |
||||||
|
props: ['value'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
returnKeys: ['id', 'roleCode'], |
||||||
|
url: { list: '/sys/role/list' }, |
||||||
|
columns: [ |
||||||
|
{ title: '角色名称', dataIndex: 'roleName', align: 'center', width: 120 }, |
||||||
|
{ title: '角色编码', dataIndex: 'roleCode', align: 'center', width: 120 } |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped></style> |
@ -0,0 +1,87 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-input-search |
||||||
|
v-model="materialNames" |
||||||
|
placeholder="请选择序列号商品" |
||||||
|
readOnly |
||||||
|
@search="onSearchMaterial"> |
||||||
|
</a-input-search> |
||||||
|
<j-select-serial-material-modal ref="selectModal" :modal-width="modalWidth" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectSerialMaterialModal from './modal/JSelectSerialMaterialModal' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectSerialMaterial', |
||||||
|
components: {JSelectSerialMaterialModal}, |
||||||
|
props: { |
||||||
|
modalWidth: { |
||||||
|
type: Number, |
||||||
|
default: 1100, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
multi: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
required: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
materialIds: "", |
||||||
|
materialNames: "", |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.materialIds = this.value |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(val) { |
||||||
|
this.materialIds = val |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initComp(barCode) { |
||||||
|
this.materialNames = barCode |
||||||
|
}, |
||||||
|
onSearchMaterial() { |
||||||
|
this.$refs.selectModal.showModal() |
||||||
|
}, |
||||||
|
selectOK(rows, idstr) { |
||||||
|
console.log("选中序列号商品", rows) |
||||||
|
console.log("选中序列号商品id", idstr) |
||||||
|
if (!rows) { |
||||||
|
this.materialNames = '' |
||||||
|
this.materialIds = '' |
||||||
|
} else { |
||||||
|
let temp = '' |
||||||
|
for (let item of rows) { |
||||||
|
temp += ',' + item.mBarCode |
||||||
|
} |
||||||
|
this.materialNames = temp.substring(1) |
||||||
|
this.materialIds = idstr |
||||||
|
} |
||||||
|
this.$emit("change", this.materialIds) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,89 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-input-search |
||||||
|
v-model="userNames" |
||||||
|
placeholder="请先选择用户" |
||||||
|
readOnly |
||||||
|
unselectable="on" |
||||||
|
@search="onSearchDepUser"> |
||||||
|
<a-button slot="enterButton" :disabled="disabled">选择用户</a-button> |
||||||
|
</a-input-search> |
||||||
|
<j-select-user-by-dep-modal ref="selectModal" :modal-width="modalWidth" :multi="multi" @ok="selectOK" :user-ids="value" @initComp="initComp"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectUserByDepModal from './modal/JSelectUserByDepModal' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectUserByDep', |
||||||
|
components: {JSelectUserByDepModal}, |
||||||
|
props: { |
||||||
|
modalWidth: { |
||||||
|
type: Number, |
||||||
|
default: 1250, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
required: false, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
multi: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
required: false |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
userIds: "", |
||||||
|
userNames: "" |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.userIds = this.value |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(val) { |
||||||
|
this.userIds = val |
||||||
|
} |
||||||
|
}, |
||||||
|
model: { |
||||||
|
prop: 'value', |
||||||
|
event: 'change' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initComp(userNames) { |
||||||
|
this.userNames = userNames |
||||||
|
}, |
||||||
|
onSearchDepUser() { |
||||||
|
this.$refs.selectModal.showModal() |
||||||
|
}, |
||||||
|
selectOK(rows, idstr) { |
||||||
|
console.log("当前选中用户", rows) |
||||||
|
console.log("当前选中用户ID", idstr) |
||||||
|
if (!rows) { |
||||||
|
this.userNames = '' |
||||||
|
this.userIds = '' |
||||||
|
} else { |
||||||
|
let temp = '' |
||||||
|
for (let item of rows) { |
||||||
|
temp += ',' + item.realname |
||||||
|
} |
||||||
|
this.userNames = temp.substring(1) |
||||||
|
this.userIds = idstr |
||||||
|
} |
||||||
|
this.$emit("change", this.userIds) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,137 @@ |
|||||||
|
# JSelectDepart 部门选择组件 |
||||||
|
选择部门组件,存储部门ID,显示部门名称 |
||||||
|
|
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 |说明| |
||||||
|
|--------------|---------|----|---------| |
||||||
|
| modalWidth |Number | | 弹框宽度 默认500 | |
||||||
|
| multi |Boolean | | 是否多选 默认false | |
||||||
|
| rootOpened |Boolean | | 是否展开根节点 默认true | |
||||||
|
| disabled |Boolean | | 是否禁用 默认false| |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-form-item label="部门选择v-decorator" style="width: 300px"> |
||||||
|
<j-select-depart v-decorator="['bumen']"/> |
||||||
|
{{ getFormFieldValue('bumen') }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="部门选择v-model" style="width: 300px"> |
||||||
|
<j-select-depart v-model="bumen"/> |
||||||
|
{{ bumen }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="部门多选v-model" style="width: 300px"> |
||||||
|
<j-select-depart v-model="bumens" :multi="true"/> |
||||||
|
{{ bumens }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
</a-form > |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart' |
||||||
|
export default { |
||||||
|
components: {JSelectDepart}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: this.$form.createForm(this), |
||||||
|
bumen:"", |
||||||
|
bumens:"" |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
getFormFieldValue(field){ |
||||||
|
return this.form.getFieldValue(field) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
# JSelectMultiUser 用户多选组件 |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-form-item label="用户选择v-decorator" style="width: 500px"> |
||||||
|
<j-select-multi-user v-decorator="['users']"/> |
||||||
|
{{ getFormFieldValue('users') }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="用户选择v-model" style="width: 500px"> |
||||||
|
<j-select-multi-user v-model="users" ></j-select-multi-user> |
||||||
|
{{ users }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
</a-form > |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser' |
||||||
|
export default { |
||||||
|
components: {JSelectMultiUser}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: this.$form.createForm(this), |
||||||
|
users:"", |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
getFormFieldValue(field){ |
||||||
|
return this.form.getFieldValue(field) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
|
# JSelectUserByDep 根据部门选择用户 |
||||||
|
|
||||||
|
## 参数配置 |
||||||
|
| 参数 | 类型 | 必填 |说明| |
||||||
|
|--------------|---------|----|---------| |
||||||
|
| modalWidth |Number | | 弹框宽度 默认1250 | |
||||||
|
| disabled |Boolean | | 是否禁用 | |
||||||
|
|
||||||
|
使用示例 |
||||||
|
---- |
||||||
|
```vue |
||||||
|
<template> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-form-item label="用户选择v-decorator" style="width: 500px"> |
||||||
|
<j-select-user-by-dep v-decorator="['users']"/> |
||||||
|
{{ getFormFieldValue('users') }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="用户选择v-model" style="width: 500px"> |
||||||
|
<j-select-user-by-dep v-model="users" ></j-select-user-by-dep> |
||||||
|
{{ users }} |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
</a-form > |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep' |
||||||
|
export default { |
||||||
|
components: {JSelectUserByDep}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: this.$form.createForm(this), |
||||||
|
users:"", |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
getFormFieldValue(field){ |
||||||
|
return this.form.getFieldValue(field) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
@ -0,0 +1,248 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:title="title" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
> |
||||||
|
<a-row :gutter="10" style="padding: 10px; margin: -10px"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="onSearch"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="8"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="批号"> |
||||||
|
<a-input placeholder="请输入批号" v-model="queryParam.name"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="onSearch">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
:scroll="scrollTrigger" |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
||||||
|
:loading="loading" |
||||||
|
:customRow="rowAction"> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import {getBatchNumberList} from '@/api/api' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectBatchModal', |
||||||
|
mixins:[JeecgListMixin], |
||||||
|
components: {}, |
||||||
|
props: ['modalWidth', 'rows', 'multi', 'barCode'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
queryParam: { |
||||||
|
name: "", |
||||||
|
depotId: '', |
||||||
|
barCode: '' |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 5 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
categoryTree:[], |
||||||
|
columns: [ |
||||||
|
{dataIndex: 'batchNumber', title: '批号', width: 100, align: 'left'}, |
||||||
|
{dataIndex: 'barCode', title: '物料编码', width: 100}, |
||||||
|
{dataIndex: 'name', title: '名称', width: 100}, |
||||||
|
{dataIndex: 'standard', title: '规格', width: 80}, |
||||||
|
{dataIndex: 'model', title: '型号', width: 80}, |
||||||
|
{dataIndex: 'expirationDateStr', title: '有效期至', width: 80}, |
||||||
|
{dataIndex: 'totalNum', title: '库存', width: 80} |
||||||
|
], |
||||||
|
scrollTrigger: {}, |
||||||
|
dataSource: [], |
||||||
|
selectedRowKeys: [], |
||||||
|
selectRows: [], |
||||||
|
selectIds: [], |
||||||
|
title: '选择批号', |
||||||
|
isorter: { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc' |
||||||
|
}, |
||||||
|
departTree: [], |
||||||
|
depotList: [], |
||||||
|
visible: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
loading: false, |
||||||
|
expandedKeys: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 计算属性的 getter |
||||||
|
getType: function () { |
||||||
|
return this.multi == true ? 'checkbox' : 'radio'; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
barCode: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
this.initBarCode() |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initBarCode() { |
||||||
|
if (this.barCode) { |
||||||
|
this.$emit('initComp', this.barCode) |
||||||
|
} else { |
||||||
|
// JSelectUserByDep组件bug issues/I16634 |
||||||
|
this.$emit('initComp', '') |
||||||
|
} |
||||||
|
}, |
||||||
|
async loadData(arg) { |
||||||
|
if(this.rows) { |
||||||
|
if(JSON.parse(this.rows).depotId && JSON.parse(this.rows).barCode ){ |
||||||
|
this.queryParam.depotId = JSON.parse(this.rows).depotId-0 |
||||||
|
this.queryParam.barCode = JSON.parse(this.rows).barCode |
||||||
|
} |
||||||
|
} |
||||||
|
if (arg === 1) { |
||||||
|
this.ipagination.current = 1; |
||||||
|
} |
||||||
|
this.loading = true |
||||||
|
let params = this.getQueryParams()//查询条件 |
||||||
|
await getBatchNumberList(params).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
this.dataSource = res.data.rows |
||||||
|
this.ipagination.total = res.data.total |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
showModal() { |
||||||
|
this.visible = true; |
||||||
|
this.loadData(); |
||||||
|
this.form.resetFields(); |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
let param = Object.assign({}, this.queryParam, this.isorter); |
||||||
|
return param; |
||||||
|
}, |
||||||
|
getQueryField() { |
||||||
|
let str = 'id,'; |
||||||
|
for (let a = 0; a < this.columns.length; a++) { |
||||||
|
str += ',' + this.columns[a].dataIndex; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}, |
||||||
|
searchReset(num) { |
||||||
|
let that = this; |
||||||
|
if (num !== 0) { |
||||||
|
if(this.rows) { |
||||||
|
this.queryParam.name='' |
||||||
|
if(JSON.parse(this.rows).depotId && JSON.parse(this.rows).barCode ){ |
||||||
|
this.queryParam.depotId = JSON.parse(this.rows).depotId-0 |
||||||
|
this.queryParam.barCode = JSON.parse(this.rows).barCode |
||||||
|
} |
||||||
|
} |
||||||
|
that.loadData(1); |
||||||
|
} |
||||||
|
that.selectedRowKeys = []; |
||||||
|
that.selectIds = []; |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.searchReset(0); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
let that = this; |
||||||
|
this.getSelectRows(); |
||||||
|
that.$emit('ok', that.selectRows, that.selectIds); |
||||||
|
that.searchReset(0) |
||||||
|
that.close(); |
||||||
|
}, |
||||||
|
//获取选择信息 |
||||||
|
getSelectRows(rowId) { |
||||||
|
let dataSource = this.dataSource; |
||||||
|
let ids = ""; |
||||||
|
this.selectRows = []; |
||||||
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||||
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
||||||
|
this.selectRows.push(dataSource[i]); |
||||||
|
ids = ids + "," + dataSource[i].batchNumber |
||||||
|
} |
||||||
|
} |
||||||
|
this.selectIds = ids.substring(1); |
||||||
|
}, |
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
onSearch() { |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
modalFormOk() { |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
rowAction(record, index) { |
||||||
|
return { |
||||||
|
on: { |
||||||
|
click: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
}, |
||||||
|
dblclick: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
this.handleSubmit() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.ant-table-tbody .ant-table-row td { |
||||||
|
padding-top: 10px; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#components-layout-demo-custom-trigger .trigger { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 64px; |
||||||
|
padding: 0 24px; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .3s; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,241 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
title="选择部门" |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="handleCancel" |
||||||
|
cancelText="关闭"> |
||||||
|
<a-spin tip="Loading..." :spinning="false"> |
||||||
|
<a-input-search style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @search="onSearch" /> |
||||||
|
<a-tree |
||||||
|
checkable |
||||||
|
:treeData="treeData" |
||||||
|
:checkStrictly="true" |
||||||
|
@check="onCheck" |
||||||
|
@select="onSelect" |
||||||
|
@expand="onExpand" |
||||||
|
:autoExpandParent="autoExpandParent" |
||||||
|
:expandedKeys="expandedKeys" |
||||||
|
:checkedKeys="checkedKeys"> |
||||||
|
|
||||||
|
<template slot="title" slot-scope="{title}"> |
||||||
|
<span v-if="title.indexOf(searchValue) > -1"> |
||||||
|
{{title.substr(0, title.indexOf(searchValue))}} |
||||||
|
<span style="color: #f50">{{searchValue}}</span> |
||||||
|
{{title.substr(title.indexOf(searchValue) + searchValue.length)}} |
||||||
|
</span> |
||||||
|
<span v-else>{{title}}</span> |
||||||
|
</template> |
||||||
|
</a-tree> |
||||||
|
|
||||||
|
</a-spin> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { queryDepartTreeList } from '@/api/api' |
||||||
|
export default { |
||||||
|
name: 'JSelectDepartModal', |
||||||
|
props:['modalWidth','multi','rootOpened','departId'], |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
visible:false, |
||||||
|
confirmLoading:false, |
||||||
|
treeData:[], |
||||||
|
autoExpandParent:true, |
||||||
|
expandedKeys:[], |
||||||
|
dataList:[], |
||||||
|
checkedKeys:[], |
||||||
|
checkedRows:[], |
||||||
|
searchValue:"" |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.loadDepart(); |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
departId(){ |
||||||
|
this.initDepartComponent() |
||||||
|
}, |
||||||
|
visible: { |
||||||
|
handler() { |
||||||
|
if (this.departId) { |
||||||
|
this.checkedKeys = this.departId.split(","); |
||||||
|
// console.log('this.departId', this.departId) |
||||||
|
} else { |
||||||
|
this.checkedKeys = []; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
show(){ |
||||||
|
this.visible=true |
||||||
|
this.checkedRows=[] |
||||||
|
this.checkedKeys=[] |
||||||
|
}, |
||||||
|
loadDepart(){ |
||||||
|
queryDepartTreeList().then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
let arr = [...res.result] |
||||||
|
this.reWriterWithSlot(arr) |
||||||
|
this.treeData = arr |
||||||
|
this.initDepartComponent() |
||||||
|
if(this.rootOpened){ |
||||||
|
this.initExpandedKeys(res.result) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
initDepartComponent(){ |
||||||
|
let names = '' |
||||||
|
if(this.departId){ |
||||||
|
let currDepartId = this.departId |
||||||
|
for(let item of this.dataList){ |
||||||
|
if(currDepartId.indexOf(item.key)>=0){ |
||||||
|
names+=","+item.title |
||||||
|
} |
||||||
|
} |
||||||
|
if(names){ |
||||||
|
names = names.substring(1) |
||||||
|
} |
||||||
|
} |
||||||
|
this.$emit("initComp",names) |
||||||
|
}, |
||||||
|
reWriterWithSlot(arr){ |
||||||
|
for(let item of arr){ |
||||||
|
if(item.children && item.children.length>0){ |
||||||
|
this.reWriterWithSlot(item.children) |
||||||
|
let temp = Object.assign({},item) |
||||||
|
temp.children = {} |
||||||
|
this.dataList.push(temp) |
||||||
|
}else{ |
||||||
|
this.dataList.push(item) |
||||||
|
item.scopedSlots={ title: 'title' } |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
initExpandedKeys(arr){ |
||||||
|
if(arr && arr.length>0){ |
||||||
|
let keys = [] |
||||||
|
for(let item of arr){ |
||||||
|
if(item.children && item.children.length>0){ |
||||||
|
keys.push(item.id) |
||||||
|
} |
||||||
|
} |
||||||
|
this.expandedKeys=[...keys] |
||||||
|
}else{ |
||||||
|
this.expandedKeys=[] |
||||||
|
} |
||||||
|
}, |
||||||
|
onCheck (checkedKeys,info) { |
||||||
|
if(!this.multi){ |
||||||
|
let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0) |
||||||
|
this.checkedKeys = [...arr] |
||||||
|
this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef] |
||||||
|
}else{ |
||||||
|
this.checkedKeys = checkedKeys.checked |
||||||
|
this.checkedRows = this.getCheckedRows(this.checkedKeys) |
||||||
|
} |
||||||
|
}, |
||||||
|
onSelect(selectedKeys,info) { |
||||||
|
let keys = [] |
||||||
|
keys.push(selectedKeys[0]) |
||||||
|
if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){ |
||||||
|
this.checkedKeys = [...keys] |
||||||
|
this.checkedRows=[info.node.dataRef] |
||||||
|
}else{ |
||||||
|
let currKey = info.node.dataRef.key |
||||||
|
if(this.checkedKeys.indexOf(currKey)>=0){ |
||||||
|
this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey) |
||||||
|
}else{ |
||||||
|
this.checkedKeys.push(...keys) |
||||||
|
} |
||||||
|
} |
||||||
|
this.checkedRows = this.getCheckedRows(this.checkedKeys) |
||||||
|
}, |
||||||
|
onExpand (expandedKeys) { |
||||||
|
this.expandedKeys = expandedKeys |
||||||
|
this.autoExpandParent = false |
||||||
|
}, |
||||||
|
handleSubmit(){ |
||||||
|
if(!this.checkedKeys || this.checkedKeys.length==0){ |
||||||
|
this.$emit("ok",'') |
||||||
|
}else{ |
||||||
|
this.$emit("ok",this.checkedRows,this.checkedKeys.join(",")) |
||||||
|
} |
||||||
|
this.handleClear() |
||||||
|
}, |
||||||
|
handleCancel(){ |
||||||
|
this.handleClear() |
||||||
|
}, |
||||||
|
handleClear(){ |
||||||
|
this.visible=false |
||||||
|
this.checkedKeys=[] |
||||||
|
}, |
||||||
|
getParentKey(currKey,treeData){ |
||||||
|
let parentKey |
||||||
|
for (let i = 0; i < treeData.length; i++) { |
||||||
|
const node = treeData[i] |
||||||
|
if (node.children) { |
||||||
|
if (node.children.some(item => item.key === currKey)) { |
||||||
|
parentKey = node.key |
||||||
|
} else if (this.getParentKey(currKey, node.children)) { |
||||||
|
parentKey = this.getParentKey(currKey, node.children) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return parentKey |
||||||
|
}, |
||||||
|
onSearch(value){ |
||||||
|
const expandedKeys = this.dataList.map((item) => { |
||||||
|
if (item.title.indexOf(value) > -1) { |
||||||
|
return this.getParentKey(item.key,this.treeData) |
||||||
|
} |
||||||
|
return null |
||||||
|
}).filter((item, i, self) => item && self.indexOf(item) === i) |
||||||
|
|
||||||
|
Object.assign(this, { |
||||||
|
expandedKeys, |
||||||
|
searchValue: value, |
||||||
|
autoExpandParent: true, |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
// 根据 checkedKeys 获取 rows |
||||||
|
getCheckedRows(checkedKeys) { |
||||||
|
const forChildren = (list, key) => { |
||||||
|
for (let item of list) { |
||||||
|
if (item.id === key) { |
||||||
|
return item |
||||||
|
} |
||||||
|
if (item.children instanceof Array) { |
||||||
|
let value = forChildren(item.children, key) |
||||||
|
if (value != null) { |
||||||
|
return value |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
let rows = [] |
||||||
|
for (let key of checkedKeys) { |
||||||
|
let row = forChildren(this.treeData, key) |
||||||
|
if (row != null) { |
||||||
|
rows.push(row) |
||||||
|
} |
||||||
|
} |
||||||
|
return rows |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,370 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:title="title" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
> |
||||||
|
<a-row :gutter="10" style="padding: 10px; margin: -10px"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="onSearch"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="8"> |
||||||
|
<a-form-item label="商品" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}"> |
||||||
|
<a-input ref="material" placeholder="物料编码、名称、规格、型号" v-model="queryParam.q"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="8"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类别"> |
||||||
|
<a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear |
||||||
|
:treeData="categoryTree" v-model="queryParam.categoryId" placeholder="请选择类别"> |
||||||
|
</a-tree-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="8"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="仓库"> |
||||||
|
<a-select placeholder="选择仓库" v-model="queryParam.depotId" @change="onDepotChange" |
||||||
|
:dropdownMatchSelectWidth="false" showSearch optionFilterProp="children" allow-clear> |
||||||
|
<a-select-option v-for="(item,index) in depotList" :key="index" :value="item.id"> |
||||||
|
{{ item.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="loadData(1)">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
:scroll="scrollTrigger" |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
||||||
|
:loading="loading" |
||||||
|
:customRow="rowAction" |
||||||
|
@change="handleTableChange"> |
||||||
|
<template slot="customRenderEnableSerialNumber" slot-scope="enableSerialNumber"> |
||||||
|
<a-tag v-if="enableSerialNumber==1" color="green">有</a-tag> |
||||||
|
<a-tag v-if="enableSerialNumber==0" color="orange">无</a-tag> |
||||||
|
</template> |
||||||
|
<template slot="customRenderEnableBatchNumber" slot-scope="enableBatchNumber"> |
||||||
|
<a-tag v-if="enableBatchNumber==1" color="green">有</a-tag> |
||||||
|
<a-tag v-if="enableBatchNumber==0" color="orange">无</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { httpAction, getAction } from '@/api/manage' |
||||||
|
import {filterObj, getMpListShort} from '@/utils/util' |
||||||
|
import {getMaterialBySelect, queryMaterialCategoryTreeList} from '@/api/api' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectMaterialModal', |
||||||
|
mixins:[JeecgListMixin], |
||||||
|
components: {}, |
||||||
|
props: ['modalWidth', 'rows', 'multi', 'barCode'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
queryParam: { |
||||||
|
q: '', |
||||||
|
depotId: '' |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 5 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
categoryTree:[], |
||||||
|
columns: [ |
||||||
|
{dataIndex: 'mBarCode', title: '物料编码', width: 100, align: 'left'}, |
||||||
|
{dataIndex: 'name', title: '名称', width: 120, ellipsis:true}, |
||||||
|
{dataIndex: 'categoryName', title: '类别', width: 80}, |
||||||
|
{dataIndex: 'standard', title: '规格', width: 80}, |
||||||
|
{dataIndex: 'model', title: '型号', width: 80}, |
||||||
|
{dataIndex: 'color', title: '颜色', width: 80}, |
||||||
|
{dataIndex: 'unit', title: '单位', width: 70, ellipsis:true}, |
||||||
|
{dataIndex: 'sku', title: '多属性', width: 80}, |
||||||
|
{dataIndex: 'stock', title: '库存', width: 60}, |
||||||
|
{dataIndex: 'expand', title: '扩展信息', width: 80, ellipsis:true}, |
||||||
|
{dataIndex: 'enableSerialNumber', title: '序列号', width: 60, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderEnableSerialNumber' } |
||||||
|
}, |
||||||
|
{dataIndex: 'enableBatchNumber', title: '批号', width: 50, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderEnableBatchNumber' } |
||||||
|
} |
||||||
|
], |
||||||
|
scrollTrigger: {}, |
||||||
|
dataSource: [], |
||||||
|
selectedRowKeys: [], |
||||||
|
selectMaterialRows: [], |
||||||
|
selectMaterialIds: [], |
||||||
|
title: '选择商品', |
||||||
|
ipagination: { |
||||||
|
current: 1, |
||||||
|
pageSize: 2, |
||||||
|
pageSizeOptions: ['10', '20', '30'], |
||||||
|
showTotal: (total, range) => { |
||||||
|
return range[0] + '-' + range[1] + ' 共' + total + '条' |
||||||
|
}, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
isorter: { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc' |
||||||
|
}, |
||||||
|
departTree: [], |
||||||
|
depotList: [], |
||||||
|
visible: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
loading: false, |
||||||
|
expandedKeys: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 计算属性的 getter |
||||||
|
getType: function () { |
||||||
|
return this.multi == true ? 'checkbox' : 'radio'; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
barCode: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
this.initBarCode() |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 该方法触发屏幕自适应 |
||||||
|
this.resetScreenSize() |
||||||
|
// this.loadTreeData() |
||||||
|
// this.getDepotList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initBarCode() { |
||||||
|
if (this.barCode) { |
||||||
|
this.$emit('initComp', this.barCode) |
||||||
|
} else { |
||||||
|
// JSelectUserByDep组件bug issues/I16634 |
||||||
|
this.$emit('initComp', '') |
||||||
|
} |
||||||
|
}, |
||||||
|
async loadData(arg) { |
||||||
|
if (arg === 1) { |
||||||
|
this.ipagination.current = 1; |
||||||
|
} |
||||||
|
this.loading = true |
||||||
|
let params = this.getQueryParams()//查询条件 |
||||||
|
if(this.visible) { |
||||||
|
await getMaterialBySelect(params).then((res) => { |
||||||
|
if (res) { |
||||||
|
this.dataSource = res.rows |
||||||
|
this.ipagination.total = res.total |
||||||
|
if(res.total ===1) { |
||||||
|
this.title = '选择商品【再次回车可以直接选中】' |
||||||
|
this.$nextTick(() =>{ |
||||||
|
this.$refs.material.focus() |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.title = '选择商品' |
||||||
|
} |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
loadTreeData(){ |
||||||
|
let that = this; |
||||||
|
let params = {}; |
||||||
|
params.id=''; |
||||||
|
queryMaterialCategoryTreeList(params).then((res)=>{ |
||||||
|
if(res){ |
||||||
|
that.categoryTree = []; |
||||||
|
for (let i = 0; i < res.length; i++) { |
||||||
|
let temp = res[i]; |
||||||
|
that.categoryTree.push(temp); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 触发屏幕自适应 |
||||||
|
resetScreenSize() { |
||||||
|
let screenWidth = document.body.clientWidth; |
||||||
|
if (screenWidth < 500) { |
||||||
|
this.scrollTrigger = {x: 800}; |
||||||
|
} else { |
||||||
|
this.scrollTrigger = {}; |
||||||
|
} |
||||||
|
}, |
||||||
|
showModal(barCode) { |
||||||
|
this.visible = true; |
||||||
|
this.title = '选择商品' |
||||||
|
this.queryParam.q = barCode |
||||||
|
this.$nextTick(() => this.$refs.material.focus()); |
||||||
|
this.initDepotSelect() |
||||||
|
this.loadData(); |
||||||
|
this.loadTreeData() |
||||||
|
this.getDepotList() |
||||||
|
this.form.resetFields(); |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
let param = Object.assign({}, this.queryParam, this.isorter); |
||||||
|
param.mpList = getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
param.page = this.ipagination.current; |
||||||
|
param.rows = this.ipagination.pageSize; |
||||||
|
return filterObj(param); |
||||||
|
}, |
||||||
|
getQueryField() { |
||||||
|
let str = 'id,'; |
||||||
|
for (let a = 0; a < this.columns.length; a++) { |
||||||
|
str += ',' + this.columns[a].dataIndex; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}, |
||||||
|
searchReset(num) { |
||||||
|
let that = this; |
||||||
|
if (num !== 0) { |
||||||
|
that.queryParam = {}; |
||||||
|
that.loadData(1); |
||||||
|
} |
||||||
|
that.selectedRowKeys = []; |
||||||
|
that.selectMaterialIds = []; |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.searchReset(0); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleTableChange(pagination, filters, sorter) { |
||||||
|
if (Object.keys(sorter).length > 0) { |
||||||
|
this.isorter.column = sorter.field; |
||||||
|
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'; |
||||||
|
} |
||||||
|
this.ipagination = pagination; |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
let that = this; |
||||||
|
this.getSelectMaterialRows(); |
||||||
|
that.$emit('ok', that.selectMaterialRows, that.selectMaterialIds); |
||||||
|
that.searchReset(0) |
||||||
|
that.close(); |
||||||
|
}, |
||||||
|
//获取选择信息 |
||||||
|
getSelectMaterialRows(rowId) { |
||||||
|
let dataSource = this.dataSource; |
||||||
|
let materialIds = ""; |
||||||
|
this.selectMaterialRows = []; |
||||||
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||||
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
||||||
|
this.selectMaterialRows.push(dataSource[i]); |
||||||
|
materialIds = materialIds + "," + dataSource[i].mBarCode |
||||||
|
} |
||||||
|
} |
||||||
|
this.selectMaterialIds = materialIds.substring(1); |
||||||
|
}, |
||||||
|
getDepotList() { |
||||||
|
let that = this; |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res) => { |
||||||
|
if(res.code === 200){ |
||||||
|
that.depotList = res.data |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
initDepotSelect() { |
||||||
|
if(this.rows) { |
||||||
|
if(JSON.parse(this.rows).depotId){ |
||||||
|
this.queryParam.depotId = JSON.parse(this.rows).depotId-0 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onDepotChange(value) { |
||||||
|
this.queryParam.depotId = value |
||||||
|
}, |
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
onSearch() { |
||||||
|
if(this.dataSource && this.dataSource.length===1) { |
||||||
|
if(this.queryParam.q === this.dataSource[0].mBarCode|| |
||||||
|
this.queryParam.q === this.dataSource[0].name|| |
||||||
|
this.queryParam.q === this.dataSource[0].standard|| |
||||||
|
this.queryParam.q === this.dataSource[0].model) { |
||||||
|
let arr = [] |
||||||
|
arr.push(this.dataSource[0].id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
this.handleSubmit() |
||||||
|
} else { |
||||||
|
this.loadData(1) |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.loadData(1) |
||||||
|
} |
||||||
|
}, |
||||||
|
modalFormOk() { |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
rowAction(record, index) { |
||||||
|
return { |
||||||
|
on: { |
||||||
|
click: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
}, |
||||||
|
dblclick: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
this.handleSubmit() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.ant-table-tbody .ant-table-row td { |
||||||
|
padding-top: 10px; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#components-layout-demo-custom-trigger .trigger { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 64px; |
||||||
|
padding: 0 24px; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .3s; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,262 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:title="title" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭" |
||||||
|
style="margin-top: -70px" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
> |
||||||
|
<a-row :gutter="10" style="padding: 10px; margin: -10px"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="onSearch"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="12" :sm="12"> |
||||||
|
<a-form-item label="商品信息" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}"> |
||||||
|
<a-input placeholder="请输入条码、名称、规格、型号" v-model="queryParam.q"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="12" :sm="12"> |
||||||
|
<a-button type="primary" @click="onSearch">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
:scroll="scrollTrigger" |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
||||||
|
:loading="loading" |
||||||
|
:customRow="rowAction" |
||||||
|
@change="handleTableChange"> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {filterObj} from '@/utils/util' |
||||||
|
import {getSerialMaterialBySelect} from '@/api/api' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectSerialMaterialModal', |
||||||
|
mixins:[JeecgListMixin], |
||||||
|
components: {}, |
||||||
|
props: ['modalWidth', 'multi', 'barCode'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
queryParam: { |
||||||
|
q: '' |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 5 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
columns: [ |
||||||
|
{dataIndex: 'mBarCode', title: '物料编码', width: 100, align: 'left'}, |
||||||
|
{dataIndex: 'name', title: '名称', width: 100}, |
||||||
|
{dataIndex: 'standard', title: '规格', width: 80}, |
||||||
|
{dataIndex: 'model', title: '型号', width: 80} |
||||||
|
], |
||||||
|
scrollTrigger: {}, |
||||||
|
dataSource: [], |
||||||
|
selectedRowKeys: [], |
||||||
|
selectMaterialRows: [], |
||||||
|
selectMaterialIds: [], |
||||||
|
title: '选择序列号商品', |
||||||
|
ipagination: { |
||||||
|
current: 1, |
||||||
|
pageSize: 5, |
||||||
|
pageSizeOptions: ['5', '10', '20', '30'], |
||||||
|
showTotal: (total, range) => { |
||||||
|
return range[0] + '-' + range[1] + ' 共' + total + '条' |
||||||
|
}, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
isorter: { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc' |
||||||
|
}, |
||||||
|
visible: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
loading: false, |
||||||
|
expandedKeys: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 计算属性的 getter |
||||||
|
getType: function () { |
||||||
|
return this.multi == true ? 'checkbox' : 'radio'; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
barCode: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
this.initBarCode() |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 该方法触发屏幕自适应 |
||||||
|
this.resetScreenSize() |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initBarCode() { |
||||||
|
if (this.barCode) { |
||||||
|
this.$emit('initComp', this.barCode) |
||||||
|
} else { |
||||||
|
// JSelectUserByDep组件bug issues/I16634 |
||||||
|
this.$emit('initComp', '') |
||||||
|
} |
||||||
|
}, |
||||||
|
async loadData(arg) { |
||||||
|
if (arg === 1) { |
||||||
|
this.ipagination.current = 1; |
||||||
|
} |
||||||
|
this.loading = true |
||||||
|
let params = this.getQueryParams()//查询条件 |
||||||
|
await getSerialMaterialBySelect(params).then((res) => { |
||||||
|
if (res) { |
||||||
|
this.dataSource = res.rows |
||||||
|
this.ipagination.total = res.total |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 触发屏幕自适应 |
||||||
|
resetScreenSize() { |
||||||
|
let screenWidth = document.body.clientWidth; |
||||||
|
if (screenWidth < 500) { |
||||||
|
this.scrollTrigger = {x: 800}; |
||||||
|
} else { |
||||||
|
this.scrollTrigger = {}; |
||||||
|
} |
||||||
|
}, |
||||||
|
showModal() { |
||||||
|
this.visible = true; |
||||||
|
this.loadData(); |
||||||
|
this.form.resetFields(); |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
let param = Object.assign({}, this.queryParam, this.isorter); |
||||||
|
param.page = this.ipagination.current; |
||||||
|
param.rows = this.ipagination.pageSize; |
||||||
|
return filterObj(param); |
||||||
|
}, |
||||||
|
getQueryField() { |
||||||
|
let str = 'id,'; |
||||||
|
for (let a = 0; a < this.columns.length; a++) { |
||||||
|
str += ',' + this.columns[a].dataIndex; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}, |
||||||
|
searchReset(num) { |
||||||
|
let that = this; |
||||||
|
if (num !== 0) { |
||||||
|
that.queryParam = {}; |
||||||
|
that.loadData(1); |
||||||
|
} |
||||||
|
that.selectedRowKeys = []; |
||||||
|
that.selectMaterialIds = []; |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.searchReset(0); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleTableChange(pagination, filters, sorter) { |
||||||
|
if (Object.keys(sorter).length > 0) { |
||||||
|
this.isorter.column = sorter.field; |
||||||
|
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'; |
||||||
|
} |
||||||
|
this.ipagination = pagination; |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
let that = this; |
||||||
|
this.getSelectMaterialRows(); |
||||||
|
that.$emit('ok', that.selectMaterialRows, that.selectMaterialIds); |
||||||
|
that.searchReset(0) |
||||||
|
that.close(); |
||||||
|
}, |
||||||
|
//获取选择信息 |
||||||
|
getSelectMaterialRows(rowId) { |
||||||
|
let dataSource = this.dataSource; |
||||||
|
let materialIds = ""; |
||||||
|
this.selectMaterialRows = []; |
||||||
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||||
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
||||||
|
this.selectMaterialRows.push(dataSource[i]); |
||||||
|
materialIds = materialIds + "," + dataSource[i].mBarCode |
||||||
|
} |
||||||
|
} |
||||||
|
this.selectMaterialIds = materialIds.substring(1); |
||||||
|
}, |
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
onSearch() { |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
modalFormOk() { |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
rowAction(record, index) { |
||||||
|
return { |
||||||
|
on: { |
||||||
|
click: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
}, |
||||||
|
dblclick: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
this.handleSubmit() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.ant-table-tbody .ant-table-row td { |
||||||
|
padding-top: 10px; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#components-layout-demo-custom-trigger .trigger { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 64px; |
||||||
|
padding: 0 24px; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .3s; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,265 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:title="title" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
> |
||||||
|
<a-row :gutter="10" style="padding: 10px; margin: -10px"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="onSearch"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="8"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号"> |
||||||
|
<a-input placeholder="请输入序列号" v-model="queryParam.name"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="onSearch">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
:scroll="scrollTrigger" |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
||||||
|
:loading="loading" |
||||||
|
:customRow="rowAction" |
||||||
|
@change="handleTableChange"> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import {getEnableSerialNumberList} from '@/api/api' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectSnModal', |
||||||
|
mixins:[JeecgListMixin], |
||||||
|
components: {}, |
||||||
|
props: ['modalWidth', 'rows', 'multi', 'barCode'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
queryParam: { |
||||||
|
name: "", |
||||||
|
depotId: '', |
||||||
|
barCode: '' |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 5 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
categoryTree:[], |
||||||
|
columns: [ |
||||||
|
{dataIndex: 'serialNumber', title: '序列号', width: 100, align: 'left'} |
||||||
|
], |
||||||
|
scrollTrigger: {}, |
||||||
|
dataSource: [], |
||||||
|
selectedRowKeys: [], |
||||||
|
selectRows: [], |
||||||
|
selectIds: [], |
||||||
|
title: '选择序列号', |
||||||
|
ipagination: { |
||||||
|
current: 1, |
||||||
|
pageSize: 10, |
||||||
|
pageSizeOptions: ['10', '20', '30', '100', '200'], |
||||||
|
showTotal: (total, range) => { |
||||||
|
return range[0] + '-' + range[1] + ' 共' + total + '条' |
||||||
|
}, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
isorter: { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc' |
||||||
|
}, |
||||||
|
departTree: [], |
||||||
|
depotList: [], |
||||||
|
visible: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
loading: false, |
||||||
|
expandedKeys: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 计算属性的 getter |
||||||
|
getType: function () { |
||||||
|
return this.multi == true ? 'checkbox' : 'radio'; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
barCode: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
this.initBarCode() |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initBarCode() { |
||||||
|
if (this.barCode) { |
||||||
|
this.$emit('initComp', this.barCode) |
||||||
|
} else { |
||||||
|
// JSelectUserByDep组件bug issues/I16634 |
||||||
|
this.$emit('initComp', '') |
||||||
|
} |
||||||
|
}, |
||||||
|
async loadData(arg) { |
||||||
|
if(this.rows) { |
||||||
|
if(JSON.parse(this.rows).depotId && JSON.parse(this.rows).barCode ){ |
||||||
|
this.queryParam.depotId = JSON.parse(this.rows).depotId-0 |
||||||
|
this.queryParam.barCode = JSON.parse(this.rows).barCode |
||||||
|
} |
||||||
|
} |
||||||
|
if (arg === 1) { |
||||||
|
this.ipagination.current = 1; |
||||||
|
} |
||||||
|
this.loading = true |
||||||
|
let params = this.getQueryParams()//查询条件 |
||||||
|
await getEnableSerialNumberList(params).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
this.dataSource = res.data.rows |
||||||
|
this.ipagination.total = res.data.total |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
showModal() { |
||||||
|
this.visible = true; |
||||||
|
this.loadData(); |
||||||
|
this.form.resetFields(); |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
let param = Object.assign({}, this.queryParam, this.isorter); |
||||||
|
param.page = this.ipagination.current; |
||||||
|
param.rows = this.ipagination.pageSize; |
||||||
|
return param; |
||||||
|
}, |
||||||
|
getQueryField() { |
||||||
|
let str = 'id,'; |
||||||
|
for (let a = 0; a < this.columns.length; a++) { |
||||||
|
str += ',' + this.columns[a].dataIndex; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}, |
||||||
|
searchReset(num) { |
||||||
|
let that = this; |
||||||
|
if (num !== 0) { |
||||||
|
if(this.rows) { |
||||||
|
this.queryParam.name='' |
||||||
|
if(JSON.parse(this.rows).depotId && JSON.parse(this.rows).barCode ){ |
||||||
|
this.queryParam.depotId = JSON.parse(this.rows).depotId-0 |
||||||
|
this.queryParam.barCode = JSON.parse(this.rows).barCode |
||||||
|
} |
||||||
|
} |
||||||
|
that.loadData(1); |
||||||
|
} |
||||||
|
that.selectedRowKeys = []; |
||||||
|
that.selectIds = []; |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.searchReset(0); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleTableChange(pagination, filters, sorter) { |
||||||
|
if (Object.keys(sorter).length > 0) { |
||||||
|
this.isorter.column = sorter.field; |
||||||
|
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'; |
||||||
|
} |
||||||
|
this.ipagination = pagination; |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
let that = this; |
||||||
|
this.getSelectRows(); |
||||||
|
that.$emit('ok', that.selectRows, that.selectIds); |
||||||
|
that.searchReset(0) |
||||||
|
that.close(); |
||||||
|
}, |
||||||
|
//获取选择信息 |
||||||
|
getSelectRows(rowId) { |
||||||
|
let dataSource = this.dataSource; |
||||||
|
let ids = ""; |
||||||
|
this.selectRows = []; |
||||||
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||||
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
||||||
|
this.selectRows.push(dataSource[i]); |
||||||
|
ids = ids + "," + dataSource[i].serialNumber |
||||||
|
} |
||||||
|
} |
||||||
|
this.selectIds = ids.substring(1); |
||||||
|
}, |
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
onSearch() { |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
modalFormOk() { |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
rowAction(record, index) { |
||||||
|
return { |
||||||
|
on: { |
||||||
|
click: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
}, |
||||||
|
dblclick: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
this.handleSubmit() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.ant-table-tbody .ant-table-row td { |
||||||
|
padding-top: 10px; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#components-layout-demo-custom-trigger .trigger { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 64px; |
||||||
|
padding: 0 24px; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .3s; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,329 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:width="modalWidth" |
||||||
|
:visible="visible" |
||||||
|
:title="title" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="close" |
||||||
|
cancelText="关闭" |
||||||
|
style="margin-top: -70px" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
> |
||||||
|
<a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-card :bordered="false"> |
||||||
|
<!--组织机构--> |
||||||
|
<a-directory-tree |
||||||
|
selectable |
||||||
|
:selectedKeys="selectedDepIds" |
||||||
|
:checkStrictly="true" |
||||||
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}" |
||||||
|
:treeData="departTree" |
||||||
|
:expandAction="false" |
||||||
|
:expandedKeys.sync="expandedKeys" |
||||||
|
@select="onDepSelect" |
||||||
|
/> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
<a-col :md="18" :sm="24"> |
||||||
|
<a-card :bordered="false"> |
||||||
|
用户账号: |
||||||
|
<a-input-search |
||||||
|
:style="{width:'150px',marginBottom:'15px'}" |
||||||
|
placeholder="请输入账号" |
||||||
|
v-model="queryParam.username" |
||||||
|
@search="onSearch" |
||||||
|
></a-input-search> |
||||||
|
<a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button> |
||||||
|
<!--用户列表--> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
:scroll="scrollTrigger" |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
||||||
|
:loading="loading" |
||||||
|
@change="handleTableChange"> |
||||||
|
</a-table> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {filterObj} from '@/utils/util' |
||||||
|
import {queryDepartTreeList, getUserList, queryUserByDepId} from '@/api/api' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'JSelectUserByDepModal', |
||||||
|
components: {}, |
||||||
|
props: ['modalWidth', 'multi', 'userIds'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
queryParam: { |
||||||
|
username: "", |
||||||
|
}, |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
title: '用户账号', |
||||||
|
align: 'center', |
||||||
|
dataIndex: 'username' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '用户姓名', |
||||||
|
align: 'center', |
||||||
|
dataIndex: 'realname' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '性别', |
||||||
|
align: 'center', |
||||||
|
dataIndex: 'sex', |
||||||
|
customRender: function (text) { |
||||||
|
if (text === 1) { |
||||||
|
return '男' |
||||||
|
} else if (text === 2) { |
||||||
|
return '女' |
||||||
|
} else { |
||||||
|
return text |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '手机', |
||||||
|
align: 'center', |
||||||
|
dataIndex: 'phone' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '部门', |
||||||
|
align: 'center', |
||||||
|
dataIndex: 'orgCode' |
||||||
|
} |
||||||
|
], |
||||||
|
scrollTrigger: {}, |
||||||
|
dataSource: [], |
||||||
|
selectedRowKeys: [], |
||||||
|
selectUserRows: [], |
||||||
|
selectUserIds: [], |
||||||
|
title: '根据部门选择用户', |
||||||
|
ipagination: { |
||||||
|
current: 1, |
||||||
|
pageSize: 10, |
||||||
|
pageSizeOptions: ['10', '20', '30'], |
||||||
|
showTotal: (total, range) => { |
||||||
|
return range[0] + '-' + range[1] + ' 共' + total + '条' |
||||||
|
}, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
isorter: { |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc' |
||||||
|
}, |
||||||
|
selectedDepIds: [], |
||||||
|
departTree: [], |
||||||
|
visible: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
loading: false, |
||||||
|
expandedKeys: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 计算属性的 getter |
||||||
|
getType: function () { |
||||||
|
return this.multi == true ? 'checkbox' : 'radio'; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
userIds: { |
||||||
|
immediate: true, |
||||||
|
handler() { |
||||||
|
this.initUserNames() |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 该方法触发屏幕自适应 |
||||||
|
this.resetScreenSize(); |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initUserNames() { |
||||||
|
if (this.userIds) { |
||||||
|
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确 |
||||||
|
let values = this.userIds.split(',') + ',' |
||||||
|
getUserList({ |
||||||
|
username: values, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: values.length |
||||||
|
}).then((res) => { |
||||||
|
if (res.success) { |
||||||
|
let selectedRowKeys = [] |
||||||
|
let realNames = [] |
||||||
|
res.result.records.forEach(user => { |
||||||
|
realNames.push(user['realname']) |
||||||
|
selectedRowKeys.push(user['id']) |
||||||
|
}) |
||||||
|
this.selectedRowKeys = selectedRowKeys |
||||||
|
this.$emit('initComp', realNames.join(',')) |
||||||
|
} |
||||||
|
}) |
||||||
|
} else { |
||||||
|
// JSelectUserByDep组件bug issues/I16634 |
||||||
|
this.$emit('initComp', '') |
||||||
|
} |
||||||
|
}, |
||||||
|
async loadData(arg) { |
||||||
|
if (arg === 1) { |
||||||
|
this.ipagination.current = 1; |
||||||
|
} |
||||||
|
if (this.selectedDepIds && this.selectedDepIds.length > 0) { |
||||||
|
await this.initQueryUserByDepId(this.selectedDepIds) |
||||||
|
} else { |
||||||
|
this.loading = true |
||||||
|
let params = this.getQueryParams()//查询条件 |
||||||
|
await getUserList(params).then((res) => { |
||||||
|
if (res.success) { |
||||||
|
this.dataSource = res.result.records |
||||||
|
this.ipagination.total = res.result.total |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 触发屏幕自适应 |
||||||
|
resetScreenSize() { |
||||||
|
let screenWidth = document.body.clientWidth; |
||||||
|
if (screenWidth < 500) { |
||||||
|
this.scrollTrigger = {x: 800}; |
||||||
|
} else { |
||||||
|
this.scrollTrigger = {}; |
||||||
|
} |
||||||
|
}, |
||||||
|
showModal() { |
||||||
|
this.visible = true; |
||||||
|
this.queryDepartTree(); |
||||||
|
this.initUserNames() |
||||||
|
this.loadData(); |
||||||
|
this.form.resetFields(); |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
let param = Object.assign({}, this.queryParam, this.isorter); |
||||||
|
param.field = this.getQueryField(); |
||||||
|
param.pageNo = this.ipagination.current; |
||||||
|
param.pageSize = this.ipagination.pageSize; |
||||||
|
return filterObj(param); |
||||||
|
}, |
||||||
|
getQueryField() { |
||||||
|
let str = 'id,'; |
||||||
|
for (let a = 0; a < this.columns.length; a++) { |
||||||
|
str += ',' + this.columns[a].dataIndex; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}, |
||||||
|
searchReset(num) { |
||||||
|
let that = this; |
||||||
|
if (num !== 0) { |
||||||
|
that.queryParam = {}; |
||||||
|
that.loadData(1); |
||||||
|
} |
||||||
|
that.selectedRowKeys = []; |
||||||
|
that.selectUserIds = []; |
||||||
|
that.selectedDepIds = []; |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.searchReset(0); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleTableChange(pagination, filters, sorter) { |
||||||
|
//TODO 筛选 |
||||||
|
if (Object.keys(sorter).length > 0) { |
||||||
|
this.isorter.column = sorter.field; |
||||||
|
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'; |
||||||
|
} |
||||||
|
this.ipagination = pagination; |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
let that = this; |
||||||
|
this.getSelectUserRows(); |
||||||
|
that.$emit('ok', that.selectUserRows, that.selectUserIds); |
||||||
|
that.searchReset(0) |
||||||
|
that.close(); |
||||||
|
}, |
||||||
|
//获取选择用户信息 |
||||||
|
getSelectUserRows(rowId) { |
||||||
|
let dataSource = this.dataSource; |
||||||
|
let userIds = ""; |
||||||
|
this.selectUserRows = []; |
||||||
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||||
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
||||||
|
this.selectUserRows.push(dataSource[i]); |
||||||
|
userIds = userIds + "," + dataSource[i].username |
||||||
|
} |
||||||
|
} |
||||||
|
this.selectUserIds = userIds.substring(1); |
||||||
|
}, |
||||||
|
// 点击树节点,筛选出对应的用户 |
||||||
|
onDepSelect(selectedDepIds) { |
||||||
|
if (selectedDepIds[0] != null) { |
||||||
|
this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息 |
||||||
|
if (this.selectedDepIds[0] !== selectedDepIds[0]) { |
||||||
|
this.selectedDepIds = [selectedDepIds[0]]; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
onSearch() { |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
// 根据选择的id来查询用户信息 |
||||||
|
initQueryUserByDepId(selectedDepIds) { |
||||||
|
this.loading = true |
||||||
|
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => { |
||||||
|
if (res.success) { |
||||||
|
this.dataSource = res.result; |
||||||
|
this.ipagination.total = res.result.length; |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
queryDepartTree() { |
||||||
|
queryDepartTreeList().then((res) => { |
||||||
|
if (res.success) { |
||||||
|
this.departTree = res.result; |
||||||
|
// 默认展开父节点 |
||||||
|
this.expandedKeys = this.departTree.map(item => item.id) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
modalFormOk() { |
||||||
|
this.loadData(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.ant-table-tbody .ant-table-row td { |
||||||
|
padding-top: 10px; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#components-layout-demo-custom-trigger .trigger { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 64px; |
||||||
|
padding: 0 24px; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .3s; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,122 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
title="用户列表" |
||||||
|
:width="1000" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="handleCancel"> |
||||||
|
|
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
bordered |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"></a-table> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {getUserList} from '@/api/api' |
||||||
|
import {JeecgListMixin} from '@/mixins/JeecgListMixin' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "SelectUserListModal", |
||||||
|
mixins: [JeecgListMixin], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
title: "操作", |
||||||
|
visible: false, |
||||||
|
model: {}, |
||||||
|
confirmLoading: false, |
||||||
|
url: { |
||||||
|
add: "/act/model/create", |
||||||
|
list: "/sys/user/list" |
||||||
|
}, |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
title: '用户账号', |
||||||
|
align: "center", |
||||||
|
dataIndex: 'username', |
||||||
|
fixed: 'left', |
||||||
|
width: 200 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '用户姓名', |
||||||
|
align: "center", |
||||||
|
dataIndex: 'realname', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '性别', |
||||||
|
align: "center", |
||||||
|
dataIndex: 'sex_dictText' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '手机号码', |
||||||
|
align: "center", |
||||||
|
dataIndex: 'phone' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '邮箱', |
||||||
|
align: "center", |
||||||
|
dataIndex: 'email' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '状态', |
||||||
|
align: "center", |
||||||
|
dataIndex: 'status_dictText' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
//Step.2 加载用户数据 |
||||||
|
getUserList().then((res) => { |
||||||
|
if (res.success) { |
||||||
|
this.dataSource = res.result.records; |
||||||
|
this.ipagination.total = res.result.total; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
open() { |
||||||
|
this.visible = true; |
||||||
|
|
||||||
|
//Step.1 清空选中用户 |
||||||
|
this.selectedRowKeys = [] |
||||||
|
this.selectedRows = [] |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('close'); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleChange(info) { |
||||||
|
let file = info.file; |
||||||
|
if (file.response.success) { |
||||||
|
this.$message.success(file.response.message); |
||||||
|
this.$emit('ok'); |
||||||
|
this.close() |
||||||
|
} else { |
||||||
|
this.$message.warn(file.response.message); |
||||||
|
this.close() |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
handleCancel() { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
this.$emit('ok', this.selectionRows); |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,36 @@ |
|||||||
|
<template> |
||||||
|
<component |
||||||
|
:is="comp" |
||||||
|
:formData="formData" |
||||||
|
ref="compModel" |
||||||
|
v-if="comp"> |
||||||
|
</component> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'DynamicNotice', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
compName: this.path |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
comp: function () { |
||||||
|
if(!this.path){ |
||||||
|
return null; |
||||||
|
} |
||||||
|
return () => import(`@/views/${this.path}.vue`) |
||||||
|
} |
||||||
|
}, |
||||||
|
props: ['path','formData'], |
||||||
|
methods: { |
||||||
|
detail () { |
||||||
|
setTimeout(() => { |
||||||
|
if(this.path){ |
||||||
|
this.$refs.compModel.view(this.formData); |
||||||
|
} |
||||||
|
}, 200) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,139 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="modelStyle.width" |
||||||
|
:visible="visible" |
||||||
|
:bodyStyle ="bodyStyle" |
||||||
|
:switchFullscreen="switchFullscreen" |
||||||
|
@cancel="handleCancel" |
||||||
|
> |
||||||
|
<template slot="footer"> |
||||||
|
<a-button key="back" @click="handleCancel">关闭</a-button> |
||||||
|
<a-button v-if="record.openType==='url'" type="primary" @click="toHandle">去处理</a-button> |
||||||
|
</template> |
||||||
|
<a-card class="daily-article" :loading="loading"> |
||||||
|
<a-card-meta |
||||||
|
:title="record.titile" |
||||||
|
:description="'标题:'+record.msgTitle"> |
||||||
|
</a-card-meta> |
||||||
|
<a-divider /> |
||||||
|
<span v-html="record.msgContent" class="article-content"></span> |
||||||
|
</a-card> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "SysAnnouncementModal", |
||||||
|
components: { |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"通知消息", |
||||||
|
record: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 5 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
visible: false, |
||||||
|
switchFullscreen: true, |
||||||
|
loading: false, |
||||||
|
bodyStyle:{ |
||||||
|
padding: "0", |
||||||
|
height:(window.innerHeight*0.6)+"px", |
||||||
|
"overflow-y":"auto", |
||||||
|
|
||||||
|
}, |
||||||
|
modelStyle:{ |
||||||
|
width: '60%', |
||||||
|
style: { top: '20px' }, |
||||||
|
fullScreen: false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
detail (record) { |
||||||
|
this.visible = true; |
||||||
|
this.record = record; |
||||||
|
}, |
||||||
|
handleCancel () { |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
/** 切换全屏显示 */ |
||||||
|
handleClickToggleFullScreen() { |
||||||
|
let mode = !this.modelStyle.fullScreen |
||||||
|
if (mode) { |
||||||
|
this.modelStyle.width = '100%' |
||||||
|
this.modelStyle.style.top = '20px' |
||||||
|
} else { |
||||||
|
this.modelStyle.width = '60%' |
||||||
|
this.modelStyle.style.top = '50px' |
||||||
|
} |
||||||
|
this.modelStyle.fullScreen = mode |
||||||
|
}, |
||||||
|
toHandle(){ |
||||||
|
if(this.record.openType==='url'){ |
||||||
|
this.visible = false; |
||||||
|
//链接跳转 |
||||||
|
this.$router.push({path: this.record.openPage}) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.announcementCustomModal{ |
||||||
|
.ant-modal-header { |
||||||
|
border: none; |
||||||
|
display: inline-block; |
||||||
|
position: absolute; |
||||||
|
z-index: 1; |
||||||
|
right: 56px; |
||||||
|
padding: 0; |
||||||
|
.ant-modal-title{ |
||||||
|
.custom-btn{ |
||||||
|
width: 56px; |
||||||
|
height: 56px; |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.daily-article{ |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style scoped lang="less"> |
||||||
|
.daily-article { |
||||||
|
.article-button { |
||||||
|
font-size: 1.2rem !important; |
||||||
|
} |
||||||
|
.ant-card-body { |
||||||
|
padding: 18px !important; |
||||||
|
} |
||||||
|
.ant-card-head { |
||||||
|
padding: 0 1rem; |
||||||
|
} |
||||||
|
.ant-card-meta { |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
.article-content { |
||||||
|
p { |
||||||
|
word-wrap: break-word; |
||||||
|
word-break: break-all; |
||||||
|
text-overflow: initial; |
||||||
|
white-space: normal; |
||||||
|
font-size: .9rem !important; |
||||||
|
margin-bottom: .8rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,173 @@ |
|||||||
|
import JEditableTable from '@/components/jeecg/JEditableTable' |
||||||
|
import { VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil' |
||||||
|
import { httpAction, getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export const JEditableTableMixin = { |
||||||
|
components: { |
||||||
|
JEditableTable |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
title: '操作', |
||||||
|
visible: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
confirmLoading: false, |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 6 } |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 18 } |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
/** 获取所有的editableTable实例 */ |
||||||
|
getAllTable() { |
||||||
|
if (!(this.refKeys instanceof Array)) { |
||||||
|
throw this.throwNotArray('refKeys') |
||||||
|
} |
||||||
|
let values = this.refKeys.map(key => getRefPromise(this, key)) |
||||||
|
return Promise.all(values) |
||||||
|
}, |
||||||
|
|
||||||
|
/** 遍历所有的JEditableTable实例 */ |
||||||
|
eachAllTable(callback) { |
||||||
|
// 开始遍历
|
||||||
|
this.getAllTable().then(tables => { |
||||||
|
tables.forEach((item, index) => { |
||||||
|
if (typeof callback === 'function') { |
||||||
|
callback(item, index) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/** 当点击新增按钮时调用此方法 */ |
||||||
|
add() { |
||||||
|
// addBefore 没有地方用到
|
||||||
|
if (typeof this.addBefore === 'function') this.addBefore()
|
||||||
|
// 默认新增空数据
|
||||||
|
let rowNum = this.addDefaultRowNum |
||||||
|
if (typeof rowNum !== 'number') { |
||||||
|
rowNum = 1 |
||||||
|
console.warn('由于你没有在 data 中定义 addDefaultRowNum 或 addDefaultRowNum 不是数字,所以默认添加一条空数据,如果不想默认添加空数据,请将定义 addDefaultRowNum 为 0') |
||||||
|
} |
||||||
|
this.eachAllTable((item) => { |
||||||
|
item.add(rowNum) |
||||||
|
}) |
||||||
|
if (typeof this.addAfter === 'function') this.addAfter(this.model) |
||||||
|
this.edit({}) |
||||||
|
}, |
||||||
|
/** 当点击了编辑(修改)按钮时调用此方法 */ |
||||||
|
edit(record) { |
||||||
|
if (typeof this.editBefore === 'function') this.editBefore(record) |
||||||
|
this.visible = true |
||||||
|
this.activeKey = this.refKeys[0] |
||||||
|
this.form.resetFields() |
||||||
|
this.model = Object.assign({}, record) |
||||||
|
if (typeof this.editAfter === 'function') this.editAfter(this.model) |
||||||
|
}, |
||||||
|
/** 关闭弹窗,并将所有JEditableTable实例回归到初始状态 */ |
||||||
|
close() { |
||||||
|
this.visible = false |
||||||
|
this.eachAllTable((item) => { |
||||||
|
item.initialize() |
||||||
|
}) |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
|
||||||
|
/** 查询某个tab的数据 */ |
||||||
|
requestSubTableData(url, params, tab, success) { |
||||||
|
tab.loading = true |
||||||
|
getAction(url, params).then(res => { |
||||||
|
if(res && res.code === 200){ |
||||||
|
tab.dataSource = res.data.rows |
||||||
|
typeof success === 'function' ? success(res) : '' |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
tab.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** 发起请求,自动判断是执行新增还是修改操作 */ |
||||||
|
request(formData) { |
||||||
|
let url = this.url.add, method = 'post' |
||||||
|
if (this.model.id) { |
||||||
|
url = this.url.edit |
||||||
|
method = 'put' |
||||||
|
} |
||||||
|
this.confirmLoading = true |
||||||
|
httpAction(url, formData, method).then((res) => { |
||||||
|
if(res.code === 200){ |
||||||
|
this.$emit('ok') |
||||||
|
this.confirmLoading = false |
||||||
|
this.close() |
||||||
|
} else { |
||||||
|
this.$message.warning(res.msg); |
||||||
|
this.confirmLoading = false |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/* --- handle 事件 --- */ |
||||||
|
|
||||||
|
/** ATab 选项卡切换事件 */ |
||||||
|
handleChangeTabs(key) { |
||||||
|
// 自动重置scrollTop状态,防止出现白屏
|
||||||
|
getRefPromise(this, key).then(editableTable => { |
||||||
|
editableTable.resetScrollTop() |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** 关闭按钮点击事件 */ |
||||||
|
handleCancel() { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
/** 确定按钮点击事件 */ |
||||||
|
handleOk() { |
||||||
|
/** 触发表单验证 */ |
||||||
|
this.getAllTable().then(tables => { |
||||||
|
let inputValues = tables[0].inputValues
|
||||||
|
let ids = []
|
||||||
|
inputValues.forEach((item) => { |
||||||
|
if(!item.barCode && !item.operNumber) { |
||||||
|
ids.push(item.id) |
||||||
|
} |
||||||
|
}) |
||||||
|
tables[0].removeRows(ids) |
||||||
|
/** 一次性验证主表和所有的次表 */ |
||||||
|
return validateFormAndTables(this.form, tables) |
||||||
|
}).then(allValues => { |
||||||
|
if (typeof this.classifyIntoFormData !== 'function') { |
||||||
|
throw this.throwNotFunction('classifyIntoFormData') |
||||||
|
} |
||||||
|
let formData = this.classifyIntoFormData(allValues) |
||||||
|
// 发起请求
|
||||||
|
return this.request(formData) |
||||||
|
}).catch(e => { |
||||||
|
if (e.error === VALIDATE_NO_PASSED) { |
||||||
|
// 如果有未通过表单验证的子表,就自动跳转到它所在的tab
|
||||||
|
this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index] |
||||||
|
} else { |
||||||
|
console.error(e) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/* --- throw --- */ |
||||||
|
|
||||||
|
/** not a function */ |
||||||
|
throwNotFunction(name) { |
||||||
|
return `${name} 未定义或不是一个函数` |
||||||
|
}, |
||||||
|
|
||||||
|
/** not a array */ |
||||||
|
throwNotArray(name) { |
||||||
|
return `${name} 未定义或不是一个数组` |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
@ -0,0 +1,438 @@ |
|||||||
|
/** |
||||||
|
* 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm |
||||||
|
* 高级查询按钮调用 superQuery方法 高级查询组件ref定义为superQueryModal |
||||||
|
* data中url定义 list为查询列表 delete为删除单条记录 deleteBatch为批量删除 |
||||||
|
*/ |
||||||
|
import { filterObj } from '@/utils/util'; |
||||||
|
import { deleteAction, getAction, postAction, downFile, getFileAccessHttpUrl } from '@/api/manage' |
||||||
|
import Vue from 'vue' |
||||||
|
import {mixinDevice} from '@/utils/mixin.js' |
||||||
|
|
||||||
|
export const JeecgListMixin = { |
||||||
|
mixins: [mixinDevice], |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
//token header
|
||||||
|
tokenHeader: {'X-Access-Token': ""}, |
||||||
|
/*卡片样式 */ |
||||||
|
cardStyle: '', |
||||||
|
/* 查询条件-请不要在queryParam中声明非字符串值的属性 */ |
||||||
|
queryParam: {}, |
||||||
|
/* 数据源 */ |
||||||
|
dataSource:[], |
||||||
|
/* 分页参数 */ |
||||||
|
ipagination:{ |
||||||
|
current: 1, |
||||||
|
pageSize: 10, |
||||||
|
pageSizeOptions: ['10', '20', '30', '50', '100'], |
||||||
|
showTotal: (total, range) => { |
||||||
|
return range[0] + "-" + range[1] + " 共" + total + "条" |
||||||
|
}, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
/* 控制table高度 */ |
||||||
|
scroll: { |
||||||
|
x:1300 |
||||||
|
}, |
||||||
|
/* 排序参数 */ |
||||||
|
isorter:{ |
||||||
|
column: 'createTime', |
||||||
|
order: 'desc', |
||||||
|
}, |
||||||
|
/* 筛选参数 */ |
||||||
|
filters: {}, |
||||||
|
/* table加载状态 */ |
||||||
|
loading:false, |
||||||
|
/* table选中keys*/ |
||||||
|
selectedRowKeys: [], |
||||||
|
/* table选中records*/ |
||||||
|
selectionRows: [], |
||||||
|
/* 查询折叠 */ |
||||||
|
toggleSearchStatus:false, |
||||||
|
/* 高级查询条件生效状态 */ |
||||||
|
superQueryFlag:false, |
||||||
|
/* 高级查询条件 */ |
||||||
|
superQueryParams: '', |
||||||
|
/** 高级查询拼接方式 */ |
||||||
|
superQueryMatchType: 'and', |
||||||
|
/** 是否加载时就执行 */ |
||||||
|
disableMixinCreated: false, |
||||||
|
/* 按钮权限 */ |
||||||
|
btnEnableList: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
if(this.isDesktop()) { |
||||||
|
this.cardStyle = 'height:' + (document.documentElement.clientHeight-125) + 'px' |
||||||
|
} |
||||||
|
if(!this.disableMixinCreated){ |
||||||
|
//console.log(' -- mixin created -- ')
|
||||||
|
this.loadData(); |
||||||
|
//初始化字典配置 在自己页面定义
|
||||||
|
this.initDictConfig(); |
||||||
|
//初始化按钮权限
|
||||||
|
this.initActiveBtnStr(); |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.initScroll() |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
loadData(arg) { |
||||||
|
if(!this.url.list){ |
||||||
|
this.$message.error("请设置url.list属性!") |
||||||
|
return |
||||||
|
} |
||||||
|
//加载数据 若传入参数1则加载第一页的内容
|
||||||
|
if (arg === 1) { |
||||||
|
this.ipagination.current = 1; |
||||||
|
} |
||||||
|
var params = this.getQueryParams();//查询条件
|
||||||
|
this.loading = true; |
||||||
|
getAction(this.url.list, params).then((res) => { |
||||||
|
if (res.code===200) { |
||||||
|
this.dataSource = res.data.rows; |
||||||
|
this.ipagination.total = Number(res.data.total); |
||||||
|
this.tableAddTotalRow(this.columns, this.dataSource) |
||||||
|
} |
||||||
|
if(res.code===510){ |
||||||
|
this.$message.warning(res.data) |
||||||
|
} |
||||||
|
this.loading = false; |
||||||
|
}) |
||||||
|
}, |
||||||
|
initDictConfig(){ |
||||||
|
//console.log("--这是一个假的方法!")
|
||||||
|
}, |
||||||
|
handleSuperQuery(params, matchType) { |
||||||
|
//高级查询方法
|
||||||
|
if(!params){ |
||||||
|
this.superQueryParams='' |
||||||
|
this.superQueryFlag = false |
||||||
|
}else{ |
||||||
|
this.superQueryFlag = true |
||||||
|
this.superQueryParams=JSON.stringify(params) |
||||||
|
this.superQueryMatchType = matchType |
||||||
|
} |
||||||
|
this.loadData(1) |
||||||
|
}, |
||||||
|
getQueryParams() { |
||||||
|
//获取查询条件
|
||||||
|
let sqp = {} |
||||||
|
if(this.superQueryParams){ |
||||||
|
sqp['superQueryParams']=encodeURI(this.superQueryParams) |
||||||
|
sqp['superQueryMatchType'] = this.superQueryMatchType |
||||||
|
} |
||||||
|
let searchObj = {} |
||||||
|
searchObj.search = JSON.stringify(this.queryParam); |
||||||
|
var param = Object.assign(sqp, searchObj, this.isorter ,this.filters); |
||||||
|
param.field = this.getQueryField(); |
||||||
|
param.currentPage = this.ipagination.current; |
||||||
|
param.pageSize = this.ipagination.pageSize; |
||||||
|
return filterObj(param); |
||||||
|
}, |
||||||
|
getQueryField() { |
||||||
|
var str = "id,"; |
||||||
|
this.columns.forEach(function (value) { |
||||||
|
str += "," + value.dataIndex; |
||||||
|
}); |
||||||
|
return str; |
||||||
|
}, |
||||||
|
|
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
onClearSelected() { |
||||||
|
this.selectedRowKeys = []; |
||||||
|
this.selectionRows = []; |
||||||
|
}, |
||||||
|
searchQuery() { |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
superQuery() { |
||||||
|
this.$refs.superQueryModal.show(); |
||||||
|
}, |
||||||
|
searchReset() { |
||||||
|
this.queryParam = {} |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
batchSetStatus: function (status) { |
||||||
|
if(!this.url.batchSetStatusUrl){ |
||||||
|
this.$message.error("请设置url.batchSetStatusUrl属性!") |
||||||
|
return |
||||||
|
} |
||||||
|
if (this.selectedRowKeys.length <= 0) { |
||||||
|
this.$message.warning('请选择一条记录!'); |
||||||
|
return; |
||||||
|
} else { |
||||||
|
var ids = ""; |
||||||
|
for (var a = 0; a < this.selectedRowKeys.length; a++) { |
||||||
|
ids += this.selectedRowKeys[a] + ","; |
||||||
|
} |
||||||
|
var that = this; |
||||||
|
this.$confirm({ |
||||||
|
title: "确认操作", |
||||||
|
content: "是否操作选中数据?", |
||||||
|
onOk: function () { |
||||||
|
that.loading = true; |
||||||
|
postAction(that.url.batchSetStatusUrl, {status: status, ids: ids}).then((res) => { |
||||||
|
if(res.code === 200){ |
||||||
|
that.loadData(); |
||||||
|
that.onClearSelected(); |
||||||
|
} else { |
||||||
|
that.$message.warning(res.msg); |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
that.loading = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
batchDel: function () { |
||||||
|
if(!this.url.deleteBatch){ |
||||||
|
this.$message.error("请设置url.deleteBatch属性!") |
||||||
|
return |
||||||
|
} |
||||||
|
if (this.selectedRowKeys.length <= 0) { |
||||||
|
this.$message.warning('请选择一条记录!'); |
||||||
|
return; |
||||||
|
} else { |
||||||
|
var ids = ""; |
||||||
|
for (var a = 0; a < this.selectedRowKeys.length; a++) { |
||||||
|
ids += this.selectedRowKeys[a] + ","; |
||||||
|
} |
||||||
|
var that = this; |
||||||
|
this.$confirm({ |
||||||
|
title: "确认删除", |
||||||
|
content: "是否删除选中数据?", |
||||||
|
onOk: function () { |
||||||
|
that.loading = true; |
||||||
|
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => { |
||||||
|
if(res.code === 200){ |
||||||
|
that.loadData(); |
||||||
|
that.onClearSelected(); |
||||||
|
} else { |
||||||
|
that.$message.warning(res.msg); |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
that.loading = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDelete: function (id) { |
||||||
|
if(!this.url.delete){ |
||||||
|
this.$message.error("请设置url.delete属性!") |
||||||
|
return |
||||||
|
} |
||||||
|
var that = this; |
||||||
|
deleteAction(that.url.delete, {id: id}).then((res) => { |
||||||
|
if(res.code === 200){ |
||||||
|
that.loadData(); |
||||||
|
} else { |
||||||
|
that.$message.warning(res.msg); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleEdit: function (record) { |
||||||
|
this.$refs.modalForm.edit(record); |
||||||
|
this.$refs.modalForm.title = "编辑"; |
||||||
|
this.$refs.modalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
handleAdd: function () { |
||||||
|
this.$refs.modalForm.add(); |
||||||
|
this.$refs.modalForm.title = "新增"; |
||||||
|
this.$refs.modalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
handleTableChange(pagination, filters, sorter) { |
||||||
|
//分页、排序、筛选变化时触发
|
||||||
|
if (Object.keys(sorter).length > 0) { |
||||||
|
this.isorter.column = sorter.field; |
||||||
|
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc" |
||||||
|
} |
||||||
|
if(pagination && pagination.current) { |
||||||
|
this.ipagination = pagination; |
||||||
|
} |
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
handleToggleSearch(){ |
||||||
|
this.toggleSearchStatus = !this.toggleSearchStatus; |
||||||
|
}, |
||||||
|
// 给popup查询使用(查询区域不支持回填多个字段,限制只返回一个字段)
|
||||||
|
getPopupField(fields){ |
||||||
|
return fields.split(',')[0] |
||||||
|
}, |
||||||
|
modalFormOk() { |
||||||
|
// 新增/修改 成功时,重载列表
|
||||||
|
this.loadData(); |
||||||
|
}, |
||||||
|
handleDetail:function(record, type){ |
||||||
|
this.$refs.modalDetail.show(record, type); |
||||||
|
this.$refs.modalDetail.title=type+"-详情"; |
||||||
|
}, |
||||||
|
/* 导出 */ |
||||||
|
handleExportXls2(){ |
||||||
|
let paramsStr = encodeURI(JSON.stringify(this.getQueryParams())); |
||||||
|
let url = `${window._CONFIG['domianURL']}/${this.url.exportXlsUrl}?paramsStr=${paramsStr}`; |
||||||
|
window.location.href = url; |
||||||
|
}, |
||||||
|
handleExportXls(fileName){ |
||||||
|
if(!fileName || typeof fileName != "string"){ |
||||||
|
fileName = "导出文件" |
||||||
|
} |
||||||
|
let param = {...this.queryParam}; |
||||||
|
if(this.selectedRowKeys && this.selectedRowKeys.length>0){ |
||||||
|
param['selections'] = this.selectedRowKeys.join(",") |
||||||
|
} |
||||||
|
console.log("导出参数",param) |
||||||
|
downFile(this.url.exportXlsUrl,param).then((data)=>{ |
||||||
|
if (!data) { |
||||||
|
this.$message.warning("文件下载失败") |
||||||
|
return |
||||||
|
} |
||||||
|
if (typeof window.navigator.msSaveBlob !== 'undefined') { |
||||||
|
window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls') |
||||||
|
}else{ |
||||||
|
let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'})) |
||||||
|
let link = document.createElement('a') |
||||||
|
link.style.display = 'none' |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', fileName+'.xls') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
document.body.removeChild(link); //下载完成移除元素
|
||||||
|
window.URL.revokeObjectURL(url); //释放掉blob对象
|
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 导入 */ |
||||||
|
handleImportExcel(info){ |
||||||
|
console.log(info,'info') |
||||||
|
if (info.file.status !== 'uploading') { |
||||||
|
console.log(info.file, info.fileList); |
||||||
|
} |
||||||
|
if (info.file.status === 'done') { |
||||||
|
if (info.file.response) { |
||||||
|
// this.$message.success(`${info.file.name} 文件上传成功`);
|
||||||
|
if (info.file.response.code === 200) { |
||||||
|
this.$message.success(info.file.response.data || `${info.file.name} 文件上传成功`) |
||||||
|
} else { |
||||||
|
this.$message.warning(info.file.response.data) |
||||||
|
} |
||||||
|
this.loadData() |
||||||
|
} else { |
||||||
|
this.$message.error(`${info.file.name} ${info.file.response.data}.`); |
||||||
|
} |
||||||
|
} else if (info.file.status === 'error') { |
||||||
|
this.$message.error(`文件上传失败: ${info.file.msg} `); |
||||||
|
} |
||||||
|
}, |
||||||
|
/* 图片预览 */ |
||||||
|
getImgView(text){ |
||||||
|
if(text && text.indexOf(",")>0){ |
||||||
|
text = text.substring(0,text.indexOf(",")) |
||||||
|
} |
||||||
|
return getFileAccessHttpUrl(text) |
||||||
|
}, |
||||||
|
/* 文件下载 */ |
||||||
|
uploadFile(text){ |
||||||
|
if(!text){ |
||||||
|
this.$message.warning("未知的文件") |
||||||
|
return; |
||||||
|
} |
||||||
|
if(text.indexOf(",")>0){ |
||||||
|
text = text.substring(0,text.indexOf(",")) |
||||||
|
} |
||||||
|
let url = getFileAccessHttpUrl(text) |
||||||
|
window.open(url); |
||||||
|
}, |
||||||
|
/* 按钮权限 */ |
||||||
|
initActiveBtnStr() { |
||||||
|
let funId = Vue.ls.get('funId'); //功能id
|
||||||
|
let btnStrList = Vue.ls.get('winBtnStrList'); //按钮功能列表 JSON字符串
|
||||||
|
this.btnEnableList = [1,2,3,4,5,,6,7]; //按钮列表
|
||||||
|
if (funId && btnStrList) { |
||||||
|
for (let i = 0; i < btnStrList.length; i++) { |
||||||
|
if (btnStrList[i].funId == funId) { |
||||||
|
if (btnStrList[i].btnStr) { |
||||||
|
this.btnEnableList = btnStrList[i].btnStr; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
/* 初始化表格横向或纵向滚动 */ |
||||||
|
initScroll() { |
||||||
|
if (this.isMobile()) { |
||||||
|
this.scroll.y = '' |
||||||
|
} else { |
||||||
|
let basicLength = 274 |
||||||
|
let searchWrapperDomLen=0, operatorDomLen=0 |
||||||
|
//搜索区域
|
||||||
|
let searchWrapperDom = document.getElementsByClassName('table-page-search-wrapper') |
||||||
|
//操作按钮区域
|
||||||
|
let operatorDom = document.getElementsByClassName('table-operator') |
||||||
|
if(searchWrapperDom && searchWrapperDom[0]) { |
||||||
|
searchWrapperDomLen = searchWrapperDom[0].offsetHeight |
||||||
|
} |
||||||
|
if(operatorDom && operatorDom[0]) { |
||||||
|
operatorDomLen = operatorDom[0].offsetHeight+10 |
||||||
|
} |
||||||
|
this.scroll.y = document.documentElement.clientHeight-searchWrapperDomLen-operatorDomLen-basicLength |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 表格增加合计行 */ |
||||||
|
tableAddTotalRow(columns, dataSource) { |
||||||
|
if(dataSource.length>0 && this.ipagination.pageSize%10===1) { |
||||||
|
//分页条数为11、21、31等的时候增加合计行
|
||||||
|
let numKey = 'rowIndex' |
||||||
|
let totalRow = { [numKey]: '合计' } |
||||||
|
//需要合计的列
|
||||||
|
let parseCols = 'initialStock,currentStock,currentStockPrice,initialAmount,thisMonthAmount,currentAmount,inSum,inSumPrice,inOutSumPrice,' + |
||||||
|
'outSum,outSumPrice,outInSumPrice,operNumber,allPrice,numSum,priceSum,prevSum,thisSum,thisAllPrice,billMoney,changeAmount,' + |
||||||
|
'allPrice,currentNumber,lowSafeStock,highSafeStock,lowCritical,highCritical,initialPrice,intoPrice,intoStock,outPrice,outStock' |
||||||
|
columns.forEach(column => { |
||||||
|
let { key, dataIndex } = column |
||||||
|
if (![key, dataIndex].includes(numKey)) { |
||||||
|
let total = 0 |
||||||
|
dataSource.forEach(data => { |
||||||
|
if(parseCols.indexOf(dataIndex)>-1) { |
||||||
|
if(data[dataIndex]) { |
||||||
|
total += Number.parseFloat(data[dataIndex]) |
||||||
|
} else { |
||||||
|
total += 0 |
||||||
|
} |
||||||
|
} else { |
||||||
|
total = '-' |
||||||
|
} |
||||||
|
}) |
||||||
|
if (total !== '-') { |
||||||
|
total = total.toFixed(2) |
||||||
|
} |
||||||
|
totalRow[dataIndex] = total |
||||||
|
} |
||||||
|
}) |
||||||
|
dataSource.push(totalRow) |
||||||
|
//总数要增加合计的行数,每页都有一行合计,所以总数要加上
|
||||||
|
let size = Math.ceil(this.ipagination.total/(this.ipagination.pageSize-1)) |
||||||
|
this.ipagination.total = this.ipagination.total + size |
||||||
|
} |
||||||
|
}, |
||||||
|
paginationChange(page, pageSize) { |
||||||
|
this.ipagination.current = page |
||||||
|
this.ipagination.pageSize = pageSize |
||||||
|
this.loadData(this.ipagination.current); |
||||||
|
}, |
||||||
|
paginationShowSizeChange(current, size) { |
||||||
|
this.ipagination.current = current |
||||||
|
this.ipagination.pageSize = size |
||||||
|
this.loadData(this.ipagination.current); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,82 @@ |
|||||||
|
//mixins/tableDragResize.js
|
||||||
|
import Vue from 'vue' |
||||||
|
import VueDraggableResizable from 'vue-draggable-resizable' |
||||||
|
Vue.component('vue-draggable-resizable', VueDraggableResizable) |
||||||
|
/** |
||||||
|
* @param { 表格columns } tbCols |
||||||
|
*/ |
||||||
|
function initDrag(tbCols) { |
||||||
|
const draggingMap = {} |
||||||
|
tbCols.forEach((col) => { |
||||||
|
const key = col.dataIndex || col.key//这儿要求表格数据中要有这两个属性
|
||||||
|
draggingMap[key] = col.width || 0 |
||||||
|
}) |
||||||
|
const draggingState = Vue.observable(draggingMap) |
||||||
|
return (h, props, children) => { |
||||||
|
let thDom = null |
||||||
|
const { key, ...restProps } = props |
||||||
|
let col |
||||||
|
if (key === 'selection-column') { |
||||||
|
//表格加了复选框,不加这个判断col会是undefided
|
||||||
|
col = {} |
||||||
|
} else { |
||||||
|
col = tbCols.find((item) => { |
||||||
|
const k = item.dataIndex || item.key |
||||||
|
return k === key |
||||||
|
}) |
||||||
|
} |
||||||
|
if (!col.width) {//这儿要求表格数据中要有宽width属性,若是没有是不会执行下面的拖拽的
|
||||||
|
return <th {...restProps}>{children}</th> |
||||||
|
} |
||||||
|
|
||||||
|
const onDrag = (x) => { |
||||||
|
draggingState[key] = 0 |
||||||
|
col.width = Math.max(x, 1) |
||||||
|
} |
||||||
|
const onDragstop = () => { |
||||||
|
draggingState[key] = thDom.getBoundingClientRect().width |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<th |
||||||
|
{...restProps} |
||||||
|
v-ant-ref={(r) => { |
||||||
|
thDom = r |
||||||
|
}} |
||||||
|
width={draggingState[key]} |
||||||
|
class="resize-table-th" |
||||||
|
> |
||||||
|
{children} |
||||||
|
<vue-draggable-resizable |
||||||
|
key={col.dataIndex || col.key} |
||||||
|
class="table-draggable-handle" |
||||||
|
w={10} |
||||||
|
x={col.width || draggingState[key]} |
||||||
|
z={1} |
||||||
|
axis="x" |
||||||
|
draggable={true} |
||||||
|
resizable={false} |
||||||
|
onDragging={onDrag} |
||||||
|
onDragstop={onDragstop} |
||||||
|
></vue-draggable-resizable> |
||||||
|
</th> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
/** |
||||||
|
* https://github.com/mauricius/vue-draggable-resizable
|
||||||
|
* 表格列可拖拽 |
||||||
|
* 表格上使用::components="drag(columns)" |
||||||
|
* tips:columns中需包含dataIndex或者key和width(Number) |
||||||
|
*/ |
||||||
|
drag(columns) { |
||||||
|
return { |
||||||
|
header: { |
||||||
|
cell: initDrag(columns), |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
@ -0,0 +1,176 @@ |
|||||||
|
const FormTypes = { |
||||||
|
normal: 'normal', |
||||||
|
input: 'input', |
||||||
|
inputNumber: 'inputNumber', |
||||||
|
checkbox: 'checkbox', |
||||||
|
select: 'select', |
||||||
|
date: 'date', |
||||||
|
datetime: 'datetime', |
||||||
|
upload: 'upload', |
||||||
|
file: 'file', |
||||||
|
image: 'image', |
||||||
|
popup:'popup', |
||||||
|
popupJsh:'popupJsh', |
||||||
|
list_multi:"list_multi", |
||||||
|
sel_search:"sel_search", |
||||||
|
radio:'radio', |
||||||
|
checkbox_meta:"checkbox_meta", |
||||||
|
input_pop:'input_pop', |
||||||
|
slot: 'slot', |
||||||
|
hidden: 'hidden' |
||||||
|
} |
||||||
|
const VALIDATE_NO_PASSED = Symbol() |
||||||
|
export { FormTypes, VALIDATE_NO_PASSED } |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取指定的 $refs 对象 |
||||||
|
* 有时候可能会遇到组件未挂载到页面中的情况,导致无法获取 $refs 中的某个对象 |
||||||
|
* 这个方法可以等待挂载完成之后再返回 $refs 的对象,避免报错 |
||||||
|
* @author sunjianlei |
||||||
|
**/ |
||||||
|
export function getRefPromise(vm, name) { |
||||||
|
return new Promise((resolve) => { |
||||||
|
(function next() { |
||||||
|
let ref = vm.$refs[name] |
||||||
|
if (ref) { |
||||||
|
resolve(ref) |
||||||
|
} else { |
||||||
|
setTimeout(() => { |
||||||
|
next() |
||||||
|
}, 10) |
||||||
|
} |
||||||
|
})() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 一次性验证主表单和所有的次表单 |
||||||
|
* @param form 主表单 form 对象 |
||||||
|
* @param cases 接收一个数组,每项都是一个JEditableTable实例 |
||||||
|
* @returns {Promise<any>} |
||||||
|
* @author sunjianlei |
||||||
|
*/ |
||||||
|
export function validateFormAndTables(form, cases) { |
||||||
|
|
||||||
|
if (!(form && typeof form.validateFields === 'function')) { |
||||||
|
throw `form 参数需要的是一个form对象,而传入的却是${typeof form}` |
||||||
|
} |
||||||
|
|
||||||
|
let options = {} |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
// 验证主表表单
|
||||||
|
form.validateFields((err, values) => { |
||||||
|
err ? reject({ error: VALIDATE_NO_PASSED }) : resolve(values) |
||||||
|
}) |
||||||
|
}).then(values => { |
||||||
|
Object.assign(options, { formValue: values }) |
||||||
|
// 验证所有子表的表单
|
||||||
|
return validateTables(cases) |
||||||
|
}).then(all => { |
||||||
|
Object.assign(options, { tablesValue: all }) |
||||||
|
return Promise.resolve(options) |
||||||
|
}).catch(error => { |
||||||
|
return Promise.reject(error) |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 验证并获取一个或多个表格的所有值 |
||||||
|
* @param cases 接收一个数组,每项都是一个JEditableTable实例 |
||||||
|
* @param deleteTempId 是否删除临时ID,如果设为true,行编辑就不返回新增行的ID,ID需要后台生成 |
||||||
|
* @author sunjianlei |
||||||
|
*/ |
||||||
|
export function validateTables(cases, deleteTempId) { |
||||||
|
if (!(cases instanceof Array)) { |
||||||
|
throw `'validateTables'函数的'cases'参数需要的是一个数组,而传入的却是${typeof cases}` |
||||||
|
} |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let tables = [] |
||||||
|
let index = 0; |
||||||
|
if(!cases || cases.length==0){ |
||||||
|
resolve() |
||||||
|
} |
||||||
|
(function next() { |
||||||
|
let vm = cases[index] |
||||||
|
vm.getAll(true, deleteTempId).then(all => { |
||||||
|
tables[index] = all |
||||||
|
// 判断校验是否全部完成,完成返回成功,否则继续进行下一步校验
|
||||||
|
if (++index === cases.length) { |
||||||
|
resolve(tables) |
||||||
|
} else ( |
||||||
|
next() |
||||||
|
) |
||||||
|
}, error => { |
||||||
|
// 出现未验证通过的表单,不再进行下一步校验,直接返回失败并跳转到该表格
|
||||||
|
if (error === VALIDATE_NO_PASSED) { |
||||||
|
reject({ error: VALIDATE_NO_PASSED, index }) |
||||||
|
} |
||||||
|
reject(error) |
||||||
|
}) |
||||||
|
})() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 一次性验证主表单和所有的次表单-只校验单号 |
||||||
|
* @param form 主表单 form 对象 |
||||||
|
* @param cases 接收一个数组,每项都是一个JEditableTable实例 |
||||||
|
* @returns {Promise<any>} |
||||||
|
* @author sunjianlei |
||||||
|
*/ |
||||||
|
export function getListData(form, cases) { |
||||||
|
let options = {} |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
// 验证主表表单
|
||||||
|
form.validateFields(['number'],(err, values) => { |
||||||
|
err ? reject({ error: VALIDATE_NO_PASSED }) : resolve(values) |
||||||
|
}) |
||||||
|
}).then(values => { |
||||||
|
Object.assign(options, { formValue: values }) |
||||||
|
// 验证所有子表的表单
|
||||||
|
return getListTables(cases) |
||||||
|
}).then(all => { |
||||||
|
Object.assign(options, { tablesValue: all }) |
||||||
|
return Promise.resolve(options) |
||||||
|
}).catch(error => { |
||||||
|
return Promise.reject(error) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 不验证直接获取一个或多个表格的所有值 |
||||||
|
* @param cases 接收一个数组,每项都是一个JEditableTable实例 |
||||||
|
* @param deleteTempId 是否删除临时ID,如果设为true,行编辑就不返回新增行的ID,ID需要后台生成 |
||||||
|
* @author sunjianlei |
||||||
|
*/ |
||||||
|
export function getListTables(cases, deleteTempId) { |
||||||
|
if (!(cases instanceof Array)) { |
||||||
|
throw `'validateTables'函数的'cases'参数需要的是一个数组,而传入的却是${typeof cases}` |
||||||
|
} |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let tables = [] |
||||||
|
let index = 0; |
||||||
|
if(!cases || cases.length==0){ |
||||||
|
resolve() |
||||||
|
} |
||||||
|
(function next() { |
||||||
|
let vm = cases[index] |
||||||
|
vm.getAll(false, deleteTempId).then(all => { |
||||||
|
tables[index] = all |
||||||
|
// 判断校验是否全部完成,完成返回成功,否则继续进行下一步校验
|
||||||
|
if (++index === cases.length) { |
||||||
|
resolve(tables) |
||||||
|
} else ( |
||||||
|
next() |
||||||
|
) |
||||||
|
}, error => { |
||||||
|
// 出现未验证通过的表单,不再进行下一步校验,直接返回失败并跳转到该表格
|
||||||
|
if (error === VALIDATE_NO_PASSED) { |
||||||
|
reject({ error: VALIDATE_NO_PASSED, index }) |
||||||
|
} |
||||||
|
reject(error) |
||||||
|
}) |
||||||
|
})() |
||||||
|
}) |
||||||
|
} |
@ -0,0 +1,40 @@ |
|||||||
|
// import Vue from 'vue'
|
||||||
|
import { mapState } from "vuex"; |
||||||
|
|
||||||
|
// const mixinsComputed = Vue.config.optionMergeStrategies.computed
|
||||||
|
// const mixinsMethods = Vue.config.optionMergeStrategies.methods
|
||||||
|
|
||||||
|
const mixin = { |
||||||
|
computed: { |
||||||
|
...mapState({ |
||||||
|
layoutMode: state => state.app.layout, |
||||||
|
navTheme: state => state.app.theme, |
||||||
|
primaryColor: state => state.app.color, |
||||||
|
colorWeak: state => state.app.weak, |
||||||
|
multipage: state => state.app.multipage,//多页签设置
|
||||||
|
fixedHeader: state => state.app.fixedHeader, |
||||||
|
fixSiderbar: state => state.app.fixSiderbar, |
||||||
|
contentWidth: state => state.app.contentWidth, |
||||||
|
autoHideHeader: state => state.app.autoHideHeader, |
||||||
|
sidebarOpened: state => state.app.sidebar.opened |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mixinDevice = { |
||||||
|
computed: { |
||||||
|
...mapState({ |
||||||
|
device: state => state.app.device, |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
isMobile () { |
||||||
|
return this.device === 'mobile' |
||||||
|
}, |
||||||
|
isDesktop () { |
||||||
|
return this.device === 'desktop' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export { mixin, mixinDevice } |
@ -0,0 +1,115 @@ |
|||||||
|
/** |
||||||
|
* 该文件截取自 "ant-design-vue/es/_util/props-util.js" 文件,并对其做出特殊修改 |
||||||
|
*/ |
||||||
|
function classNames() { |
||||||
|
let classes = [] |
||||||
|
|
||||||
|
for (let i = 0; i < arguments.length; i++) { |
||||||
|
let arg = arguments[i] |
||||||
|
if (!arg) continue |
||||||
|
|
||||||
|
let argType = typeof arg |
||||||
|
|
||||||
|
if (argType === 'string' || argType === 'number') { |
||||||
|
classes.push(arg) |
||||||
|
} else if (Array.isArray(arg) && arg.length) { |
||||||
|
let inner = classNames.apply(null, arg) |
||||||
|
if (inner) { |
||||||
|
classes.push(inner) |
||||||
|
} |
||||||
|
} else if (argType === 'object') { |
||||||
|
for (let key in arg) { |
||||||
|
if (arg.hasOwnProperty(key) && arg[key]) { |
||||||
|
classes.push(key) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return classes.join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const camelizeRE = /-(\w)/g |
||||||
|
|
||||||
|
function camelize(str) { |
||||||
|
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : '')) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function objectCamelize(obj) { |
||||||
|
let res = {} |
||||||
|
Object.keys(obj).forEach(k => (res[camelize(k)] = obj[k])) |
||||||
|
return res |
||||||
|
} |
||||||
|
|
||||||
|
function parseStyleText(cssText = '', camel) { |
||||||
|
const res = {} |
||||||
|
const listDelimiter = /;(?![^(]*\))/g |
||||||
|
const propertyDelimiter = /:(.+)/ |
||||||
|
cssText.split(listDelimiter).forEach(function (item) { |
||||||
|
if (item) { |
||||||
|
const tmp = item.split(propertyDelimiter) |
||||||
|
if (tmp.length > 1) { |
||||||
|
const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim() |
||||||
|
res[k] = tmp[1].trim() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
return res |
||||||
|
} |
||||||
|
|
||||||
|
export function getClass(ele) { |
||||||
|
let data = {} |
||||||
|
if (ele.data) { |
||||||
|
data = ele.data |
||||||
|
} else if (ele.$vnode && ele.$vnode.data) { |
||||||
|
data = ele.$vnode.data |
||||||
|
} |
||||||
|
const tempCls = data.class || {} |
||||||
|
const staticClass = data.staticClass |
||||||
|
let cls = {} |
||||||
|
staticClass && |
||||||
|
staticClass.split(' ').forEach(c => { |
||||||
|
cls[c.trim()] = true |
||||||
|
}) |
||||||
|
if (typeof tempCls === 'string') { |
||||||
|
tempCls.split(' ').forEach(c => { |
||||||
|
cls[c.trim()] = true |
||||||
|
}) |
||||||
|
} else if (Array.isArray(tempCls)) { |
||||||
|
classNames(tempCls) |
||||||
|
.split(' ') |
||||||
|
.forEach(c => { |
||||||
|
cls[c.trim()] = true |
||||||
|
}) |
||||||
|
} else { |
||||||
|
cls = { ...cls, ...tempCls } |
||||||
|
} |
||||||
|
return cls |
||||||
|
} |
||||||
|
|
||||||
|
export function getStyle(ele, camel) { |
||||||
|
|
||||||
|
getClass(ele) |
||||||
|
|
||||||
|
let data = {} |
||||||
|
if (ele.data) { |
||||||
|
data = ele.data |
||||||
|
} else if (ele.$vnode && ele.$vnode.data) { |
||||||
|
data = ele.$vnode.data |
||||||
|
} |
||||||
|
|
||||||
|
// update-begin-author:sunjianlei date:20200303 for: style 和 staticStyle 可以共存
|
||||||
|
let style = data.style || {} |
||||||
|
let staticStyle = data.staticStyle |
||||||
|
staticStyle = staticStyle ? objectCamelize(data.staticStyle) : {} |
||||||
|
// update-end-author:sunjianlei date:20200303 for: style 和 staticStyle 可以共存
|
||||||
|
|
||||||
|
if (typeof style === 'string') { |
||||||
|
style = parseStyleText(style, camel) |
||||||
|
} else if (camel && style) { |
||||||
|
// 驼峰化
|
||||||
|
style = objectCamelize(style) |
||||||
|
} |
||||||
|
return { ...staticStyle, ...style } |
||||||
|
} |
||||||
|
|
@ -0,0 +1,669 @@ |
|||||||
|
import api from '@/api/api' |
||||||
|
import isURL from '@/utils/validate' |
||||||
|
import XLSX from 'xlsx' |
||||||
|
|
||||||
|
export function timeFix() { |
||||||
|
const time = new Date() |
||||||
|
const hour = time.getHours() |
||||||
|
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour < 20 ? '下午好' : '晚上好'))) |
||||||
|
} |
||||||
|
|
||||||
|
export function welcome() { |
||||||
|
const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了'] |
||||||
|
let index = Math.floor((Math.random()*arr.length)) |
||||||
|
return arr[index] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 触发 window.resize |
||||||
|
*/ |
||||||
|
export function triggerWindowResizeEvent() { |
||||||
|
let event = document.createEvent('HTMLEvents') |
||||||
|
event.initEvent('resize', true, true) |
||||||
|
event.eventType = 'message' |
||||||
|
window.dispatchEvent(event) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 过滤对象中为空的属性 |
||||||
|
* @param obj |
||||||
|
* @returns {*} |
||||||
|
*/ |
||||||
|
export function filterObj(obj) { |
||||||
|
if (!(typeof obj == 'object')) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
for ( let key in obj) { |
||||||
|
if (obj.hasOwnProperty(key) |
||||||
|
&& (obj[key] == null || obj[key] == undefined || obj[key] === '')) { |
||||||
|
delete obj[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
return obj; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 时间格式化 |
||||||
|
* @param value |
||||||
|
* @param fmt |
||||||
|
* @returns {*} |
||||||
|
*/ |
||||||
|
export function formatDate(value, fmt) { |
||||||
|
let regPos = /^\d+(\.\d+)?$/; |
||||||
|
if(regPos.test(value)){ |
||||||
|
//如果是数字
|
||||||
|
let getDate = new Date(value); |
||||||
|
let o = { |
||||||
|
'M+': getDate.getMonth() + 1, |
||||||
|
'd+': getDate.getDate(), |
||||||
|
'h+': getDate.getHours(), |
||||||
|
'm+': getDate.getMinutes(), |
||||||
|
's+': getDate.getSeconds(), |
||||||
|
'q+': Math.floor((getDate.getMonth() + 3) / 3), |
||||||
|
'S': getDate.getMilliseconds() |
||||||
|
}; |
||||||
|
if (/(y+)/.test(fmt)) { |
||||||
|
fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length)) |
||||||
|
} |
||||||
|
for (let k in o) { |
||||||
|
if (new RegExp('(' + k + ')').test(fmt)) { |
||||||
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) |
||||||
|
} |
||||||
|
} |
||||||
|
return fmt; |
||||||
|
}else{ |
||||||
|
//TODO
|
||||||
|
value = value.trim(); |
||||||
|
return value.substr(0,fmt.length); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 生成首页路由
|
||||||
|
|
||||||
|
|
||||||
|
// 生成嵌套路由(子路由)
|
||||||
|
|
||||||
|
function generateChildRouters (data) { |
||||||
|
const routers = []; |
||||||
|
for (let item of data) { |
||||||
|
let componentPath = ""; |
||||||
|
item.route = "1"; |
||||||
|
if(item.component.indexOf("layouts")>=0){ |
||||||
|
componentPath = () => import('@/components'+item.component); |
||||||
|
} else { |
||||||
|
componentPath = () => import('@/views'+item.component); |
||||||
|
} |
||||||
|
// eslint-disable-next-line
|
||||||
|
let URL = (item.url|| '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
|
||||||
|
if (isURL(URL)) { |
||||||
|
item.url = URL; |
||||||
|
} |
||||||
|
let componentName ='' |
||||||
|
if(item.component) { |
||||||
|
let index = item.component.lastIndexOf("\/"); |
||||||
|
componentName = item.component.substring(index + 1, item.component.length); |
||||||
|
} |
||||||
|
let menu = { |
||||||
|
path: item.url, |
||||||
|
name: item.text, |
||||||
|
component: componentPath, |
||||||
|
meta: { |
||||||
|
id: item.id, |
||||||
|
title: item.text, |
||||||
|
icon: item.icon, |
||||||
|
url: item.url, |
||||||
|
componentName:componentName, |
||||||
|
internalOrExternal:true, |
||||||
|
keepAlive: true |
||||||
|
// permissionList:""
|
||||||
|
} |
||||||
|
} |
||||||
|
if (item.children && item.children.length > 0) { |
||||||
|
menu.children = [...generateChildRouters( item.children)]; |
||||||
|
} |
||||||
|
//--update-begin----author:scott---date:20190320------for:根据后台菜单配置,判断是否路由菜单字段,动态选择是否生成路由(为了支持参数URL菜单)------
|
||||||
|
//判断是否生成路由
|
||||||
|
if(item.route && item.route === '0'){ |
||||||
|
//console.log(' 不生成路由 item.route: '+item.route);
|
||||||
|
//console.log(' 不生成路由 item.path: '+item.path);
|
||||||
|
}else{ |
||||||
|
routers.push(menu); |
||||||
|
} |
||||||
|
//--update-end----author:scott---date:20190320------for:根据后台菜单配置,判断是否路由菜单字段,动态选择是否生成路由(为了支持参数URL菜单)------
|
||||||
|
} |
||||||
|
return routers |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 深度克隆对象、数组 |
||||||
|
* @param obj 被克隆的对象 |
||||||
|
* @return 克隆后的对象 |
||||||
|
*/ |
||||||
|
export function cloneObject(obj) { |
||||||
|
return JSON.parse(JSON.stringify(obj)) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 随机生成数字 |
||||||
|
* |
||||||
|
* 示例:生成长度为 12 的随机数:randomNumber(12) |
||||||
|
* 示例:生成 3~23 之间的随机数:randomNumber(3, 23) |
||||||
|
* |
||||||
|
* @param1 最小值 | 长度 |
||||||
|
* @param2 最大值 |
||||||
|
* @return int 生成后的数字 |
||||||
|
*/ |
||||||
|
export function randomNumber() { |
||||||
|
// 生成 最小值 到 最大值 区间的随机数
|
||||||
|
const random = (min, max) => { |
||||||
|
return Math.floor(Math.random() * (max - min + 1) + min) |
||||||
|
} |
||||||
|
if (arguments.length === 1) { |
||||||
|
let [length] = arguments |
||||||
|
// 生成指定长度的随机数字,首位一定不是 0
|
||||||
|
let nums = [...Array(length).keys()].map((i) => (i > 0 ? random(0, 9) : random(1, 9))) |
||||||
|
return parseInt(nums.join('')) |
||||||
|
} else if (arguments.length >= 2) { |
||||||
|
let [min, max] = arguments |
||||||
|
return random(min, max) |
||||||
|
} else { |
||||||
|
return Number.NaN |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 随机生成字符串 |
||||||
|
* @param length 字符串的长度 |
||||||
|
* @param chats 可选字符串区间(只会生成传入的字符串中的字符) |
||||||
|
* @return string 生成的字符串 |
||||||
|
*/ |
||||||
|
export function randomString(length, chats) { |
||||||
|
if (!length) length = 1 |
||||||
|
if (!chats) chats = '0123456789qwertyuioplkjhgfdsazxcvbnm' |
||||||
|
let str = '' |
||||||
|
for (let i = 0; i < length; i++) { |
||||||
|
let num = randomNumber(0, chats.length - 1) |
||||||
|
str += chats[num] |
||||||
|
} |
||||||
|
return str |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 随机生成uuid |
||||||
|
* @return string 生成的uuid |
||||||
|
*/ |
||||||
|
export function randomUUID() { |
||||||
|
let chats = '0123456789abcdef' |
||||||
|
return randomString(32, chats) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 下划线转驼峰 |
||||||
|
* @param string |
||||||
|
* @returns {*} |
||||||
|
*/ |
||||||
|
export function underLine2CamelCase(string){ |
||||||
|
return string.replace( /_([a-z])/g, function( all, letter ) { |
||||||
|
return letter.toUpperCase(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 判断是否显示办理按钮 |
||||||
|
* @param bpmStatus |
||||||
|
* @returns {*} |
||||||
|
*/ |
||||||
|
export function showDealBtn(bpmStatus){ |
||||||
|
if(bpmStatus!="1"&&bpmStatus!="3"&&bpmStatus!="4"){ |
||||||
|
return true; |
||||||
|
} |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 增强CSS,可以在页面上输出全局css |
||||||
|
* @param css 要增强的css |
||||||
|
* @param id style标签的id,可以用来清除旧样式 |
||||||
|
*/ |
||||||
|
export function cssExpand(css, id) { |
||||||
|
let style = document.createElement('style') |
||||||
|
style.type = "text/css" |
||||||
|
style.innerHTML = `@charset "UTF-8"; ${css}` |
||||||
|
// 清除旧样式
|
||||||
|
if (id) { |
||||||
|
let $style = document.getElementById(id) |
||||||
|
if ($style != null) $style.outerHTML = '' |
||||||
|
style.id = id |
||||||
|
} |
||||||
|
// 应用新样式
|
||||||
|
document.head.appendChild(style) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** 用于js增强事件,运行JS代码,可以传参 */ |
||||||
|
// options 所需参数:
|
||||||
|
// 参数名 类型 说明
|
||||||
|
// vm VueComponent vue实例
|
||||||
|
// event Object event对象
|
||||||
|
// jsCode String 待执行的js代码
|
||||||
|
// errorMessage String 执行出错后的提示(控制台)
|
||||||
|
export function jsExpand(options = {}) { |
||||||
|
|
||||||
|
// 绑定到window上的keyName
|
||||||
|
let windowKeyName = 'J_CLICK_EVENT_OPTIONS' |
||||||
|
if (typeof window[windowKeyName] != 'object') { |
||||||
|
window[windowKeyName] = {} |
||||||
|
} |
||||||
|
|
||||||
|
// 随机生成JS增强的执行id,防止冲突
|
||||||
|
let id = randomString(16, 'qwertyuioplkjhgfdsazxcvbnm'.toUpperCase()) |
||||||
|
// 封装按钮点击事件
|
||||||
|
let code = ` |
||||||
|
(function (o_${id}) { |
||||||
|
try { |
||||||
|
(function (globalEvent, vm) { |
||||||
|
${options.jsCode} |
||||||
|
})(o_${id}.event, o_${id}.vm) |
||||||
|
} catch (e) { |
||||||
|
o_${id}.error(e) |
||||||
|
} |
||||||
|
o_${id}.done() |
||||||
|
})(window['${windowKeyName}']['EVENT_${id}']) |
||||||
|
` |
||||||
|
// 创建script标签
|
||||||
|
const script = document.createElement('script') |
||||||
|
// 将需要传递的参数挂载到window对象上
|
||||||
|
window[windowKeyName]['EVENT_' + id] = { |
||||||
|
vm: options.vm, |
||||||
|
event: options.event, |
||||||
|
// 当执行完成时,无论如何都会调用的回调事件
|
||||||
|
done() { |
||||||
|
// 执行完后删除新增的 script 标签不会撤销执行结果(已产生的结果不会被撤销)
|
||||||
|
script.outerHTML = '' |
||||||
|
delete window[windowKeyName]['EVENT_' + id] |
||||||
|
}, |
||||||
|
// 当js运行出错的时候调用的事件
|
||||||
|
error(e) { |
||||||
|
console.group(`${options.errorMessage || '用户自定义JS增强代码运行出错'}(${new Date()})`) |
||||||
|
console.error(e) |
||||||
|
console.groupEnd() |
||||||
|
} |
||||||
|
} |
||||||
|
// 将事件挂载到document中
|
||||||
|
script.innerHTML = code |
||||||
|
document.body.appendChild(script) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 重复值验证工具方法 |
||||||
|
* |
||||||
|
* 使用示例: |
||||||
|
* { validator: (rule, value, callback) => validateDuplicateValue('sys_fill_rule', 'rule_code', value, this.model.id, callback) } |
||||||
|
* |
||||||
|
* @param tableName 被验证的表名 |
||||||
|
* @param fieldName 被验证的字段名 |
||||||
|
* @param fieldVal 被验证的值 |
||||||
|
* @param dataId 数据ID,可空 |
||||||
|
* @param callback |
||||||
|
*/ |
||||||
|
export function validateDuplicateValue(tableName, fieldName, fieldVal, dataId, callback) { |
||||||
|
if (fieldVal) { |
||||||
|
let params = { tableName, fieldName, fieldVal, dataId } |
||||||
|
api.duplicateCheck(params).then(res => { |
||||||
|
res['success'] ? callback() : callback(res['message']) |
||||||
|
}).catch(err => { |
||||||
|
callback(err.message || err) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
callback() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 根据编码校验规则code,校验传入的值是否合法 |
||||||
|
* |
||||||
|
* 使用示例: |
||||||
|
* { validator: (rule, value, callback) => validateCheckRule('common', value, callback) } |
||||||
|
* |
||||||
|
* @param ruleCode 编码校验规则 code |
||||||
|
* @param value 被验证的值 |
||||||
|
* @param callback |
||||||
|
*/ |
||||||
|
export function validateCheckRule(ruleCode, value, callback) { |
||||||
|
if (ruleCode && value) { |
||||||
|
value = encodeURIComponent(value) |
||||||
|
api.checkRuleByCode({ ruleCode, value }).then(res => { |
||||||
|
res['success'] ? callback() : callback(res['message']) |
||||||
|
}).catch(err => { |
||||||
|
callback(err.message || err) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
callback() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 如果值不存在就 push 进数组,反之不处理 |
||||||
|
* @param array 要操作的数据 |
||||||
|
* @param value 要添加的值 |
||||||
|
* @param key 可空,如果比较的是对象,可能存在地址不一样但值实际上是一样的情况,可以传此字段判断对象中唯一的字段,例如 id。不传则直接比较实际值 |
||||||
|
* @returns {boolean} 成功 push 返回 true,不处理返回 false |
||||||
|
*/ |
||||||
|
export function pushIfNotExist(array, value, key) { |
||||||
|
for (let item of array) { |
||||||
|
if (key && (item[key] === value[key])) { |
||||||
|
return false |
||||||
|
} else if (item === value) { |
||||||
|
return false |
||||||
|
} |
||||||
|
} |
||||||
|
array.push(value) |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 可用于判断是否成功 |
||||||
|
* @type {symbol} |
||||||
|
*/ |
||||||
|
export const succeedSymbol = Symbol() |
||||||
|
/** |
||||||
|
* 可用于判断是否失败 |
||||||
|
* @type {symbol} |
||||||
|
*/ |
||||||
|
export const failedSymbol = Symbol() |
||||||
|
|
||||||
|
/** |
||||||
|
* 使 promise 无论如何都会 resolve,除非传入的参数不是一个Promise对象或返回Promise对象的方法 |
||||||
|
* 一般用在 Promise.all 中 |
||||||
|
* |
||||||
|
* @param promise 可传Promise对象或返回Promise对象的方法 |
||||||
|
* @returns {Promise<any>} |
||||||
|
*/ |
||||||
|
export function alwaysResolve(promise) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let p = promise |
||||||
|
if (typeof promise === 'function') { |
||||||
|
p = promise() |
||||||
|
} |
||||||
|
if (p instanceof Promise) { |
||||||
|
p.then(data => { |
||||||
|
resolve({ type: succeedSymbol, data }) |
||||||
|
}).catch(error => { |
||||||
|
resolve({ type: failedSymbol, error }) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
reject('alwaysResolve: 传入的参数不是一个Promise对象或返回Promise对象的方法') |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 简单实现防抖方法 |
||||||
|
* |
||||||
|
* 防抖(debounce)函数在第一次触发给定的函数时,不立即执行函数,而是给出一个期限值(delay),比如100ms。 |
||||||
|
* 如果100ms内再次执行函数,就重新开始计时,直到计时结束后再真正执行函数。 |
||||||
|
* 这样做的好处是如果短时间内大量触发同一事件,只会执行一次函数。 |
||||||
|
* |
||||||
|
* @param fn 要防抖的函数 |
||||||
|
* @param delay 防抖的毫秒数 |
||||||
|
* @returns {Function} |
||||||
|
*/ |
||||||
|
export function simpleDebounce(fn, delay = 100) { |
||||||
|
let timer = null |
||||||
|
return function () { |
||||||
|
let args = arguments |
||||||
|
if (timer) { |
||||||
|
clearTimeout(timer) |
||||||
|
} |
||||||
|
timer = setTimeout(() => { |
||||||
|
fn.apply(null, args) |
||||||
|
}, delay) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 不用正则的方式替换所有值 |
||||||
|
* @param text 被替换的字符串 |
||||||
|
* @param checker 替换前的内容 |
||||||
|
* @param replacer 替换后的内容 |
||||||
|
* @returns {String} 替换后的字符串 |
||||||
|
*/ |
||||||
|
export function replaceAll(text, checker, replacer) { |
||||||
|
let lastText = text |
||||||
|
text = text.replace(checker, replacer) |
||||||
|
if (lastText !== text) { |
||||||
|
return replaceAll(text, checker, replacer) |
||||||
|
} |
||||||
|
return text |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 转换商品扩展字段的格式 |
||||||
|
* @param thisRows |
||||||
|
* @param checker |
||||||
|
* @param replacer |
||||||
|
* @returns {string} |
||||||
|
*/ |
||||||
|
export function getMpListShort(thisRows, checker, replacer) { |
||||||
|
let mPropertyListShort = '' |
||||||
|
let nativeNameStr = '' |
||||||
|
for (let i = 0; i < thisRows.length; i++) { |
||||||
|
if (thisRows[i].enabled) { |
||||||
|
nativeNameStr += thisRows[i].nativeName + ","; |
||||||
|
} |
||||||
|
} |
||||||
|
if (nativeNameStr) { |
||||||
|
mPropertyListShort = nativeNameStr.substring(0, nativeNameStr.length - 1); |
||||||
|
} |
||||||
|
return mPropertyListShort |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* js获取当前月份, 格式“yyyy-MM” |
||||||
|
*/ |
||||||
|
export function getNowFormatMonth() { |
||||||
|
var date = new Date(); |
||||||
|
var seperator1 = "-"; |
||||||
|
var month = date.getMonth() + 1; |
||||||
|
if (month >= 1 && month <= 9) { |
||||||
|
month = "0" + month; |
||||||
|
} |
||||||
|
var currentdate = date.getFullYear() + seperator1 + month; |
||||||
|
return currentdate; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* js获取当前日期, 格式“yyyy-MM-dd” |
||||||
|
*/ |
||||||
|
export function getFormatDate() { |
||||||
|
var date = new Date(); |
||||||
|
var seperator1 = "-"; |
||||||
|
var year = date.getFullYear(); |
||||||
|
var month = date.getMonth() + 1; |
||||||
|
var strDate = date.getDate(); |
||||||
|
if (month >= 1 && month <= 9) { |
||||||
|
month = "0" + month; |
||||||
|
} |
||||||
|
if (strDate >= 0 && strDate <= 9) { |
||||||
|
strDate = "0" + strDate; |
||||||
|
} |
||||||
|
var currentdate = year + seperator1 + month + seperator1 + strDate; |
||||||
|
return currentdate; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* js获取当前时间, 格式“yyyy-MM-dd HH:MM:SS” |
||||||
|
*/ |
||||||
|
export function getNowFormatDateTime() { |
||||||
|
var date = new Date(); |
||||||
|
var seperator1 = "-"; |
||||||
|
var seperator2 = ":"; |
||||||
|
var month = date.getMonth() + 1; |
||||||
|
var strDate = date.getDate(); |
||||||
|
var strHours = date.getHours(); |
||||||
|
var strMinutes = date.getMinutes(); |
||||||
|
var strSeconds = date.getSeconds(); |
||||||
|
if (month >= 1 && month <= 9) { |
||||||
|
month = "0" + month; |
||||||
|
} |
||||||
|
if (strDate >= 0 && strDate <= 9) { |
||||||
|
strDate = "0" + strDate; |
||||||
|
} |
||||||
|
if (strHours >= 0 && strHours <= 9) { |
||||||
|
strHours = "0" + strHours; |
||||||
|
} |
||||||
|
if (strMinutes >= 0 && strMinutes <= 9) { |
||||||
|
strMinutes = "0" + strMinutes; |
||||||
|
} |
||||||
|
if (strSeconds >= 0 && strSeconds <= 9) { |
||||||
|
strSeconds = "0" + strSeconds; |
||||||
|
} |
||||||
|
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate |
||||||
|
+ " " + strHours + seperator2 + strMinutes |
||||||
|
+ seperator2 + strSeconds; |
||||||
|
return currentdate; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* js获取当前时间, 格式“MMddHHMMSS” |
||||||
|
*/ |
||||||
|
export function getNowFormatStr() { |
||||||
|
var date = new Date(); |
||||||
|
var month = date.getMonth() + 1; |
||||||
|
var strDate = date.getDate(); |
||||||
|
var strHours = date.getHours(); |
||||||
|
var strMinutes = date.getMinutes(); |
||||||
|
var strSeconds = date.getSeconds(); |
||||||
|
if (month >= 1 && month <= 9) { |
||||||
|
month = "0" + month; |
||||||
|
} |
||||||
|
if (strDate >= 0 && strDate <= 9) { |
||||||
|
strDate = "0" + strDate; |
||||||
|
} |
||||||
|
if (strHours >= 0 && strHours <= 9) { |
||||||
|
strHours = "0" + strHours; |
||||||
|
} |
||||||
|
if (strMinutes >= 0 && strMinutes <= 9) { |
||||||
|
strMinutes = "0" + strMinutes; |
||||||
|
} |
||||||
|
if (strSeconds >= 0 && strSeconds <= 9) { |
||||||
|
strSeconds = "0" + strSeconds; |
||||||
|
} |
||||||
|
var currentdate = month + strDate + strHours + strMinutes + strSeconds; |
||||||
|
console.log(currentdate,'currentdate') |
||||||
|
return currentdate; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* JS中根据指定值删除数组中的元素 |
||||||
|
* @param arrylist |
||||||
|
* @param val |
||||||
|
*/ |
||||||
|
export function removeByVal(arrylist, val) { |
||||||
|
for(var i = 0; i < arrylist .length; i++) { |
||||||
|
if(arrylist [i] == val) { |
||||||
|
arrylist .splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将数组单个金额中的数值转为负数 |
||||||
|
* @param arr |
||||||
|
* @returns {Array} |
||||||
|
*/ |
||||||
|
export function changeListFmtMinus(arr) { |
||||||
|
var newArr = new Array(); |
||||||
|
for(var i=0; i<arr.length; i++) { |
||||||
|
if(arr[i] < 0){ |
||||||
|
newArr.push((arr[i]-0).toString()); |
||||||
|
} |
||||||
|
else { |
||||||
|
newArr.push((0 - arr[i]).toString()); |
||||||
|
} |
||||||
|
} |
||||||
|
return newArr; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
通用的打开下载对话框方法,没有测试过具体兼容性 |
||||||
|
@param url 下载地址,也可以是一个blob对象,必选 |
||||||
|
@param saveName 保存文件名,可选 |
||||||
|
*/ |
||||||
|
export function openDownloadDialog (url, saveName) { |
||||||
|
if (typeof url === 'object' && url instanceof Blob) { |
||||||
|
url = URL.createObjectURL(url) // 创建blob地址
|
||||||
|
} |
||||||
|
let aLink = document.createElement('a') |
||||||
|
aLink.href = url |
||||||
|
saveName = saveName + '_' + getNowFormatStr() + '.xlsx' |
||||||
|
aLink.download = saveName || '' // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
|
||||||
|
let event |
||||||
|
if (window.MouseEvent) event = new MouseEvent('click') |
||||||
|
else { |
||||||
|
event = document.createEvent('MouseEvents') |
||||||
|
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null) |
||||||
|
} |
||||||
|
aLink.dispatchEvent(event) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载 |
||||||
|
* @param sheet |
||||||
|
* @param sheetName |
||||||
|
* @returns {Blob} |
||||||
|
*/ |
||||||
|
export function sheet2blob (aoa, sheetName) { |
||||||
|
let sheet = XLSX.utils.aoa_to_sheet(aoa) |
||||||
|
sheetName = sheetName || 'sheet1' |
||||||
|
let workbook = { |
||||||
|
SheetNames: [sheetName], |
||||||
|
Sheets: {} |
||||||
|
} |
||||||
|
workbook.Sheets[sheetName] = sheet |
||||||
|
// 生成excel的配置项
|
||||||
|
let wopts = { |
||||||
|
bookType: 'xlsx', // 要生成的文件类型
|
||||||
|
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
|
||||||
|
type: 'binary' |
||||||
|
} |
||||||
|
let wbout = XLSX.write(workbook, wopts) |
||||||
|
let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) |
||||||
|
// 字符串转ArrayBuffer
|
||||||
|
function s2ab (s) { |
||||||
|
let buf = new ArrayBuffer(s.length) |
||||||
|
let view = new Uint8Array(buf) |
||||||
|
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF |
||||||
|
return buf |
||||||
|
} |
||||||
|
return blob |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 回车后自动跳到下一个input |
||||||
|
*/ |
||||||
|
export function autoJumpNextInput(domInfo) { |
||||||
|
let domIndex = 0 |
||||||
|
let inputs = document.getElementById(domInfo).getElementsByTagName('input') |
||||||
|
inputs[domIndex].focus() |
||||||
|
document.getElementById(domInfo).addEventListener('keydown',function(e){ |
||||||
|
if(e.keyCode === 13){ |
||||||
|
domIndex++ |
||||||
|
if(domIndex === inputs.length) { |
||||||
|
domIndex = 0 |
||||||
|
} |
||||||
|
inputs[domIndex].focus() |
||||||
|
} |
||||||
|
}) |
||||||
|
for(let i=0; i<inputs.length; i++){ |
||||||
|
//这个index就是做个介质,来获取当前的i是第几个
|
||||||
|
inputs[i].index = i; |
||||||
|
inputs[i].onclick = function () { |
||||||
|
domIndex = this.index |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,216 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于两个仓库之间的商品调拨,调拨单会影响库存。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '调拨出库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<allocation-out-modal ref="modalForm" @ok="modalFormOk"></allocation-out-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!--power by jishenghua--> |
||||||
|
<script> |
||||||
|
import AllocationOutModal from './modules/AllocationOutModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "AllocationOutList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
AllocationOutModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "出库", |
||||||
|
subType: "调拨", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
depotId: "", |
||||||
|
creator: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align: 'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align: 'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align: 'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align: 'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align: 'center',}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,216 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于将多种商品合并成一个商品,被合并的商品库存减少,合并后的商品库存增加。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '组装单')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<assemble-modal ref="modalForm" @ok="modalFormOk"></assemble-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!--power by ji sheng hua--> |
||||||
|
<script> |
||||||
|
import AssembleModal from './modules/AssembleModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "AssembleList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
AssembleModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "其它", |
||||||
|
subType: "组装单", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
depotId: "", |
||||||
|
creator: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center',}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,216 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于将一个商品拆分成多种商品,被拆分的商品库存增加,拆分后的商品库存减少。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '拆卸单')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<disassemble-modal ref="modalForm" @ok="modalFormOk"></disassemble-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!--power by jisheng hua--> |
||||||
|
<script> |
||||||
|
import DisassembleModal from './modules/DisassembleModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "DisassembleList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
DisassembleModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "其它", |
||||||
|
subType: "拆卸单", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
depotId: "", |
||||||
|
creator: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,224 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联单据" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联单据" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="可以进行库存初始化,生产管理模块的成品入库。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '其它入库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<inventory-review-modal ref="modalForm" @ok="modalFormOk"></inventory-review-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!--power by ji shenghua--> |
||||||
|
<script> |
||||||
|
import InventoryReviewModal from './modules/InventoryReviewModal.vue' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "OtherInList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
InventoryReviewModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "其它", |
||||||
|
subType: "盘点复盘", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center',}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initSupplier() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,234 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择供应商" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in supList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联单据" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联单据" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="可以进行库存初始化,生产管理模块的成品入库。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '其它入库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<other-in-modal ref="modalForm" @ok="modalFormOk"></other-in-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!--power by ji shenghua--> |
||||||
|
<script> |
||||||
|
import OtherInModal from './modules/OtherInModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "OtherInList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
OtherInModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "入库", |
||||||
|
subType: "其它", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '供应商', dataIndex: 'organName',width:120, align:'center', ellipsis:true}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center',}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initSupplier() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,234 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择客户" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联单据" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联单据" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="可以进行库存初始化,生产管理模块的领料出库。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '其它出库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<other-out-modal ref="modalForm" @ok="modalFormOk"></other-out-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!--power by j i s h e n g h u a--> |
||||||
|
<script> |
||||||
|
import OtherOutModal from './modules/OtherOutModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "OtherOutList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
OtherOutModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "出库", |
||||||
|
subType: "其它", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '客户', dataIndex: 'organName',width:120, align:'center', ellipsis:true}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center',}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align:'center', align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.initCustomer() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,246 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择供应商" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in supList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联单据" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联单据" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于采购入库单据的退货。采购退货单可以由采购出库单转过来,也可以单独创建。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '采购退货出库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<purchase-back-modal ref="modalForm" @ok="modalFormOk"></purchase-back-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!-- by jisheng hua--> |
||||||
|
<script> |
||||||
|
import PurchaseBackModal from './modules/PurchaseBackModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "PurchaseBackList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
PurchaseBackModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "出库", |
||||||
|
subType: "采购退货", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '供应商', dataIndex: 'organName',width:120, ellipsis:true,align:'center',}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220,align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145,align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80,align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80,align:'center',}, |
||||||
|
{ title: '含税合计', dataIndex: 'totalTaxLastMoney',width:80,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
return (record.discountMoney + record.discountLastMoney).toFixed(2); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '待退金额', dataIndex: 'needBackMoney',width:80,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
let needBackMoney = record.discountLastMoney + record.otherMoney |
||||||
|
return needBackMoney? needBackMoney.toFixed(2):'' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '退款', dataIndex: 'changeAmount',width:50,align:'center',}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 160, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initSupplier() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,255 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择供应商" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in supList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联订单" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联订单" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="采购入库单可以由采购订单转过来,也可以单独创建。 |
||||||
|
采购入库单据中的仓库列表只显示当前用户有权限的仓库。采购入库单可以使用多账户付款。 |
||||||
|
勾选单据之后可以进行批量操作(删除、审核、反审核)" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '采购入库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<purchase-in-modal ref="modalForm" @ok="modalFormOk"></purchase-in-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!-- by ji sheng hua--> |
||||||
|
<script> |
||||||
|
import PurchaseInModal from './modules/PurchaseInModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "PurchaseInList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
PurchaseInModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "入库", |
||||||
|
subType: "采购", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '供应商', dataIndex: 'organName',width:120, ellipsis:true, align:'center',}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[订]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, ellipsis:true,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145,align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, ellipsis:true,align:'center',}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80,align:'center',}, |
||||||
|
{ title: '含税合计', dataIndex: 'totalTaxLastMoney',width:80,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
return (record.discountMoney + record.discountLastMoney).toFixed(2); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '待付金额', dataIndex: 'needInMoney',width:80,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
let needInMoney = record.discountLastMoney + record.otherMoney |
||||||
|
return needInMoney? needInMoney.toFixed(2):'' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '付款', dataIndex: 'changeAmount',width:60,align:'center',}, |
||||||
|
{ title: '欠款', dataIndex: 'debt',width:60,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
let debt = record.discountLastMoney + record.otherMoney - record.changeAmount |
||||||
|
return debt? debt.toFixed(2):'' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center",align:'center', |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 180, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initSupplier() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,230 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择供应商" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in supList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="采购订单不涉及付款金额,采购订单可以转采购入库单,但需要先对采购订单进行审核。 |
||||||
|
勾选单据之后可以进行批量操作(删除、审核、反审核)" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '采购订单')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
<a-tag v-if="status == '2'" color="cyan">完成采购</a-tag> |
||||||
|
<a-tag v-if="status == '3'" color="blue">部分采购</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<purchase-order-modal ref="modalForm" @ok="modalFormOk"></purchase-order-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!-- by ji sheng hua--> |
||||||
|
<script> |
||||||
|
import PurchaseOrderModal from './modules/PurchaseOrderModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "PurchaseOrderList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
PurchaseOrderModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "其它", |
||||||
|
subType: "采购订单", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '供应商', dataIndex: 'organName',width:120, align:'center', ellipsis:true}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145,align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, ellipsis:true,align:'center',}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80,align:'center',}, |
||||||
|
{ title: '含税合计', dataIndex: 'totalTaxLastMoney',width:80,align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.discountLastMoney) { |
||||||
|
return (record.discountMoney + record.discountLastMoney).toFixed(2); |
||||||
|
} else { |
||||||
|
return record.totalPrice; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center",align:'center', |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.initSupplier() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,244 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="会员卡号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择会员卡号" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in retailList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联单据" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联单据" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于零售出库单据的退货。零售退货单可以由零售出库单转过来,也可以单独创建。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '零售退货入库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<retail-back-modal ref="modalForm" @ok="modalFormOk"></retail-back-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!-- by jisheng h u a--> |
||||||
|
<script> |
||||||
|
import RetailBackModal from './modules/RetailBackModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "RetailBackList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
RetailBackModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "入库", |
||||||
|
subType: "零售退货", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '会员', dataIndex: 'organName',width:120, ellipsis:true, align:'center'}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
}, align:'center' |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center'}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, ellipsis:true, align:'center'}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center'}, |
||||||
|
{ title: '付款金额', dataIndex: 'getAmount',width:80, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.backAmount) { |
||||||
|
return record.changeAmount + record.backAmount |
||||||
|
} else { |
||||||
|
return record.changeAmount |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '找零', dataIndex: 'backAmount',width:50, align:'center'}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initRetail() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,238 @@ |
|||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="会员卡号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择会员卡号" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in retailList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于非会员和会员的单据录入,主要是用于散户使用,不能欠款。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '零售出库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<retail-out-modal ref="modalForm" @ok="modalFormOk"></retail-out-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<!-- create ji sheng hua--> |
||||||
|
<script> |
||||||
|
import RetailOutModal from './modules/RetailOutModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "RetailOutList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
RetailOutModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "出库", |
||||||
|
subType: "零售", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '会员', dataIndex: 'organName',width:120, ellipsis:true, align:'center'}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, ellipsis:true, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center'}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, ellipsis:true, align:'center'}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center'}, |
||||||
|
{ title: '收款金额', dataIndex: 'getAmount',width:80, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.backAmount) { |
||||||
|
return record.changeAmount + record.backAmount |
||||||
|
} else { |
||||||
|
return record.changeAmount |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '找零', dataIndex: 'backAmount',width:50, align:'center'}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' }, align:'center' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initRetail() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,246 @@ |
|||||||
|
<!-- create ji sheng hua--> |
||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入条码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择客户" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联单据" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联单据" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="用于销售出库单据的退货。销售退货单可以由销售出库单转过来,也可以单独创建。" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '销售退货入库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<sale-back-modal ref="modalForm" @ok="modalFormOk"></sale-back-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import SaleBackModal from './modules/SaleBackModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "SaleBackList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
SaleBackModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "入库", |
||||||
|
subType: "销售退货", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '客户', dataIndex: 'organName',width:120, align:"center", ellipsis:true}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:"center", |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:"center", ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:"center", }, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:"center", ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:"center", }, |
||||||
|
{ title: '含税合计', dataIndex: 'totalTaxLastMoney',width:80, align:"center", |
||||||
|
customRender:function (text,record,index) { |
||||||
|
return (record.discountMoney + record.discountLastMoney).toFixed(2); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '待退金额', dataIndex: 'needBackMoney',width:80, align:"center", |
||||||
|
customRender:function (text,record,index) { |
||||||
|
let needBackMoney = record.discountLastMoney + record.otherMoney |
||||||
|
return needBackMoney? needBackMoney.toFixed(2):'' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '退款', dataIndex: 'changeAmount',width:50, align:"center", }, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 160, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.initCustomer() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,245 @@ |
|||||||
|
<!-- create jishenghua--> |
||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择客户" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="销售订单不涉及收款金额,销售订单可以转销售出库单,但需要先对销售订单进行审核。 |
||||||
|
勾选单据之后可以进行批量操作(删除、审核、反审核)" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '销售订单')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
<a-tag v-if="status == '2'" color="cyan">完成销售</a-tag> |
||||||
|
<a-tag v-if="status == '3'" color="blue">部分销售</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<sale-order-modal ref="modalForm" @ok="modalFormOk"></sale-order-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import SaleOrderModal from './modules/SaleOrderModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "SaleOrderList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
SaleOrderModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "其它", |
||||||
|
subType: "销售订单", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '客户', dataIndex: 'organName',width:120, align:'center', ellipsis:true}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[转]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center',}, |
||||||
|
{ title: '含税合计', dataIndex: 'totalTaxLastMoney',width:80, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.discountLastMoney) { |
||||||
|
return (record.discountMoney + record.discountLastMoney).toFixed(2); |
||||||
|
} else { |
||||||
|
return record.totalPrice; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 70, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 150, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.initCustomer() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
myHandleEdit(record) { |
||||||
|
if(record.status === '0') { |
||||||
|
this.$refs.modalForm.action = "edit"; |
||||||
|
this.handleEdit(record); |
||||||
|
} else { |
||||||
|
this.$message.warning("抱歉,只有未审核的单据才能编辑!") |
||||||
|
} |
||||||
|
}, |
||||||
|
myHandleDelete(record) { |
||||||
|
if(record.status === '0') { |
||||||
|
this.handleDelete(record.id) |
||||||
|
} else { |
||||||
|
this.$message.warning("抱歉,只有未审核的单据才能删除!") |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,254 @@ |
|||||||
|
<!-- create j i s h e n g h u a --> |
||||||
|
<template> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="24"> |
||||||
|
<a-card :style="cardStyle" :bordered="false"> |
||||||
|
<!-- 查询区域 --> |
||||||
|
<div class="table-page-search-wrapper"> |
||||||
|
<!-- 搜索区域 --> |
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||||
|
<a-row :gutter="24"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入物料编码、名称、规格、型号" v-model="queryParam.materialParam"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-range-picker |
||||||
|
style="width:100%" |
||||||
|
v-model="queryParam.createTimeRange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
:placeholder="['开始时间', '结束时间']" |
||||||
|
@change="onDateChange" |
||||||
|
@ok="onDateOk" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<template v-if="toggleSearchStatus"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择客户" showSearch optionFilterProp="children" v-model="queryParam.organId"> |
||||||
|
<a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择仓库" showSearch optionFilterProp="children" v-model="queryParam.depotId"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator"> |
||||||
|
<a-select-option v-for="(item,index) in userList" :key="index" :value="item.id"> |
||||||
|
{{ item.userName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-form-item label="关联订单" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input placeholder="请输入关联订单" v-model="queryParam.linkNumber"></a-input> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</template> |
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||||
|
<a-col :md="6" :sm="24"> |
||||||
|
<a-button type="primary" @click="searchQuery">查询</a-button> |
||||||
|
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button> |
||||||
|
<a @click="handleToggleSearch" style="margin-left: 8px"> |
||||||
|
{{ toggleSearchStatus ? '收起' : '展开' }} |
||||||
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
||||||
|
</a> |
||||||
|
</a-col> |
||||||
|
</span> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</div> |
||||||
|
<!-- 操作按钮区域 --> |
||||||
|
<div class="table-operator" style="margin-top: 5px"> |
||||||
|
<a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> |
||||||
|
<a-menu-item key="2" v-if="btnEnableList.indexOf(2)>-1" @click="batchSetStatus(1)"><a-icon type="check"/>审核</a-menu-item> |
||||||
|
<a-menu-item key="3" v-if="btnEnableList.indexOf(7)>-1" @click="batchSetStatus(0)"><a-icon type="stop"/>反审核</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button> |
||||||
|
批量操作 <a-icon type="down" /> |
||||||
|
</a-button> |
||||||
|
</a-dropdown> |
||||||
|
<a-tooltip placement="left" title="销售出库单可以由销售订单转过来,也可以单独创建。 |
||||||
|
销售出库单据中的仓库列表只显示当前用户有权限的仓库。销售出库单可以使用多账户收款。 |
||||||
|
勾选单据之后可以进行批量操作(删除、审核、反审核)" slot="action"> |
||||||
|
<a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-row> |
||||||
|
<a-col :md="2.5" :sm="24"> |
||||||
|
<list-columns-setter v-model="columns" :def-columns="columns" style="float: right;"/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<div> |
||||||
|
<a-table |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
bordered |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:components="drag(columns)" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:scroll="scroll" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
||||||
|
@change="handleTableChange"> |
||||||
|
<span slot="action" slot-scope="text, record"> |
||||||
|
<a @click="myHandleDetail(record, '销售出库')">查看</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleCopyAdd(record)">复制</a> |
||||||
|
<a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" /> |
||||||
|
<a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)"> |
||||||
|
<a>删除</a> |
||||||
|
</a-popconfirm> |
||||||
|
</span> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status == '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status == '1'" color="green">已审核</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</div> |
||||||
|
<!-- table区域-end --> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<sale-out-modal ref="modalForm" @ok="modalFormOk"></sale-out-modal> |
||||||
|
<bill-detail ref="modalDetail"></bill-detail> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import SaleOutModal from './modules/SaleOutModal' |
||||||
|
import BillDetail from './dialog/BillDetail' |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
import { BillListMixin } from './mixins/BillListMixin' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
import ListColumnsSetter from '@/components/ListColumnsSetter' |
||||||
|
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin' |
||||||
|
export default { |
||||||
|
name: "SaleOutList", |
||||||
|
mixins:[JeecgListMixin,BillListMixin,tableDragResizeMixin], |
||||||
|
components: { |
||||||
|
SaleOutModal, |
||||||
|
BillDetail, |
||||||
|
JDate, |
||||||
|
ListColumnsSetter |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
// 查询条件 |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
materialParam: "", |
||||||
|
type: "出库", |
||||||
|
subType: "销售", |
||||||
|
roleType: Vue.ls.get('roleType'), |
||||||
|
organId: "", |
||||||
|
depotId: "", |
||||||
|
creator: "", |
||||||
|
linkNumber: "" |
||||||
|
}, |
||||||
|
labelCol: { |
||||||
|
span: 5 |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
span: 18, |
||||||
|
offset: 1 |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ title: '客户', dataIndex: 'organName',width:120, align:'center', ellipsis:true}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:160, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(record.linkNumber) { |
||||||
|
return text + "[订]"; |
||||||
|
} else { |
||||||
|
return text; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:220, align:'center', ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145, align:'center',}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:80, align:'center', ellipsis:true}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:80, align:'center',}, |
||||||
|
{ title: '含税合计', dataIndex: 'totalTaxLastMoney',width:80, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
return (record.discountMoney + record.discountLastMoney).toFixed(2); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '待收金额', dataIndex: 'needOutMoney',width:80, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
let needOutMoney = record.discountLastMoney + record.otherMoney |
||||||
|
return needOutMoney? needOutMoney.toFixed(2):'' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '收款', dataIndex: 'changeAmount',width:60, align:'center',}, |
||||||
|
{ title: '欠款', dataIndex: 'debt',width:60, align:'center', |
||||||
|
customRender:function (text,record,index) { |
||||||
|
let debt = record.discountLastMoney + record.otherMoney - record.changeAmount |
||||||
|
return debt? debt.toFixed(2):'' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 80, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
align:"center", width: 180, |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/erp/depotHead/list", |
||||||
|
delete: "/erp/depotHead/delete", |
||||||
|
deleteBatch: "/erp/depotHead/deleteBatch", |
||||||
|
batchSetStatusUrl: "/erp/depotHead/batchSetStatus" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.initCustomer() |
||||||
|
this.getDepotData() |
||||||
|
this.initUser() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
@import '~@assets/less/common.less' |
||||||
|
</style> |
@ -0,0 +1,112 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:title="title" |
||||||
|
:width="500" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
cancelText="关闭" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:30%;height: 35%;overflow-y: hidden"> |
||||||
|
<template slot="footer"> |
||||||
|
<a-button key="back" v-if="isReadOnly" @click="handleCancel"> |
||||||
|
关闭 |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form" id="batchSetDepot"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="仓库名称"> |
||||||
|
<a-select placeholder="请选择仓库" v-decorator="[ 'depotId', validatorRules.depotId ]" showSearch optionFilterProp="children"> |
||||||
|
<a-select-option v-for="(depot,index) in depotList" :key="index" :value="depot.id"> |
||||||
|
{{ depot.depotName }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
export default { |
||||||
|
name: "BatchSetDepot", |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
visible: false, |
||||||
|
model: {}, |
||||||
|
depotList: [], |
||||||
|
isReadOnly: false, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 5 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
validatorRules:{ |
||||||
|
depotId:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择仓库!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getDepotData() { |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res)=>{ |
||||||
|
if(res.code === 200){ |
||||||
|
this.depotList = res.data; |
||||||
|
}else{ |
||||||
|
this.$message.info(res.data); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
add () { |
||||||
|
this.edit({}); |
||||||
|
this.getDepotData() |
||||||
|
}, |
||||||
|
edit (record) { |
||||||
|
this.form.resetFields(); |
||||||
|
this.model = Object.assign({}, record); |
||||||
|
this.visible = true; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model, 'depotId')) |
||||||
|
}); |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.$emit('close'); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleOk () { |
||||||
|
const that = this; |
||||||
|
// 触发表单验证 |
||||||
|
this.form.validateFields((err, values) => { |
||||||
|
if (!err) { |
||||||
|
that.confirmLoading = true; |
||||||
|
let formData = Object.assign(this.model, values); |
||||||
|
let depotId = formData.depotId |
||||||
|
that.$emit('ok', depotId); |
||||||
|
that.confirmLoading = false; |
||||||
|
that.close(); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleCancel () { |
||||||
|
this.close() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,71 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
@cancel="handleCancel" |
||||||
|
cancelText="关闭" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<template slot="footer"> |
||||||
|
<a-button key="back" @click="handleCancel">取消</a-button> |
||||||
|
</template> |
||||||
|
<a-form :form="form"> |
||||||
|
<template> |
||||||
|
<iframe :src="billPrintUrl" width="100%" :height="height" frameborder="0" scrolling="no"></iframe> |
||||||
|
</template> |
||||||
|
<template> |
||||||
|
<a-row> |
||||||
|
<a-col> |
||||||
|
<a-form-item> |
||||||
|
<a-input v-decorator="['id']" hidden/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
|
</a-form> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
export default { |
||||||
|
name: 'BillPrintIframe', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title: "三联打印预览", |
||||||
|
width: '1550px', |
||||||
|
visible: false, |
||||||
|
billPrintUrl: '', |
||||||
|
height: "", |
||||||
|
model: {}, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
loading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
show(record, billPrintUrl, billPrintHeight) { |
||||||
|
this.height = billPrintHeight |
||||||
|
this.billPrintUrl = billPrintUrl |
||||||
|
this.visible = true; |
||||||
|
this.model = Object.assign({}, record); |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'id')) |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleCancel() { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('close'); |
||||||
|
this.visible = false; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,159 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:title="title" |
||||||
|
:width="1250" |
||||||
|
:visible="visible" |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
cancelText="关闭" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<!-- table区域-begin --> |
||||||
|
<a-table |
||||||
|
bordered |
||||||
|
ref="table" |
||||||
|
size="middle" |
||||||
|
rowKey="id" |
||||||
|
:columns="columns" |
||||||
|
:dataSource="dataSource" |
||||||
|
:pagination="ipagination" |
||||||
|
:loading="loading" |
||||||
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: getType}" |
||||||
|
:customRow="rowAction" |
||||||
|
@change="handleTableChange"> |
||||||
|
<template slot="customRenderStatus" slot-scope="status"> |
||||||
|
<a-tag v-if="status === '0'" color="red">未审核</a-tag> |
||||||
|
<a-tag v-if="status === '1'" color="green">已审核</a-tag> |
||||||
|
<a-tag v-if="status === '2' && queryParam.subType === '采购订单'" color="cyan">完成采购</a-tag> |
||||||
|
<a-tag v-if="status === '2' && queryParam.subType === '销售订单'" color="cyan">完成销售</a-tag> |
||||||
|
<a-tag v-if="status === '3' && queryParam.subType === '采购订单'" color="blue">部分采购</a-tag> |
||||||
|
<a-tag v-if="status === '3' && queryParam.subType === '销售订单'" color="blue">部分销售</a-tag> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
<!-- table区域-end --> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
||||||
|
export default { |
||||||
|
name: 'LinkBillList', |
||||||
|
mixins:[JeecgListMixin], |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title: "操作", |
||||||
|
visible: false, |
||||||
|
disableMixinCreated: true, |
||||||
|
selectedRowKeys: [], |
||||||
|
selectionRows: [], |
||||||
|
selectBillRows: [], |
||||||
|
selectBillIds: '', |
||||||
|
queryParam: { |
||||||
|
number: "", |
||||||
|
searchMaterial: "", |
||||||
|
type: "", |
||||||
|
subType: "", |
||||||
|
status: "" |
||||||
|
}, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
title: '#', |
||||||
|
dataIndex: '', |
||||||
|
key:'rowIndex', |
||||||
|
width:40, |
||||||
|
align:"center", |
||||||
|
customRender:function (t,r,index) { |
||||||
|
return parseInt(index)+1; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '', dataIndex: 'organName',width:120}, |
||||||
|
{ title: '单据编号', dataIndex: 'number',width:150}, |
||||||
|
{ title: '商品信息', dataIndex: 'materialsList',width:280, ellipsis:true, |
||||||
|
customRender:function (text,record,index) { |
||||||
|
if(text) { |
||||||
|
return text.replace(",",","); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ title: '单据日期', dataIndex: 'operTimeStr',width:145}, |
||||||
|
{ title: '操作员', dataIndex: 'userName',width:70}, |
||||||
|
{ title: '金额合计', dataIndex: 'totalPrice',width:70}, |
||||||
|
{ title: '状态', dataIndex: 'status', width: 70, align: "center", |
||||||
|
scopedSlots: { customRender: 'customRenderStatus' } |
||||||
|
} |
||||||
|
], |
||||||
|
url: { |
||||||
|
list: "/depotHead/list" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
getType: function () { |
||||||
|
return 'radio'; |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
show(type, subType, organType, status) { |
||||||
|
this.queryParam.type = type |
||||||
|
this.queryParam.subType = subType |
||||||
|
this.queryParam.status = status |
||||||
|
this.columns[1].title = organType |
||||||
|
this.model = Object.assign({}, {}); |
||||||
|
this.visible = true; |
||||||
|
this.loadData(1) |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.$emit('close'); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleCancel () { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
onSelectChange(selectedRowKeys, selectionRows) { |
||||||
|
this.selectedRowKeys = selectedRowKeys; |
||||||
|
this.selectionRows = selectionRows; |
||||||
|
}, |
||||||
|
handleOk () { |
||||||
|
this.getSelectBillRows(); |
||||||
|
this.$emit('ok', this.selectBillRows); |
||||||
|
this.close(); |
||||||
|
}, |
||||||
|
getSelectBillRows() { |
||||||
|
let dataSource = this.dataSource; |
||||||
|
let billIds = ""; |
||||||
|
this.selectBillRows = []; |
||||||
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
||||||
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
||||||
|
this.selectBillRows.push(dataSource[i]); |
||||||
|
billIds = billIds + "," + dataSource[i].id |
||||||
|
} |
||||||
|
} |
||||||
|
this.selectBillIds = billIds.substring(1); |
||||||
|
}, |
||||||
|
rowAction(record, index) { |
||||||
|
return { |
||||||
|
on: { |
||||||
|
click: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
}, |
||||||
|
dblclick: () => { |
||||||
|
let arr = [] |
||||||
|
arr.push(record.id) |
||||||
|
this.selectedRowKeys = arr |
||||||
|
this.handleOk() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,188 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:title="title" |
||||||
|
:width="650" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
cancelText="关闭" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:20%;height: 60%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="12" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户1"> |
||||||
|
<a-select style="width:185px;" placeholder="请选择结算账户" v-decorator="[ 'oneAccountId' ]" :dropdownMatchSelectWidth="false" allowClear> |
||||||
|
<a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id"> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="12" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算金额"> |
||||||
|
<a-input-number placeholder="请输入金额" v-decorator.trim="[ 'oneAccountPrice' ]" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="12" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户2"> |
||||||
|
<a-select style="width:185px;" placeholder="请选择结算账户" v-decorator="[ 'twoAccountId' ]" :dropdownMatchSelectWidth="false" allowClear> |
||||||
|
<a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id"> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="12" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算金额"> |
||||||
|
<a-input-number placeholder="请输入金额" v-decorator.trim="[ 'twoAccountPrice' ]" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="12" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户3"> |
||||||
|
<a-select style="width:185px;" placeholder="请选择结算账户" v-decorator="[ 'threeAccountId' ]" :dropdownMatchSelectWidth="false" allowClear> |
||||||
|
<a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id"> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="12" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算金额"> |
||||||
|
<a-input-number placeholder="请输入金额" v-decorator.trim="[ 'threeAccountPrice' ]" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import {getAccount} from '@/api/api' |
||||||
|
export default { |
||||||
|
name: 'ManyAccountModal', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
visible: false, |
||||||
|
model: {}, |
||||||
|
accountList: [], |
||||||
|
accountIdList: [], |
||||||
|
accountMoneyList: [], |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
form: this.$form.createForm(this) |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
edit (idStr, moneyStr) { |
||||||
|
this.initAccount() |
||||||
|
this.form.resetFields(); |
||||||
|
this.model = Object.assign({}, {}); |
||||||
|
let idList = [], moneyList = [] |
||||||
|
if(idStr && idStr.indexOf(',')>-1) { |
||||||
|
idList = idStr.split(",") |
||||||
|
moneyList = moneyStr.split(",") |
||||||
|
} else { |
||||||
|
idList = idStr |
||||||
|
moneyList = moneyStr |
||||||
|
} |
||||||
|
if(idList[0]) {this.model.oneAccountId = idList[0]-0} |
||||||
|
if(idList[1]) {this.model.twoAccountId = idList[1]-0} |
||||||
|
if(idList[2]) {this.model.threeAccountId = idList[2]-0} |
||||||
|
if(moneyList[0]) {this.model.oneAccountPrice = Math.abs(moneyList[0])} |
||||||
|
if(moneyList[1]) {this.model.twoAccountPrice = Math.abs(moneyList[1])} |
||||||
|
if(moneyList[2]) {this.model.threeAccountPrice = Math.abs(moneyList[2])} |
||||||
|
this.visible = true; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'oneAccountId','oneAccountPrice', |
||||||
|
'twoAccountId','twoAccountPrice','threeAccountId','threeAccountPrice')) |
||||||
|
}); |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.$emit('close'); |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
handleOk () { |
||||||
|
const that = this; |
||||||
|
// 触发表单验证 |
||||||
|
this.form.validateFields((err, values) => { |
||||||
|
if (!err) { |
||||||
|
let allPrice = 0 |
||||||
|
that.confirmLoading = true; |
||||||
|
that.accountIdList = [] |
||||||
|
that.accountMoneyList = [] |
||||||
|
let formData = Object.assign(this.model, values); |
||||||
|
if(formData.oneAccountId!==undefined) { |
||||||
|
that.accountIdList.push(formData.oneAccountId) |
||||||
|
} |
||||||
|
if(formData.twoAccountId!==undefined) { |
||||||
|
that.accountIdList.push(formData.twoAccountId) |
||||||
|
} |
||||||
|
if(formData.threeAccountId!==undefined) { |
||||||
|
that.accountIdList.push(formData.threeAccountId) |
||||||
|
} |
||||||
|
if(formData.oneAccountPrice!==undefined) { |
||||||
|
that.accountMoneyList.push(formData.oneAccountPrice) |
||||||
|
allPrice = allPrice + formData.oneAccountPrice |
||||||
|
} |
||||||
|
if(formData.twoAccountPrice!==undefined) { |
||||||
|
that.accountMoneyList.push(formData.twoAccountPrice) |
||||||
|
allPrice = allPrice + formData.twoAccountPrice |
||||||
|
} |
||||||
|
if(formData.threeAccountPrice!==undefined) { |
||||||
|
that.accountMoneyList.push(formData.threeAccountPrice) |
||||||
|
allPrice = allPrice + formData.threeAccountPrice |
||||||
|
} |
||||||
|
if(that.accountIdList.length<2 || that.accountMoneyList.length<2) { |
||||||
|
this.$message.warning('抱歉,多账户结算必须选择两个以上账户和金额!'); |
||||||
|
that.confirmLoading = false; |
||||||
|
return; |
||||||
|
} |
||||||
|
if((formData.oneAccountId && !formData.oneAccountPrice)|| |
||||||
|
(formData.twoAccountId && !formData.twoAccountPrice)|| |
||||||
|
(formData.threeAccountId && !formData.threeAccountPrice)) { |
||||||
|
this.$message.warning('抱歉,请填写结算金额!'); |
||||||
|
that.confirmLoading = false; |
||||||
|
return; |
||||||
|
} |
||||||
|
that.$emit('ok', that.accountIdList, that.accountMoneyList, allPrice); |
||||||
|
that.confirmLoading = false; |
||||||
|
that.close(); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleCancel () { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
initAccount(){ |
||||||
|
let that = this; |
||||||
|
getAccount({}).then((res)=>{ |
||||||
|
if(res && res.code === 200) { |
||||||
|
that.accountList = res.data.accountList |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,133 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import {getAction } from '@/api/manage' |
||||||
|
import {findBySelectSup, findBySelectCus, findBySelectRetail, getUserList } from '@/api/api' |
||||||
|
|
||||||
|
export const BillListMixin = { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
supList: [], |
||||||
|
cusList: [], |
||||||
|
retailList: [], |
||||||
|
userList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
importExcelUrl: function(){ |
||||||
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`; |
||||||
|
}, |
||||||
|
|
||||||
|
isBatchDelEnabled: function () { |
||||||
|
for (let i = 0; i < this.selectedRowKeys.length; i++) { |
||||||
|
if (!this.selectionRows[i].actionsEnabled.delete) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
return true; |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.removeStatusColumn() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
myHandleAdd() { |
||||||
|
this.$refs.modalForm.action = "add"; |
||||||
|
this.handleAdd(); |
||||||
|
}, |
||||||
|
myHandleCopyAdd(record) { |
||||||
|
this.$refs.modalForm.action = "copyAdd"; |
||||||
|
this.$refs.modalForm.edit(record); |
||||||
|
this.$refs.modalForm.title = "复制新增"; |
||||||
|
this.$refs.modalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
myHandleEdit(record) { |
||||||
|
if(record.status === '0') { |
||||||
|
this.$refs.modalForm.action = "edit"; |
||||||
|
this.handleEdit(record); |
||||||
|
} else { |
||||||
|
this.$message.warning("抱歉,只有未审核的单据才能编辑!") |
||||||
|
} |
||||||
|
}, |
||||||
|
myHandleDelete(record) { |
||||||
|
if(record.status === '0') { |
||||||
|
this.handleDelete(record.id) |
||||||
|
} else { |
||||||
|
this.$message.warning("抱歉,只有未审核的单据才能删除!") |
||||||
|
} |
||||||
|
}, |
||||||
|
myHandleDetail(record, type) { |
||||||
|
this.handleDetail(record, type); |
||||||
|
}, |
||||||
|
handleApprove(record) { |
||||||
|
this.$refs.modalForm.action = "approve"; |
||||||
|
this.$refs.modalForm.edit(record); |
||||||
|
this.$refs.modalForm.title = "审核"; |
||||||
|
}, |
||||||
|
searchReset() { |
||||||
|
this.queryParam = { |
||||||
|
type: this.queryParam.type, |
||||||
|
subType: this.queryParam.subType |
||||||
|
} |
||||||
|
this.loadData(1); |
||||||
|
}, |
||||||
|
onDateChange: function (value, dateString) { |
||||||
|
this.queryParam.beginTime=dateString[0]; |
||||||
|
this.queryParam.endTime=dateString[1]; |
||||||
|
}, |
||||||
|
onDateOk(value) { |
||||||
|
console.log(value); |
||||||
|
}, |
||||||
|
removeStatusColumn() { |
||||||
|
//没有审核反审核权限的时候直接移除状态列
|
||||||
|
if(this.btnEnableList.indexOf(2)===-1 && this.btnEnableList.indexOf(7)===-1) { |
||||||
|
let statusIndex = 0 |
||||||
|
for(let i=0; i<this.columns.length; i++){ |
||||||
|
if(this.columns[i].dataIndex === 'status') { |
||||||
|
statusIndex = i |
||||||
|
} |
||||||
|
} |
||||||
|
//移除状态列
|
||||||
|
this.columns.splice(statusIndex,1) |
||||||
|
} |
||||||
|
}, |
||||||
|
initSupplier() { |
||||||
|
let that = this; |
||||||
|
findBySelectSup({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.supList = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initCustomer() { |
||||||
|
let that = this; |
||||||
|
findBySelectCus({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.cusList = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initRetail() { |
||||||
|
let that = this; |
||||||
|
findBySelectRetail({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.retailList = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
getDepotData() { |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res)=>{ |
||||||
|
if(res.code === 200){ |
||||||
|
this.depotList = res.data; |
||||||
|
}else{ |
||||||
|
this.$message.info(res.data); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
initUser() { |
||||||
|
getUserList({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
this.userList = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,748 @@ |
|||||||
|
import { FormTypes, getListData } from '@/utils/JEditableTableUtil' |
||||||
|
import {findBySelectSup,findBySelectCus,findBySelectRetail,getMaterialByBarCode,findStockByDepotAndBarCode,getAccount, |
||||||
|
getPersonByNumType, getBatchNumberList} from '@/api/api' |
||||||
|
import { getAction,putAction } from '@/api/manage' |
||||||
|
import { getMpListShort, getNowFormatDateTime } from "@/utils/util" |
||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
export const BillModalMixin = { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
action: '', |
||||||
|
manyAccountBtnStatus: false, |
||||||
|
supList: [], |
||||||
|
cusList: [], |
||||||
|
retailList: [], |
||||||
|
personList: { |
||||||
|
options: [], |
||||||
|
value: '' |
||||||
|
}, |
||||||
|
depotList: [], |
||||||
|
accountList: [], |
||||||
|
accountIdList: [], |
||||||
|
accountMoneyList: [], |
||||||
|
billUnitPirce: '', |
||||||
|
scanBarCode: '', |
||||||
|
scanStatus: true, |
||||||
|
isTenant: false, |
||||||
|
spans: { |
||||||
|
labelCol1: {span: 2}, |
||||||
|
wrapperCol1: {span: 22}, |
||||||
|
//1_5: 分为1.5列(相当于占了2/3)
|
||||||
|
labelCol1_5: { span: 3 }, |
||||||
|
wrapperCol1_5: { span: 21 }, |
||||||
|
labelCol2: {span: 4}, |
||||||
|
wrapperCol2: {span: 20}, |
||||||
|
labelCol3: {span: 6}, |
||||||
|
wrapperCol3: {span: 18}, |
||||||
|
labelCol6: {span: 12}, |
||||||
|
wrapperCol6: {span: 12} |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
created () { |
||||||
|
// this.isTenant = userInfo.id === userInfo.tenantId? true:false
|
||||||
|
this.isTenant = true; |
||||||
|
var that = this |
||||||
|
document.onkeydown = function (e) { |
||||||
|
var key = window.event.keyCode |
||||||
|
if (key === 13) { |
||||||
|
that.handleOk() // 触发事件
|
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
readOnly: function() { |
||||||
|
return this.action !== "add" && this.action !== "edit"; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
addInit(amountNum) { |
||||||
|
getAction('/sequence/buildNumber').then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
this.form.setFieldsValue({'number':amountNum + res.data.defaultNumber}) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'operTime':getNowFormatDateTime(), 'discount': 0, |
||||||
|
'discountMoney': 0, 'discountLastMoney': 0, 'otherMoney': 0, 'changeAmount': 0, 'debt': 0}) |
||||||
|
}) |
||||||
|
this.$nextTick(() => { |
||||||
|
getAccount({}).then((res)=>{ |
||||||
|
if(res && res.code === 200) { |
||||||
|
for (const item of res.data.accountList) { |
||||||
|
if(item.isDefault){ |
||||||
|
this.form.setFieldsValue({'accountId': Number(item.id)}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.accountIdList = [] |
||||||
|
this.accountMoneyList = [] |
||||||
|
this.manyAccountBtnStatus = false |
||||||
|
}, |
||||||
|
copyAddInit(amountNum) { |
||||||
|
getAction('/sequence/buildNumber').then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
this.form.setFieldsValue({'number':amountNum + res.data.defaultNumber}) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'operTime':getNowFormatDateTime()}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** 查询某个tab的数据 */ |
||||||
|
requestSubTableData(url, params, tab, success) { |
||||||
|
tab.loading = true |
||||||
|
getAction(url, params).then(res => { |
||||||
|
if(res && res.code === 200){ |
||||||
|
tab.dataSource = res.data.rows |
||||||
|
for(let i=0; i<tab.dataSource.length; i++){ |
||||||
|
let info = tab.dataSource[i] |
||||||
|
this.changeColumnShow(info) |
||||||
|
} |
||||||
|
typeof success === 'function' ? success(res) : '' |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
tab.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
//改变字段的状态,1-显示 0-隐藏
|
||||||
|
changeFormTypes(columns, key, type) { |
||||||
|
for(let i=0; i<columns.length; i++){ |
||||||
|
if(columns[i].key === key) { |
||||||
|
if(type){ |
||||||
|
if(key === 'snList' || key === 'batchNumber') { |
||||||
|
if(this.prefixNo === 'LSCK' || this.prefixNo === 'CGTH' || this.prefixNo === 'XSCK' || this.prefixNo === 'QTCK') { |
||||||
|
columns[i].type = FormTypes.popupJsh //显示
|
||||||
|
} else { |
||||||
|
columns[i].type = FormTypes.input //显示
|
||||||
|
} |
||||||
|
} else if(key === 'expirationDate') { |
||||||
|
if(this.prefixNo === 'LSTH' || this.prefixNo === 'CGRK' || this.prefixNo === 'XSTH' || this.prefixNo === 'QTRK') { |
||||||
|
columns[i].type = FormTypes.date //显示
|
||||||
|
} else { |
||||||
|
columns[i].type = FormTypes.normal //显示
|
||||||
|
} |
||||||
|
} else { |
||||||
|
columns[i].type = FormTypes.normal //显示
|
||||||
|
} |
||||||
|
} else { |
||||||
|
columns[i].type = FormTypes.hidden //隐藏
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
initSupplier() { |
||||||
|
let that = this; |
||||||
|
findBySelectSup({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.supList = res; |
||||||
|
// this.form.setFieldsValue({'organId': Number(that.supList[0].id)})
|
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initCustomer() { |
||||||
|
let that = this; |
||||||
|
findBySelectCus({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.cusList = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initRetail() { |
||||||
|
let that = this; |
||||||
|
findBySelectRetail({}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.retailList = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initSalesman() { |
||||||
|
let that = this; |
||||||
|
getPersonByNumType({type:1}).then((res)=>{ |
||||||
|
if(res) { |
||||||
|
that.personList.options = res; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initDepot() { |
||||||
|
let that = this; |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res) => { |
||||||
|
if(res.code === 200){ |
||||||
|
let arr = res.data |
||||||
|
for(let item of that.materialTable.columns){ |
||||||
|
if(item.key == 'depotId' || item.key == 'anotherDepotId') { |
||||||
|
item.options = [] |
||||||
|
for(let i=0; i<arr.length; i++) { |
||||||
|
let depotInfo = {}; |
||||||
|
depotInfo.value = arr[i].id + '' //注意-此处value必须为字符串格式
|
||||||
|
depotInfo.text = arr[i].depotName |
||||||
|
depotInfo.title = arr[i].depotName |
||||||
|
item.options.push(depotInfo) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
initAccount(){ |
||||||
|
let that = this; |
||||||
|
getAccount({}).then((res)=>{ |
||||||
|
if(res && res.code === 200) { |
||||||
|
let list = res.data.accountList |
||||||
|
list.splice(0,0,{id: 0, name: '多账户'}) |
||||||
|
that.accountList = list |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleManyAccount(){ |
||||||
|
this.selectAccount(0) |
||||||
|
}, |
||||||
|
selectAccount(value){ |
||||||
|
if(value === 0) { //多账户
|
||||||
|
this.$refs.manyAccountModalForm.edit(this.accountIdList, this.accountMoneyList) |
||||||
|
this.$refs.manyAccountModalForm.title = "多账户结算" |
||||||
|
this.manyAccountBtnStatus = true |
||||||
|
} else { |
||||||
|
this.accountIdList = [] |
||||||
|
this.accountMoneyList = [] |
||||||
|
this.manyAccountBtnStatus = false |
||||||
|
} |
||||||
|
}, |
||||||
|
manyAccountModalFormOk(idList, moneyList, allPrice) { |
||||||
|
this.accountIdList = idList |
||||||
|
this.accountMoneyList = moneyList |
||||||
|
let discountLastMoney = this.form.getFieldValue('discountLastMoney')-0 |
||||||
|
let otherMoney = this.form.getFieldValue('otherMoney')-0 |
||||||
|
let debt = (discountLastMoney + otherMoney - allPrice).toFixed(2) |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'changeAmount':allPrice, 'debt':debt}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
addSupplier() { |
||||||
|
this.$refs.vendorModalForm.add(); |
||||||
|
this.$refs.vendorModalForm.title = "新增供应商"; |
||||||
|
this.$refs.vendorModalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
addCustomer() { |
||||||
|
this.$refs.customerModalForm.add(); |
||||||
|
this.$refs.customerModalForm.title = "新增客户(提醒:如果找不到新添加的客户,请到用户管理检查是否分配了该客户权限)"; |
||||||
|
this.$refs.customerModalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
addMember() { |
||||||
|
this.$refs.memberModalForm.add(); |
||||||
|
this.$refs.memberModalForm.title = "新增会员"; |
||||||
|
this.$refs.memberModalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
handleBatchSetDepot() { |
||||||
|
this.$refs.batchSetDepotModalForm.add(); |
||||||
|
this.$refs.batchSetDepotModalForm.title = "批量设置仓库"; |
||||||
|
this.$refs.batchSetDepotModalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
addDepot() { |
||||||
|
this.$refs.depotModalForm.add(); |
||||||
|
this.$refs.depotModalForm.title = "新增仓库"; |
||||||
|
this.$refs.depotModalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
addAccount() { |
||||||
|
this.$refs.accountModalForm.add(); |
||||||
|
this.$refs.accountModalForm.title = "新增结算账户"; |
||||||
|
this.$refs.accountModalForm.disableSubmit = false; |
||||||
|
}, |
||||||
|
vendorModalFormOk() { |
||||||
|
this.initSupplier() |
||||||
|
}, |
||||||
|
customerModalFormOk() { |
||||||
|
this.initCustomer() |
||||||
|
}, |
||||||
|
memberModalFormOk() { |
||||||
|
this.initRetail() |
||||||
|
}, |
||||||
|
batchSetDepotModalFormOk(depotId) { |
||||||
|
this.getAllTable().then(tables => { |
||||||
|
return getListData(this.form, tables) |
||||||
|
}).then(allValues => { |
||||||
|
//获取单据明细列表信息
|
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
let barCodes = '' |
||||||
|
for(let detail of detailArr){ |
||||||
|
barCodes += detail.barCode + ',' |
||||||
|
} |
||||||
|
if(barCodes) { |
||||||
|
barCodes = barCodes.substring(0, barCodes.length-1) |
||||||
|
} |
||||||
|
let param = { |
||||||
|
barCode: barCodes, |
||||||
|
depotId: depotId, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性
|
||||||
|
prefixNo: this.prefixNo |
||||||
|
} |
||||||
|
getMaterialByBarCode(param).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
let mList = res.data |
||||||
|
//构造新的列表数组,用于存放单据明细信息
|
||||||
|
let newDetailArr = [] |
||||||
|
if(mList && mList.length) { |
||||||
|
for (let i = 0; i < detailArr.length; i++) { |
||||||
|
let item = detailArr[i] |
||||||
|
item.depotId = depotId |
||||||
|
item.stock = mList[i] ? (mList[i].stock ? mList[i].stock : 0) : 0 |
||||||
|
newDetailArr.push(item) |
||||||
|
} |
||||||
|
} else { |
||||||
|
for (let i = 0; i < detailArr.length; i++) { |
||||||
|
let item = detailArr[i] |
||||||
|
item.depotId = depotId |
||||||
|
newDetailArr.push(item) |
||||||
|
} |
||||||
|
} |
||||||
|
this.materialTable.dataSource = newDetailArr |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
depotModalFormOk() { |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
accountModalFormOk() { |
||||||
|
this.initAccount() |
||||||
|
}, |
||||||
|
onAdded(event) { |
||||||
|
const { row, target } = event |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res) => { |
||||||
|
if (res.code === 200) { |
||||||
|
let arr = res.data |
||||||
|
for (let i = 0; i < arr.length; i++) { |
||||||
|
if(arr[i].isDefault){ |
||||||
|
target.setValues([{rowKey: row.id, values: {depotId: arr[i].id+''}}]) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//单元值改变一个字符就触发一次
|
||||||
|
onValueChange(event) { |
||||||
|
let that = this |
||||||
|
const { type, row, column, value, target } = event |
||||||
|
let param,snList,batchNumber,operNumber,unitPrice,allPrice,taxRate,taxMoney,taxLastMoney |
||||||
|
switch(column.key) { |
||||||
|
case "depotId": |
||||||
|
if(row.barCode){ |
||||||
|
that.getStockByDepotBarCode(row, target) |
||||||
|
} |
||||||
|
break; |
||||||
|
case "barCode": |
||||||
|
param = { |
||||||
|
barCode: value, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性
|
||||||
|
prefixNo: this.prefixNo |
||||||
|
} |
||||||
|
getMaterialByBarCode(param).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
let mList = res.data |
||||||
|
if (value.indexOf(',') > -1) { |
||||||
|
//多个物料编码
|
||||||
|
this.$refs.materialDataTable.getValues((error, values) => { |
||||||
|
values.pop() //移除最后一行数据
|
||||||
|
let mArr = values |
||||||
|
for (let i = 0; i < mList.length; i++) { |
||||||
|
let mInfo = mList[i] |
||||||
|
this.changeColumnShow(mInfo) |
||||||
|
let mObj = this.parseInfoToObj(mInfo) |
||||||
|
mObj.depotId = mInfo.depotId |
||||||
|
mObj.stock = mInfo.stock |
||||||
|
mObj.barCode = mInfo.mBarCode |
||||||
|
mArr.push(mObj) |
||||||
|
} |
||||||
|
let taxLastMoneyTotal = 0 |
||||||
|
for (let j = 0; j < mArr.length; j++) { |
||||||
|
taxLastMoneyTotal += mArr[j].taxLastMoney-0 |
||||||
|
//组合和拆分单据给商品类型进行重新赋值
|
||||||
|
if(j===0) { |
||||||
|
mArr[0].mType = '组合件' |
||||||
|
} else { |
||||||
|
mArr[j].mType = '普通子件' |
||||||
|
} |
||||||
|
} |
||||||
|
this.materialTable.dataSource = mArr |
||||||
|
target.statisticsColumns.taxLastMoney = taxLastMoneyTotal |
||||||
|
that.autoChangePrice(target) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
//单个物料编码
|
||||||
|
findStockByDepotAndBarCode({ depotId: row.depotId, barCode: row.barCode }).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
let mArr = [] |
||||||
|
let mInfo = mList[0] |
||||||
|
this.changeColumnShow(mInfo) |
||||||
|
let mInfoEx = this.parseInfoToObj(mInfo) |
||||||
|
mInfoEx.stock = res.data.stock |
||||||
|
mInfoEx.barCode = row.barCode |
||||||
|
let mObj = { |
||||||
|
rowKey: row.id, |
||||||
|
values: mInfoEx |
||||||
|
} |
||||||
|
mArr.push(mObj) |
||||||
|
target.setValues(mArr); |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
target.autoSelectBySpecialKey('operNumber') |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
break; |
||||||
|
case "snList": |
||||||
|
snList = value |
||||||
|
if(snList) { |
||||||
|
let snArr = snList.split(',') |
||||||
|
operNumber = snArr.length |
||||||
|
taxRate = row.taxRate-0 //税率
|
||||||
|
unitPrice = row.unitPrice-0 //单价
|
||||||
|
allPrice = (unitPrice*operNumber).toFixed(2)-0 |
||||||
|
taxMoney =((taxRate*0.01)*allPrice).toFixed(2)-0 |
||||||
|
taxLastMoney = (allPrice + taxMoney).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {operNumber: operNumber, allPrice: allPrice, taxMoney: taxMoney, taxLastMoney: taxLastMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
} |
||||||
|
break; |
||||||
|
case "batchNumber": |
||||||
|
batchNumber = value |
||||||
|
getBatchNumberList({name:'', depotId: row.depotId, barCode: row.barCode, batchNumber: batchNumber}).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
if(res.data && res.data.rows) { |
||||||
|
let info = res.data.rows[0] |
||||||
|
operNumber = info.totalNum |
||||||
|
taxRate = row.taxRate-0 //税率
|
||||||
|
unitPrice = row.unitPrice-0 //单价
|
||||||
|
allPrice = (unitPrice*operNumber).toFixed(2)-0 |
||||||
|
taxMoney =((taxRate*0.01)*allPrice).toFixed(2)-0 |
||||||
|
taxLastMoney = (allPrice + taxMoney).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {expirationDate: info.expirationDateStr, operNumber: operNumber, |
||||||
|
allPrice: allPrice, taxMoney: taxMoney, taxLastMoney: taxLastMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
break; |
||||||
|
case "operNumber": |
||||||
|
operNumber = value-0 |
||||||
|
taxRate = row.taxRate-0 //税率
|
||||||
|
unitPrice = row.unitPrice-0 //单价
|
||||||
|
allPrice = (unitPrice*operNumber).toFixed(2)-0 |
||||||
|
taxMoney =((taxRate*0.01)*allPrice).toFixed(2)-0 |
||||||
|
taxLastMoney = (allPrice + taxMoney).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {allPrice: allPrice, taxMoney: taxMoney, taxLastMoney: taxLastMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
break; |
||||||
|
case "unitPrice": |
||||||
|
operNumber = row.operNumber-0 //数量
|
||||||
|
unitPrice = value-0 //单价
|
||||||
|
taxRate = row.taxRate-0 //税率
|
||||||
|
allPrice = (unitPrice*operNumber).toFixed(2)-0 |
||||||
|
taxMoney =((taxRate*0.01)*allPrice).toFixed(2)-0 |
||||||
|
taxLastMoney = (allPrice + taxMoney).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {allPrice: allPrice, taxMoney: taxMoney, taxLastMoney: taxLastMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
break; |
||||||
|
case "allPrice": |
||||||
|
operNumber = row.operNumber-0 //数量
|
||||||
|
taxRate = row.taxRate-0 //税率
|
||||||
|
allPrice = value-0 |
||||||
|
unitPrice = (allPrice/operNumber).toFixed(6)-0 //单价
|
||||||
|
taxMoney =((taxRate*0.01)*allPrice).toFixed(2)-0 |
||||||
|
taxLastMoney = (allPrice + taxMoney).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {unitPrice: unitPrice, taxMoney: taxMoney, taxLastMoney: taxLastMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
break; |
||||||
|
case "taxRate": |
||||||
|
operNumber = row.operNumber-0 //数量
|
||||||
|
allPrice = row.allPrice-0 |
||||||
|
unitPrice = row.unitPrice-0 |
||||||
|
taxRate = value-0 //税率
|
||||||
|
taxMoney =((taxRate*0.01)*allPrice).toFixed(2)-0 |
||||||
|
taxLastMoney = (allPrice + taxMoney).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {taxMoney: taxMoney, taxLastMoney: taxLastMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
break; |
||||||
|
case "taxLastMoney": |
||||||
|
operNumber = row.operNumber-0 //数量
|
||||||
|
taxLastMoney = value-0 |
||||||
|
taxRate = row.taxRate-0 //税率
|
||||||
|
unitPrice = (taxLastMoney/operNumber/(1+taxRate*0.01)).toFixed(6)-0 |
||||||
|
allPrice = (unitPrice*operNumber).toFixed(2)-0 |
||||||
|
taxMoney =(taxLastMoney-allPrice).toFixed(2)-0 |
||||||
|
target.setValues([{rowKey: row.id, values: {unitPrice: unitPrice, allPrice: allPrice, taxMoney: taxMoney}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
that.autoChangePrice(target) |
||||||
|
break; |
||||||
|
case "currentStock" :
|
||||||
|
target.setValues([{rowKey: row.id, values: {operNumber: Number(value) - Number(row.stock)}}]) |
||||||
|
break |
||||||
|
} |
||||||
|
if(value.split(',').length > 1) { |
||||||
|
this.clearKh() |
||||||
|
} |
||||||
|
}, |
||||||
|
//转为商品对象
|
||||||
|
parseInfoToObj(mInfo) { |
||||||
|
return { |
||||||
|
barCode: mInfo.mBarCode, |
||||||
|
name: mInfo.name, |
||||||
|
standard: mInfo.standard, |
||||||
|
model: mInfo.model, |
||||||
|
color: mInfo.color, |
||||||
|
materialOther: mInfo.materialOther, |
||||||
|
unit: mInfo.commodityUnit, |
||||||
|
sku: mInfo.sku, |
||||||
|
operNumber: 1, |
||||||
|
unitPrice: mInfo.billPrice, |
||||||
|
allPrice: mInfo.billPrice, |
||||||
|
taxRate: 0, |
||||||
|
taxMoney: 0, |
||||||
|
taxLastMoney: mInfo.billPrice |
||||||
|
} |
||||||
|
}, |
||||||
|
//使得型号、颜色、扩展信息、sku等为隐藏
|
||||||
|
changeColumnHide() { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'model', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'color', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'materialOther', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'sku', 0) |
||||||
|
}, |
||||||
|
//使得sku、序列号、批号、到期日等为显示
|
||||||
|
changeColumnShow(info) { |
||||||
|
if(info.model) { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'model', 1) |
||||||
|
} |
||||||
|
if(info.color) { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'color', 1) |
||||||
|
} |
||||||
|
if(info.materialOther) { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'materialOther', 1) |
||||||
|
} |
||||||
|
if(info.sku) { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'sku', 1) |
||||||
|
} |
||||||
|
if(info.enableSerialNumber === "1") { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'snList', 1) |
||||||
|
} |
||||||
|
if(info.enableBatchNumber === "1") { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 1) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 1) |
||||||
|
} |
||||||
|
}, |
||||||
|
//删除一行或多行的时候触发
|
||||||
|
onDeleted(ids, target) { |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
this.autoChangePrice(target) |
||||||
|
}, |
||||||
|
//根据仓库和物料编码查询库存
|
||||||
|
getStockByDepotBarCode(row, target){ |
||||||
|
findStockByDepotAndBarCode({ depotId: row.depotId, barCode: row.barCode }).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
console.log(res.data.stock,'res.data.stock') |
||||||
|
target.setValues([{rowKey: row.id, values: {stock: res.data.stock}}]) |
||||||
|
target.recalcAllStatisticsColumns() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//改变优惠、本次付款、欠款的值
|
||||||
|
autoChangePrice(target) { |
||||||
|
let allTaxLastMoney = target.statisticsColumns.taxLastMoney-0 |
||||||
|
let discount = this.form.getFieldValue('discount')-0 |
||||||
|
let otherMoney = this.form.getFieldValue('otherMoney')-0 |
||||||
|
let discountMoney = (discount*0.01*allTaxLastMoney).toFixed(2)-0 |
||||||
|
let discountLastMoney = (allTaxLastMoney-discountMoney).toFixed(2)-0 |
||||||
|
let changeAmountNew = (discountLastMoney + otherMoney).toFixed(2)-0 |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'discount':discount,'discountMoney':discountMoney,'discountLastMoney':discountLastMoney, |
||||||
|
'changeAmount':changeAmountNew,'debt':0}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
//改变优惠率
|
||||||
|
onKeyUpDiscount(e) { |
||||||
|
const value = e.target.value-0 |
||||||
|
let discountMoney = this.form.getFieldValue('discountMoney')-0 |
||||||
|
let discountLastMoney = this.form.getFieldValue('discountLastMoney')-0 |
||||||
|
let otherMoney = this.form.getFieldValue('otherMoney')-0 |
||||||
|
let allTaxLastMoney = (discountMoney + discountLastMoney).toFixed(2)-0 |
||||||
|
let discountMoneyNew = (allTaxLastMoney*value*0.01).toFixed(2)-0 |
||||||
|
let discountLastMoneyNew = (allTaxLastMoney - discountMoneyNew).toFixed(2)-0 |
||||||
|
let changeAmountNew = (discountLastMoneyNew + otherMoney).toFixed(2)-0 |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'discountMoney':discountMoneyNew,'discountLastMoney':discountLastMoneyNew, |
||||||
|
'changeAmount':changeAmountNew,'debt':0}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
//改变付款优惠
|
||||||
|
onKeyUpDiscountMoney(e) { |
||||||
|
const value = e.target.value-0 |
||||||
|
let discount = this.form.getFieldValue('discount')-0 |
||||||
|
let discountLastMoney = this.form.getFieldValue('discountLastMoney')-0 |
||||||
|
let otherMoney = this.form.getFieldValue('otherMoney')-0 |
||||||
|
if(discount !== 100) { |
||||||
|
let allTaxLastMoney = (discountLastMoney/(1-discount/100)).toFixed(2)-0 |
||||||
|
let discountNew = (value/allTaxLastMoney*100).toFixed(2)-0 |
||||||
|
let discountLastMoneyNew = (allTaxLastMoney - value).toFixed(2)-0 |
||||||
|
let changeAmountNew = (discountLastMoneyNew + otherMoney).toFixed(2)-0 |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'discount':discountNew,'discountLastMoney':discountLastMoneyNew, |
||||||
|
'changeAmount':changeAmountNew,'debt':0}) |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
//其它费用
|
||||||
|
onKeyUpOtherMoney(e) { |
||||||
|
const value = e.target.value-0 |
||||||
|
let discountLastMoney = this.form.getFieldValue('discountLastMoney')-0 |
||||||
|
let changeAmountNew = (discountLastMoney + value).toFixed(2)-0 |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'changeAmount':changeAmountNew, 'debt':0}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
//改变本次付款
|
||||||
|
onKeyUpChangeAmount(e) { |
||||||
|
const value = e.target.value-0 |
||||||
|
let discountLastMoney = this.form.getFieldValue('discountLastMoney')-0 |
||||||
|
let otherMoney = this.form.getFieldValue('otherMoney')-0 |
||||||
|
let debtNew = (discountLastMoney + otherMoney - value).toFixed(2)-0 |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'debt':debtNew}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
scanEnter() { |
||||||
|
this.scanStatus = false |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.scanBarCode.focus() |
||||||
|
}) |
||||||
|
}, |
||||||
|
//扫码之后回车
|
||||||
|
scanPressEnter() { |
||||||
|
if(this.scanBarCode) { |
||||||
|
this.getAllTable().then(tables => { |
||||||
|
return getListData(this.form, tables) |
||||||
|
}).then(allValues => { |
||||||
|
let param = { |
||||||
|
barCode: this.scanBarCode, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性
|
||||||
|
prefixNo: this.prefixNo |
||||||
|
} |
||||||
|
getMaterialByBarCode(param).then((res) => { |
||||||
|
if (res && res.code === 200) { |
||||||
|
let hasFinished = false |
||||||
|
let allLastMoney = 0 |
||||||
|
let allTaxLastMoney = 0 |
||||||
|
//获取单据明细列表信息
|
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
//构造新的列表数组,用于存放单据明细信息
|
||||||
|
let newDetailArr = [] |
||||||
|
for(let detail of detailArr){ |
||||||
|
if(detail.barCode) { |
||||||
|
//如果物料编码重复,就在给原来的数量加1
|
||||||
|
if(detail.barCode === this.scanBarCode) { |
||||||
|
detail.operNumber = (detail.operNumber-0)+1 |
||||||
|
//由于改变了商品数量,需要同时更新相关金额和价税合计
|
||||||
|
let taxRate = detail.taxRate-0 //税率
|
||||||
|
let unitPrice = detail.unitPrice-0 //单价
|
||||||
|
detail.allPrice = (unitPrice*detail.operNumber).toFixed(2)-0 |
||||||
|
detail.taxMoney = ((taxRate*0.01)*detail.allPrice).toFixed(2)-0 |
||||||
|
detail.taxLastMoney = (detail.allPrice + detail.taxMoney).toFixed(2)-0 |
||||||
|
hasFinished = true |
||||||
|
} |
||||||
|
newDetailArr.push(detail) |
||||||
|
} |
||||||
|
} |
||||||
|
if(!hasFinished) { |
||||||
|
//将扫码的物料编码对应的商品加入列表
|
||||||
|
let item = {} |
||||||
|
item.barCode = this.scanBarCode |
||||||
|
let mList = res.data |
||||||
|
if(mList && mList.length>0) { |
||||||
|
let mInfo = mList[0] |
||||||
|
this.changeColumnShow(mInfo) |
||||||
|
item.depotId = mInfo.depotId |
||||||
|
item.name = mInfo.name |
||||||
|
item.standard = mInfo.standard |
||||||
|
item.model = mInfo.model |
||||||
|
item.color = mInfo.color |
||||||
|
item.materialOther = mInfo.materialOther |
||||||
|
item.stock = mInfo.stock |
||||||
|
item.unit = mInfo.commodityUnit |
||||||
|
item.sku = mInfo.sku |
||||||
|
item.operNumber = 1 |
||||||
|
item.unitPrice = mInfo.billPrice |
||||||
|
item.allPrice = mInfo.billPrice |
||||||
|
item.taxRate = 0 |
||||||
|
item.taxMoney = 0 |
||||||
|
item.taxLastMoney = mInfo.billPrice |
||||||
|
newDetailArr.push(item) |
||||||
|
} else { |
||||||
|
this.$message.warning('抱歉,此物料编码不存在商品信息!'); |
||||||
|
} |
||||||
|
} |
||||||
|
//组合和拆分单据给商品类型进行重新赋值
|
||||||
|
for(let i=0; i< newDetailArr.length; i++) { |
||||||
|
if(i===0) { |
||||||
|
newDetailArr[0].mType = '组合件' |
||||||
|
} else { |
||||||
|
newDetailArr[i].mType = '普通子件' |
||||||
|
} |
||||||
|
} |
||||||
|
this.materialTable.dataSource = newDetailArr |
||||||
|
//更新优惠后金额、本次付款等信息
|
||||||
|
for(let newDetail of newDetailArr){ |
||||||
|
allLastMoney = allLastMoney + (newDetail.allPrice-0) |
||||||
|
allTaxLastMoney = allTaxLastMoney + (newDetail.taxLastMoney-0) |
||||||
|
} |
||||||
|
let discount = this.form.getFieldValue('discount')-0 |
||||||
|
let otherMoney = this.form.getFieldValue('otherMoney')-0 |
||||||
|
let discountMoney = (discount*0.01*allTaxLastMoney).toFixed(2)-0 |
||||||
|
let discountLastMoney = (allTaxLastMoney-discountMoney).toFixed(2)-0 |
||||||
|
let changeAmountNew = (discountLastMoney + otherMoney).toFixed(2)-0 |
||||||
|
if(this.prefixNo === 'LSCK' || this.prefixNo === 'LSTH') { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'changeAmount':allLastMoney,'getAmount':allLastMoney,'backAmount':0}) |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({'discount':discount,'discountMoney':discountMoney,'discountLastMoney':discountLastMoney, |
||||||
|
'changeAmount':changeAmountNew,'debt':0}) |
||||||
|
}); |
||||||
|
} |
||||||
|
//置空扫码的内容
|
||||||
|
this.scanBarCode = '' |
||||||
|
this.$refs.scanBarCode.focus() |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
stopScan() { |
||||||
|
this.scanStatus = true |
||||||
|
this.scanBarCode = '' |
||||||
|
}, |
||||||
|
//清空空行
|
||||||
|
clearKh() { |
||||||
|
this.getAllTable().then(tables => { |
||||||
|
let inputValues = tables[0].inputValues
|
||||||
|
let ids = []
|
||||||
|
inputValues.forEach((item) => { |
||||||
|
if(!item.barCode && !item.operNumber) { |
||||||
|
ids.push(item.id) |
||||||
|
} |
||||||
|
}) |
||||||
|
tables[0].removeRows(ids) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,239 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
:dragSort="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品条码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getMpListShort } from "@/utils/util" |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "AllocationOutModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
DepotModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'DBCK', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true }, |
||||||
|
{ title: '调入仓库', key: 'anotherDepotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], allowSearch:true}, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择类型!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '出库' |
||||||
|
billMain.subType = '调拨' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,258 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品条码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import { getMpListShort } from "@/utils/util" |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "AssembleModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
DepotModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'ZZD', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '商品类型',key: 'mType',width:'7%', type: FormTypes.normal }, |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true}, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择类型!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.model.debt = (this.model.discountLastMoney - this.model.changeAmount).toFixed(2) |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount','debt')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '其它' |
||||||
|
billMain.subType = '组装单' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
onAdded(event) { |
||||||
|
const { row, target } = event |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res) => { |
||||||
|
if (res.code === 200) { |
||||||
|
let arr = res.data |
||||||
|
for (let i = 0; i < arr.length; i++) { |
||||||
|
if(arr[i].isDefault){ |
||||||
|
target.setValues([{rowKey: row.id, values: {depotId: arr[i].id+''}}]) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
if(target.rows.length>=2) { |
||||||
|
target.setValues([{rowKey: row.id, values: {mType: '普通子件'}}]) |
||||||
|
} else { |
||||||
|
target.setValues([{rowKey: row.id, values: {mType: '组合件'}}]) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,257 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品条码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import { getMpListShort } from "@/utils/util" |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "DisassembleModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
DepotModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'CXD', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '商品类型',key: 'mType',width:'7%', type: FormTypes.normal }, |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true}, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择类型!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '其它' |
||||||
|
billMain.subType = '拆卸单' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
onAdded(event) { |
||||||
|
const { row, target } = event |
||||||
|
getAction('/depot/findDepotByCurrentUser').then((res) => { |
||||||
|
if (res.code === 200) { |
||||||
|
let arr = res.data |
||||||
|
for (let i = 0; i < arr.length; i++) { |
||||||
|
if(arr[i].isDefault){ |
||||||
|
target.setValues([{rowKey: row.id, values: {depotId: arr[i].id+''}}]) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
if(target.rows.length>=2) { |
||||||
|
target.setValues([{rowKey: row.id, values: {mType: '普通子件'}}]) |
||||||
|
} else { |
||||||
|
target.setValues([{rowKey: row.id, values: {mType: '组合件'}}]) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,287 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联单据"> |
||||||
|
<a-input-search placeholder="请选择关联单据" v-decorator="[ 'linkNumber' ]" @search="onSearchLinkNumber" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
:dragSort="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品物料编码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品物料编码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<link-bill-list ref="linkBillList" @ok="linkBillListOk"></link-bill-list> |
||||||
|
<vendor-modal ref="vendorModalForm" @ok="vendorModalFormOk"></vendor-modal> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import LinkBillList from '../dialog/LinkBillList' |
||||||
|
import VendorModal from '../../system/modules/VendorModal' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getMpListShort } from "@/utils/util" |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "OtherInModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
VendorModal, |
||||||
|
DepotModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate, |
||||||
|
LinkBillList, |
||||||
|
VNodes: { |
||||||
|
functional: true, |
||||||
|
render: (h, ctx) => ctx.props.vnodes, |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'QTRK', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true }, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '实存', key: 'currentStock', width: '4%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号请用逗号隔开', |
||||||
|
validateRules: [{ pattern: /^\S{1,100}$/, message: '请小于100位字符' }] |
||||||
|
}, |
||||||
|
{ title: '批号', key: 'batchNumber', width: '5%', type: FormTypes.input }, |
||||||
|
{ title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber,readonly:true, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择类型!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'snList', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 0) |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'linkNumber', 'operTime', 'number', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initSupplier() |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
onSearchLinkNumber() { |
||||||
|
this.$refs.linkBillList.show('复盘', '盘点') |
||||||
|
this.$refs.linkBillList.title = "请选择盘点复盘" |
||||||
|
}, |
||||||
|
linkBillListOk(selectBillRows) { |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'preNumber', 1) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'finishNumber', 1) |
||||||
|
if(selectBillRows && selectBillRows.length>0) { |
||||||
|
let record = selectBillRows[0] |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({ |
||||||
|
'linkNumber': record.linkNumber, |
||||||
|
'linkNumber': record.number, |
||||||
|
'remark': record.remark, |
||||||
|
'discountLastMoney': record.totalPrice, |
||||||
|
'changeAmount': record.totalPrice |
||||||
|
}) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: record.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
this.requestSubTableDataEx(this.url.detailList, params, this.materialTable); |
||||||
|
} |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '其它' |
||||||
|
billMain.subType = '盘点复盘' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,269 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商"> |
||||||
|
<a-select placeholder="选择供应商" v-decorator="[ 'organId' ]" |
||||||
|
:dropdownMatchSelectWidth="false" showSearch optionFilterProp="children"> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0;" /> |
||||||
|
<div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" |
||||||
|
@mousedown="e => e.preventDefault()" @click="addSupplier"><a-icon type="plus" /> 新增供应商</div> |
||||||
|
</div> |
||||||
|
<a-select-option v-for="(item,index) in supList" :key="index" :value="Number(item.id)"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
:dragSort="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品物料编码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品物料编码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<vendor-modal ref="vendorModalForm" @ok="vendorModalFormOk"></vendor-modal> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import VendorModal from '../../system/modules/VendorModal' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getMpListShort } from "@/utils/util" |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "OtherInModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
VendorModal, |
||||||
|
DepotModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate, |
||||||
|
VNodes: { |
||||||
|
functional: true, |
||||||
|
render: (h, ctx) => ctx.props.vnodes, |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'QTRK', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true}, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号请用逗号隔开', |
||||||
|
validateRules: [{ pattern: /^\S{1,100}$/, message: '请小于100位字符' }] |
||||||
|
}, |
||||||
|
{ title: '批号', key: 'batchNumber', width: '5%', type: FormTypes.input }, |
||||||
|
{ title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择类型!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'snList', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 0) |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initSupplier() |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '入库' |
||||||
|
billMain.subType = '其它' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,267 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户"> |
||||||
|
<a-select placeholder="选择客户" v-decorator="[ 'organId' ]" |
||||||
|
:dropdownMatchSelectWidth="false" showSearch optionFilterProp="children"> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0;" /> |
||||||
|
<div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" |
||||||
|
@mousedown="e => e.preventDefault()" @click="addCustomer"><a-icon type="plus" /> 新增客户</div> |
||||||
|
</div> |
||||||
|
<a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"></a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
:dragSort="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品条码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<customer-modal ref="customerModalForm" @ok="customerModalFormOk"></customer-modal> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import CustomerModal from '../../system/modules/CustomerModal' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getMpListShort } from "@/utils/util" |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "OtherOutModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
CustomerModal, |
||||||
|
DepotModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate, |
||||||
|
VNodes: { |
||||||
|
functional: true, |
||||||
|
render: (h, ctx) => ctx.props.vnodes, |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'QTCK', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true }, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '序列号', key: 'snList', width: '12%', type: FormTypes.popupJsh, kind: 'sn', multi: true }, |
||||||
|
{ title: '批号', key: 'batchNumber', width: '7%', type: FormTypes.popupJsh, kind: 'batch', multi: false }, |
||||||
|
{ title: '有效期', key: 'expirationDate',width: '6%', type: FormTypes.normal }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
type:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择类型!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'snList', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 0) |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initCustomer() |
||||||
|
this.initDepot() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '出库' |
||||||
|
billMain.subType = '其它' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,404 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
style="top:5%;height: 100%;overflow-y: hidden"> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商"> |
||||||
|
<a-select placeholder="选择供应商" v-decorator="[ 'organId', validatorRules.organId ]" |
||||||
|
:dropdownMatchSelectWidth="false" showSearch optionFilterProp="children"> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0;" /> |
||||||
|
<div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" |
||||||
|
@mousedown="e => e.preventDefault()" @click="addSupplier"><a-icon type="plus" /> 新增供应商</div> |
||||||
|
</div> |
||||||
|
<a-select-option v-for="(item,index) in supList" :key="index" :value="Number(item.id)"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号"> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联单据"> |
||||||
|
<a-input-search placeholder="请选择关联单据" v-decorator="[ 'linkNumber' ]" @search="onSearchLinkNumber" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
:dragSort="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted"> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入"> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input placeholder="请扫码商品条码并回车" v-model="scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float:left;"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting"/>批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus"/>新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left:10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠率"> |
||||||
|
<a-input style="width:185px;" placeholder="请输入优惠率" v-decorator.trim="[ 'discount' ]" suffix="%" @keyup="onKeyUpDiscount"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="退款优惠"> |
||||||
|
<a-input placeholder="请输入付款优惠" v-decorator.trim="[ 'discountMoney' ]" @keyup="onKeyUpDiscountMoney"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠后金额"> |
||||||
|
<a-input placeholder="请输入优惠后金额" v-decorator.trim="[ 'discountLastMoney' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用"> |
||||||
|
<a-input placeholder="请输入其它费用" v-decorator.trim="[ 'otherMoney' ]" @keyup="onKeyUpOtherMoney"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户"> |
||||||
|
<a-select style="width:185px;" placeholder="选择结算账户" v-decorator="[ 'accountId']" |
||||||
|
:dropdownMatchSelectWidth="false" allowClear @select="selectAccount"> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0;" /> |
||||||
|
<div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" |
||||||
|
@mousedown="e => e.preventDefault()" @click="addAccount"><a-icon type="plus" /> 新增结算账户</div> |
||||||
|
</div> |
||||||
|
<a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id"> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
<a-tooltip title="多账户明细"> |
||||||
|
<a-button type="default" icon="folder" style="margin-left: 8px;" size="small" v-show="manyAccountBtnStatus" @click="handleManyAccount"/> |
||||||
|
</a-tooltip> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次退款"> |
||||||
|
<a-input placeholder="请输入本次退款" v-decorator.trim="[ 'changeAmount' ]" @keyup="onKeyUpChangeAmount" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款"> |
||||||
|
<a-input placeholder="请输入本次欠款" v-decorator.trim="[ 'debt' ]" :readOnly="true"/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件"> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<many-account-modal ref="manyAccountModalForm" @ok="manyAccountModalFormOk"></many-account-modal> |
||||||
|
<link-bill-list ref="linkBillList" @ok="linkBillListOk"></link-bill-list> |
||||||
|
<vendor-modal ref="vendorModalForm" @ok="vendorModalFormOk"></vendor-modal> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<account-modal ref="accountModalForm" @ok="accountModalFormOk"></account-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import ManyAccountModal from '../dialog/ManyAccountModal' |
||||||
|
import LinkBillList from '../dialog/LinkBillList' |
||||||
|
import VendorModal from '../../system/modules/VendorModal' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import AccountModal from '../../system/modules/AccountModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getMpListShort} from "@/utils/util" |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "PurchaseBackModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
ManyAccountModal, |
||||||
|
LinkBillList, |
||||||
|
VendorModal, |
||||||
|
DepotModal, |
||||||
|
AccountModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate, |
||||||
|
VNodes: { |
||||||
|
functional: true, |
||||||
|
render: (h, ctx) => ctx.props.vnodes, |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'CGTH', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true }, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '序列号', key: 'snList', width: '12%', type: FormTypes.popupJsh, kind: 'sn', multi: true }, |
||||||
|
{ title: '批号', key: 'batchNumber', width: '7%', type: FormTypes.popupJsh, kind: 'batch', multi: false }, |
||||||
|
{ title: '有效期', key: 'expirationDate',width: '6%', type: FormTypes.normal }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '5%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '5%', type: FormTypes.inputNumber}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '税率', key: 'taxRate', width: '4%', type: FormTypes.inputNumber,placeholder: '%'}, |
||||||
|
{ title: '税额', key: 'taxMoney', width: '5%', type: FormTypes.inputNumber, readonly: true, statistics: true }, |
||||||
|
{ title: '价税合计', key: 'taxLastMoney', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
organId:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择供应商!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
accountId:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择结算账户!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'snList', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 0) |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.model.debt = (this.model.discountLastMoney + this.model.otherMoney - this.model.changeAmount).toFixed(2) |
||||||
|
if(this.model.accountId == null) { |
||||||
|
this.model.accountId = 0 |
||||||
|
this.manyAccountBtnStatus = true |
||||||
|
this.accountIdList = this.model.accountIdList |
||||||
|
this.accountMoneyList = this.model.accountMoneyList |
||||||
|
} else { |
||||||
|
this.manyAccountBtnStatus = false |
||||||
|
} |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'linkNumber', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount','debt')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initSupplier() |
||||||
|
this.initDepot() |
||||||
|
this.initAccount() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '出库' |
||||||
|
billMain.subType = '采购退货' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = totalPrice |
||||||
|
if(billMain.accountId === 0) { |
||||||
|
billMain.accountId = '' |
||||||
|
} |
||||||
|
billMain.accountIdList = this.accountIdList.length>0 ? JSON.stringify(this.accountIdList) : "" |
||||||
|
billMain.accountMoneyList = this.accountMoneyList.length>0 ? JSON.stringify(this.accountMoneyList) : "" |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
onSearchLinkNumber() { |
||||||
|
this.$refs.linkBillList.show('入库', '采购', '供应商', "1") |
||||||
|
this.$refs.linkBillList.title = "选择采购入库" |
||||||
|
}, |
||||||
|
linkBillListOk(selectBillRows) { |
||||||
|
if(selectBillRows && selectBillRows.length>0) { |
||||||
|
let record = selectBillRows[0] |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({ |
||||||
|
'organId': record.organId, |
||||||
|
'linkNumber': record.number, |
||||||
|
'remark': record.remark, |
||||||
|
'discountLastMoney': record.totalPrice, |
||||||
|
'changeAmount': record.totalPrice |
||||||
|
}) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: record.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
this.requestSubTableDataEx(this.url.detailList, params, this.materialTable); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 查询某个tab的数据,给明细里面的价税合计赋值 */ |
||||||
|
requestSubTableDataEx(url, params, tab, success) { |
||||||
|
tab.loading = true |
||||||
|
getAction(url, params).then(res => { |
||||||
|
if(res && res.code === 200){ |
||||||
|
let list = res.data.rows |
||||||
|
let listEx = [] |
||||||
|
for(let j=0; j<list.length; j++){ |
||||||
|
let info = list[j]; |
||||||
|
info.taxMoney = 0 |
||||||
|
info.taxLastMoney = info.allPrice |
||||||
|
listEx.push(info) |
||||||
|
this.changeColumnShow(info) |
||||||
|
} |
||||||
|
tab.dataSource = listEx |
||||||
|
typeof success === 'function' ? success(res) : '' |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
tab.loading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,564 @@ |
|||||||
|
<template> |
||||||
|
<j-modal |
||||||
|
:title="title" |
||||||
|
:width="width" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:keyboard="false" |
||||||
|
:forceRender="true" |
||||||
|
v-bind:prefixNo="prefixNo" |
||||||
|
switchHelp |
||||||
|
switchFullscreen |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
wrapClassName="ant-modal-cust-warp" |
||||||
|
:id="prefixNo" |
||||||
|
style="top: 5%; height: 100%; overflow-y: hidden" |
||||||
|
> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="供应商" |
||||||
|
data-step="1" |
||||||
|
data-title="供应商" |
||||||
|
data-intro="供应商必须选择,如果发现需要选择的供应商尚未录入,可以在下拉框中点击新增供应商进行录入" |
||||||
|
> |
||||||
|
<a-select |
||||||
|
placeholder="选择供应商" |
||||||
|
v-decorator="['organId', validatorRules.organId]" |
||||||
|
:dropdownMatchSelectWidth="false" |
||||||
|
showSearch |
||||||
|
> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0" /> |
||||||
|
<div |
||||||
|
v-if="isTenant" |
||||||
|
style="padding: 4px 8px; cursor: pointer" |
||||||
|
@mousedown="(e) => e.preventDefault()" |
||||||
|
@click="addSupplier" |
||||||
|
> |
||||||
|
<a-icon type="plus" /> 新增供应商 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a-select-option v-for="(item, index) in supList" :key="index" :value="item.id"> |
||||||
|
{{ item.supplier }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期"> |
||||||
|
<j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="单据编号" |
||||||
|
data-step="2" |
||||||
|
data-title="单据编号" |
||||||
|
data-intro="单据编号自动生成、自动累加、开头是单据类型的首字母缩写,累加的规则是每次打开页面会自动占用一个新的编号" |
||||||
|
> |
||||||
|
<a-input placeholder="请输入单据编号" v-decorator.trim="['number']" :readOnly="true" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="关联订单" |
||||||
|
data-step="3" |
||||||
|
data-title="关联订单" |
||||||
|
data-intro="采购入库单据可以通过关联订单来选择已录入的订单,选择之后会自动加载订单的内容,然后继续录入仓库等信息完成单据的提交, |
||||||
|
提交之后原来的采购订单会对应的改变单据状态。另外本系统支持订单多次入库,只需选择订单之后修改对应的商品数量即可" |
||||||
|
> |
||||||
|
<a-input-search |
||||||
|
placeholder="请选择关联订单" |
||||||
|
v-decorator="['linkNumber']" |
||||||
|
@search="onSearchLinkNumber" |
||||||
|
:readOnly="true" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<j-editable-table |
||||||
|
id="billModal" |
||||||
|
:ref="refKeys[0]" |
||||||
|
:loading="materialTable.loading" |
||||||
|
:columns="materialTable.columns" |
||||||
|
:dataSource="materialTable.dataSource" |
||||||
|
:maxHeight="300" |
||||||
|
:rowNumber="false" |
||||||
|
:rowSelection="true" |
||||||
|
:actionButton="true" |
||||||
|
:dragSort="true" |
||||||
|
@valueChange="onValueChange" |
||||||
|
@added="onAdded" |
||||||
|
@deleted="onDeleted" |
||||||
|
> |
||||||
|
<template #buttonAfter> |
||||||
|
<a-row |
||||||
|
:gutter="24" |
||||||
|
style="float: left" |
||||||
|
data-step="4" |
||||||
|
data-title="扫码录入" |
||||||
|
data-intro="此功能支持扫码枪扫描商品物料编码进行录入" |
||||||
|
> |
||||||
|
<a-col v-if="scanStatus" :md="6" :sm="24"> |
||||||
|
<a-button @click="scanEnter">扫码录入</a-button> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px"> |
||||||
|
<a-input |
||||||
|
placeholder="请扫码商品物料编码并回车" |
||||||
|
v-model="scanBarCode" |
||||||
|
@pressEnter="scanPressEnter" |
||||||
|
ref="scanBarCode" |
||||||
|
/> |
||||||
|
</a-col> |
||||||
|
<a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px"> |
||||||
|
<a-button @click="stopScan">收起扫码</a-button> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row :gutter="24" style="float: left"> |
||||||
|
<a-col :md="24" :sm="24"> |
||||||
|
<a-dropdown> |
||||||
|
<a-menu slot="overlay"> |
||||||
|
<a-menu-item key="1" @click="handleBatchSetDepot"><a-icon type="setting" />批量设置</a-menu-item> |
||||||
|
<a-menu-item v-if="isTenant" key="2" @click="addDepot"><a-icon type="plus" />新增仓库</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
<a-button style="margin-left: 8px">仓库操作 <a-icon type="down" /></a-button> |
||||||
|
</a-dropdown> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-button type="primary" @click="clearKh" style="margin-left: 10px">清空空行</a-button> |
||||||
|
</template> |
||||||
|
</j-editable-table> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="24" :md="24" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }" label=""> |
||||||
|
<a-textarea :rows="1" placeholder="请输入备注" v-decorator="['remark']" style="margin-top: 8px" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="优惠率" |
||||||
|
data-step="5" |
||||||
|
data-title="优惠率" |
||||||
|
data-intro="针对单据明细中商品总金额进行优惠的比例" |
||||||
|
> |
||||||
|
<a-input |
||||||
|
style="width: 185px" |
||||||
|
placeholder="请输入优惠率" |
||||||
|
v-decorator.trim="['discount']" |
||||||
|
suffix="%" |
||||||
|
@keyup="onKeyUpDiscount" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="付款优惠" |
||||||
|
data-step="6" |
||||||
|
data-title="付款优惠" |
||||||
|
data-intro="针对单据明细中商品总金额进行优惠的金额" |
||||||
|
> |
||||||
|
<a-input |
||||||
|
placeholder="请输入付款优惠" |
||||||
|
v-decorator.trim="['discountMoney']" |
||||||
|
@keyup="onKeyUpDiscountMoney" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="优惠后金额" |
||||||
|
data-step="7" |
||||||
|
data-title="优惠后金额" |
||||||
|
data-intro="针对单据明细中商品总金额进行优惠后的金额" |
||||||
|
> |
||||||
|
<a-input placeholder="请输入优惠后金额" v-decorator.trim="['discountLastMoney']" :readOnly="true" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="其它费用" |
||||||
|
data-step="8" |
||||||
|
data-title="其它费用" |
||||||
|
data-intro="比如快递费、油费、过路费" |
||||||
|
> |
||||||
|
<a-input placeholder="请输入其它费用" v-decorator.trim="['otherMoney']" @keyup="onKeyUpOtherMoney" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="结算账户" |
||||||
|
data-step="9" |
||||||
|
data-title="结算账户" |
||||||
|
data-intro="如果在下拉框中选择多账户,则可以通过多个结算账户进行结算" |
||||||
|
> |
||||||
|
<a-select |
||||||
|
style="width: 185px" |
||||||
|
placeholder="选择结算账户" |
||||||
|
v-decorator="['accountId']" |
||||||
|
:dropdownMatchSelectWidth="false" |
||||||
|
allowClear |
||||||
|
@select="selectAccount" |
||||||
|
> |
||||||
|
<div slot="dropdownRender" slot-scope="menu"> |
||||||
|
<v-nodes :vnodes="menu" /> |
||||||
|
<a-divider style="margin: 4px 0" /> |
||||||
|
<div |
||||||
|
v-if="isTenant" |
||||||
|
style="padding: 4px 8px; cursor: pointer" |
||||||
|
@mousedown="(e) => e.preventDefault()" |
||||||
|
@click="addAccount" |
||||||
|
> |
||||||
|
<a-icon type="plus" /> 新增结算账户 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a-select-option v-for="(item, index) in accountList" :key="index" :value="item.id"> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
<a-tooltip title="多账户明细"> |
||||||
|
<a-button |
||||||
|
type="default" |
||||||
|
icon="folder" |
||||||
|
style="margin-left: 8px" |
||||||
|
size="small" |
||||||
|
v-show="manyAccountBtnStatus" |
||||||
|
@click="handleManyAccount" |
||||||
|
/> |
||||||
|
</a-tooltip> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次付款"> |
||||||
|
<a-input placeholder="请输入本次付款" v-decorator.trim="['changeAmount']" @keyup="onKeyUpChangeAmount" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="本次欠款" |
||||||
|
data-step="10" |
||||||
|
data-title="本次欠款" |
||||||
|
data-intro="欠款产生的费用,后续可以在付款单进行支付" |
||||||
|
> |
||||||
|
<a-input placeholder="请输入本次欠款" v-decorator.trim="['debt']" :readOnly="true" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> </a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="form-row" :gutter="24"> |
||||||
|
<a-col :lg="6" :md="12" :sm="24"> |
||||||
|
<a-form-item |
||||||
|
:labelCol="labelCol" |
||||||
|
:wrapperCol="wrapperCol" |
||||||
|
label="附件" |
||||||
|
data-step="11" |
||||||
|
data-title="附件" |
||||||
|
data-intro="可以上传与单据相关的图片、文档,支持多个文件" |
||||||
|
> |
||||||
|
<j-upload v-model="fileList" bizPath="bill"></j-upload> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
<many-account-modal ref="manyAccountModalForm" @ok="manyAccountModalFormOk"></many-account-modal> |
||||||
|
<link-bill-list ref="linkBillList" @ok="linkBillListOk"></link-bill-list> |
||||||
|
<vendor-modal ref="vendorModalForm" @ok="vendorModalFormOk"></vendor-modal> |
||||||
|
<depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal> |
||||||
|
<account-modal ref="accountModalForm" @ok="accountModalFormOk"></account-modal> |
||||||
|
<batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot> |
||||||
|
</j-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import ManyAccountModal from '../dialog/ManyAccountModal' |
||||||
|
import LinkBillList from '../dialog/LinkBillList' |
||||||
|
import VendorModal from '../../system/modules/VendorModal' |
||||||
|
import DepotModal from '../../system/modules/DepotModal' |
||||||
|
import AccountModal from '../../system/modules/AccountModal' |
||||||
|
import BatchSetDepot from '../dialog/BatchSetDepot' |
||||||
|
import { FormTypes } from '@/utils/JEditableTableUtil' |
||||||
|
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin' |
||||||
|
import { BillModalMixin } from '../mixins/BillModalMixin' |
||||||
|
import { getMpListShort, changeListFmtMinus } from "@/utils/util" |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
import JUpload from '@/components/jeecg/JUpload' |
||||||
|
import JDate from '@/components/jeecg/JDate' |
||||||
|
import Vue from 'vue' |
||||||
|
export default { |
||||||
|
name: "PurchaseInModal", |
||||||
|
mixins: [JEditableTableMixin, BillModalMixin], |
||||||
|
components: { |
||||||
|
ManyAccountModal, |
||||||
|
LinkBillList, |
||||||
|
VendorModal, |
||||||
|
DepotModal, |
||||||
|
AccountModal, |
||||||
|
BatchSetDepot, |
||||||
|
JUpload, |
||||||
|
JDate, |
||||||
|
VNodes: { |
||||||
|
functional: true, |
||||||
|
render: (h, ctx) => ctx.props.vnodes, |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
title:"操作", |
||||||
|
width: '100%', |
||||||
|
moreStatus: false, |
||||||
|
// 新增时子表默认添加几行空数据 |
||||||
|
addDefaultRowNum: 10, |
||||||
|
visible: false, |
||||||
|
operTimeStr: '', |
||||||
|
prefixNo: 'CGRK', |
||||||
|
fileList:[], |
||||||
|
model: {}, |
||||||
|
labelCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 8 }, |
||||||
|
}, |
||||||
|
wrapperCol: { |
||||||
|
xs: { span: 24 }, |
||||||
|
sm: { span: 16 }, |
||||||
|
}, |
||||||
|
refKeys: ['materialDataTable', ], |
||||||
|
activeKey: 'materialDataTable', |
||||||
|
materialTable: { |
||||||
|
loading: false, |
||||||
|
dataSource: [], |
||||||
|
columns: [ |
||||||
|
{ title: '仓库名称', key: 'depotId', width: '7%', type: FormTypes.select, placeholder: '请选择${title}', options: [], |
||||||
|
allowSearch:true, validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '物料编码', key: 'barCode', width: '8%', type: FormTypes.popupJsh, kind: 'material', multi: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '名称', key: 'name', width: '20%', type: FormTypes.normal }, |
||||||
|
{ title: '规格', key: 'standard', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '型号', key: 'model', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '颜色', key: 'color', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal }, |
||||||
|
{ title: '库存', key: 'stock', width: '5%', type: FormTypes.inputNumber, readonly:true }, |
||||||
|
{ title: '单位', key: 'unit', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号请用逗号隔开', |
||||||
|
validateRules: [{ pattern: /^\S{1,100}$/, message: '请小于100位字符' }] |
||||||
|
}, |
||||||
|
{ title: '批号', key: 'batchNumber', width: '5%', type: FormTypes.input }, |
||||||
|
{ title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date }, |
||||||
|
{ title: '多属性', key: 'sku', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '原数量', key: 'preNumber', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '已入库', key: 'finishNumber', width: '4%', type: FormTypes.normal }, |
||||||
|
{ title: '数量', key: 'operNumber', width: '4%', type: FormTypes.inputNumber, statistics: true, |
||||||
|
validateRules: [{ required: true, message: '${title}不能为空' }] |
||||||
|
}, |
||||||
|
{ title: '单价', key: 'unitPrice', width: '4%', type: FormTypes.inputNumber, validateRules: [{ required: true, message: '${title}不能为空' }]}, |
||||||
|
{ title: '金额', key: 'allPrice', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '税率', key: 'taxRate', width: '3%', type: FormTypes.inputNumber,placeholder: '%'}, |
||||||
|
{ title: '税额', key: 'taxMoney', width: '5%', type: FormTypes.inputNumber, readonly: true, statistics: true }, |
||||||
|
{ title: '价税合计', key: 'taxLastMoney', width: '5%', type: FormTypes.inputNumber, statistics: true }, |
||||||
|
{ title: '备注', key: 'remark', width: '5%', type: FormTypes.input } |
||||||
|
] |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
validatorRules:{ |
||||||
|
operTime:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请输入单据日期!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
organId:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择供应商!' } |
||||||
|
] |
||||||
|
}, |
||||||
|
accountId:{ |
||||||
|
rules: [ |
||||||
|
{ required: true, message: '请选择结算账户!' } |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
url: { |
||||||
|
add: '/depotHead/addDepotHeadAndDetail', |
||||||
|
edit: '/depotHead/updateDepotHeadAndDetail', |
||||||
|
detailList: '/depotItem/getDetailList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//调用完edit()方法之后会自动调用此方法 |
||||||
|
editAfter() { |
||||||
|
this.changeColumnHide() |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'snList', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'batchNumber', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'expirationDate', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'preNumber', 0) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'finishNumber', 0) |
||||||
|
if (this.action === 'add') { |
||||||
|
this.addInit(this.prefixNo) |
||||||
|
this.fileList = [] |
||||||
|
} else { |
||||||
|
this.model.operTime = this.model.operTimeStr |
||||||
|
this.model.debt = (this.model.discountLastMoney + this.model.otherMoney - this.model.changeAmount).toFixed(2) |
||||||
|
if(this.model.accountId == null) { |
||||||
|
this.model.accountId = 0 |
||||||
|
this.manyAccountBtnStatus = true |
||||||
|
this.accountIdList = this.model.accountIdList |
||||||
|
this.accountMoneyList = this.model.accountMoneyList |
||||||
|
} else { |
||||||
|
this.manyAccountBtnStatus = false |
||||||
|
} |
||||||
|
this.fileList = this.model.fileName |
||||||
|
this.$nextTick(() => { |
||||||
|
|
||||||
|
this.form.setFieldsValue(pick(this.model,'organId', 'operTime', 'number', 'linkNumber', 'remark', |
||||||
|
'discount','discountMoney','discountLastMoney','otherMoney','accountId','changeAmount','debt')) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: this.model.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
let url = this.readOnly ? this.url.detailList : this.url.detailList; |
||||||
|
this.requestSubTableData(url, params, this.materialTable); |
||||||
|
} |
||||||
|
//复制新增单据-初始化单号和日期 |
||||||
|
if(this.action === 'copyAdd') { |
||||||
|
this.model.id = '' |
||||||
|
this.model.tenantId = '' |
||||||
|
this.copyAddInit(this.prefixNo) |
||||||
|
} |
||||||
|
this.initSupplier() |
||||||
|
this.initDepot() |
||||||
|
this.initAccount() |
||||||
|
}, |
||||||
|
//提交单据时整理成formData |
||||||
|
classifyIntoFormData(allValues) { |
||||||
|
let totalPrice = 0 |
||||||
|
let billMain = Object.assign(this.model, allValues.formValue) |
||||||
|
let detailArr = allValues.tablesValue[0].values |
||||||
|
billMain.type = '入库' |
||||||
|
billMain.subType = '采购' |
||||||
|
billMain.defaultNumber = billMain.number |
||||||
|
for(let item of detailArr){ |
||||||
|
totalPrice += item.allPrice-0 |
||||||
|
} |
||||||
|
billMain.totalPrice = 0-totalPrice |
||||||
|
billMain.changeAmount = 0-billMain.changeAmount |
||||||
|
if(billMain.accountId === 0) { |
||||||
|
billMain.accountId = '' |
||||||
|
} |
||||||
|
this.accountMoneyList = changeListFmtMinus(this.accountMoneyList) |
||||||
|
billMain.accountIdList = this.accountIdList.length>0 ? JSON.stringify(this.accountIdList) : "" |
||||||
|
billMain.accountMoneyList = this.accountMoneyList.length>0 ? JSON.stringify(this.accountMoneyList) : "" |
||||||
|
if(this.fileList && this.fileList.length > 0) { |
||||||
|
billMain.fileName = this.fileList |
||||||
|
} |
||||||
|
if(this.model.id){ |
||||||
|
billMain.id = this.model.id |
||||||
|
} |
||||||
|
return { |
||||||
|
info: billMain, |
||||||
|
rows: detailArr, |
||||||
|
} |
||||||
|
}, |
||||||
|
onSearchLinkNumber() { |
||||||
|
this.$refs.linkBillList.show('其它', '采购订单', '供应商', "1,3") |
||||||
|
this.$refs.linkBillList.title = "选择采购订单" |
||||||
|
}, |
||||||
|
linkBillListOk(selectBillRows) { |
||||||
|
console.log(selectBillRows,'selectBillRows') |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'preNumber', 1) |
||||||
|
this.changeFormTypes(this.materialTable.columns, 'finishNumber', 1) |
||||||
|
if(selectBillRows && selectBillRows.length>0) { |
||||||
|
let record = selectBillRows[0] |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({ |
||||||
|
'organId': record.organId, |
||||||
|
'linkNumber': record.number, |
||||||
|
'remark': record.remark, |
||||||
|
'discountLastMoney': record.totalPrice, |
||||||
|
'changeAmount': record.totalPrice, |
||||||
|
'operTime': record.operTimeStr |
||||||
|
}) |
||||||
|
}); |
||||||
|
// 加载子表数据 |
||||||
|
let params = { |
||||||
|
headerId: record.id, |
||||||
|
mpList: getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性 |
||||||
|
} |
||||||
|
this.requestSubTableDataEx(this.url.detailList, params, this.materialTable); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 查询某个tab的数据,给明细里面的价税合计赋值 */ |
||||||
|
requestSubTableDataEx(url, params, tab, success) { |
||||||
|
tab.loading = true |
||||||
|
getAction(url, params).then(res => { |
||||||
|
if(res && res.code === 200){ |
||||||
|
let list = res.data.rows |
||||||
|
let listEx = [] |
||||||
|
let discountLastMoney = 0 |
||||||
|
for(let j=0; j<list.length; j++){ |
||||||
|
let info = list[j]; |
||||||
|
if(info.preNumber) { |
||||||
|
info.operNumber = info.preNumber - info.finishNumber |
||||||
|
// info.allPrice = info.allPrice; |
||||||
|
// info.allPrice = info.operNumber * info.unitPrice-0; |
||||||
|
discountLastMoney += info.allPrice |
||||||
|
} |
||||||
|
info.taxMoney = 0 |
||||||
|
info.taxLastMoney = info.allPrice |
||||||
|
listEx.push(info) |
||||||
|
this.changeColumnShow(info) |
||||||
|
} |
||||||
|
tab.dataSource = listEx |
||||||
|
//给优惠后金额重新赋值 |
||||||
|
if(discountLastMoney) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.form.setFieldsValue({ |
||||||
|
'discountLastMoney': discountLastMoney, |
||||||
|
'changeAmount': discountLastMoney |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
typeof success === 'function' ? success(res) : '' |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
tab.loading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
</style> |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue