wilson
/
ccl_plm-vue
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

收藏夹+demo

master
ruanqi 2 years ago
parent
59cdda80ce
commit
302017a317
3 changed files with 1937 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/api/base/properties.js
  2. 797
      src/views/modules/base/propertiesItem/propertiesItem.vue
  3. 1122
      src/views/modules/base/propertiesItem/propertiesModel.vue

18
src/api/base/properties.js
View File

@ -0,0 +1,18 @@
import { createAPI } from "@/utils/httpRequest.js";
export const propertiesItemSearch = data => createAPI(`/properties/propertiesItemSearch`,'post',data)
export const propertiesItemSave = data => createAPI(`/properties/propertiesItemSave`,'post',data)
export const propertiesItemEdit = data => createAPI(`/properties/propertiesItemEdit`,'post',data)
export const propertiesItemDelete = data => createAPI(`/properties/propertiesItemDelete`,'post',data)
export const searchItemAvailable = data => createAPI(`/properties/searchItemAvailable`,'post',data)
export const propertiesModelSearch = data => createAPI(`/properties/propertiesModelSearch`,'post',data)
export const propertiesModelSave = data => createAPI(`/properties/propertiesModelSave`,'post',data)
export const propertiesModelEdit = data => createAPI(`/properties/propertiesModelEdit`,'post',data)
export const propertiesModelDelete = data => createAPI(`/properties/propertiesModelDelete`,'post',data)
export const searchModalDetails = data => createAPI(`/properties/searchModalDetails`,'post',data)
export const saveModalDetails = data => createAPI(`/properties/saveModalDetails`,'post',data)
export const deleteModalDetails = data => createAPI(`/properties/deleteModalDetails`,'post',data) // 多选删除
export const getItemLists = data => createAPI(`/properties/getItemLists`,'post',data)
export const deleteModalDetail = data => createAPI(`/properties/deleteModalDetail`,'post',data)
export const saveItemAvailable = data => createAPI(`/properties/saveItemAvailable`,'post',data)
export const deleteItemAvailable = data => createAPI(`/properties/deleteItemAvailable`,'post',data)

797
src/views/modules/base/propertiesItem/propertiesItem.vue
View File

@ -0,0 +1,797 @@
<template>
<div class="mod-config">
<el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList()">
<el-form-item :label="'属性编码'">
<el-input v-model="searchData.itemNo" style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'属性名称'">
<el-input v-model="searchData.itemDesc" style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'属性类型'" >
<el-select filterable v-model="searchData.itemType" style="width: 120px">
<el-option label="A" value="A"></el-option>
<el-option label="B" value="B"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="' '">
<el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="primary" @click="addModal()">新增</el-button>
<download-excel
:fields="fields()"
:data="exportData"
type="xls"
:name="exportName"
:header="exportHeader"
:footer="exportFooter"
:fetch="createExportData"
:before-generate="startDownload"
:before-finish="finishDownload"
worksheet="导出信息"
class="el-button el-button--primary el-button--medium">
{{ "导出" }}
</download-excel>
</el-form-item>
</el-form>
<el-table
:height="height"
:data="dataList"
border
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
v-for="(item,index) in columnList" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:fixed="item.fixed==''?false:item.fixed"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="160"
label="操作">
<template slot-scope="scope">
<a type="text" size="small" @click="updateModal(scope.row)">修改</a>
<a type="text" size="small" v-if="scope.row.valueChooseFlag=='Y'" @click="chooseModal(scope.row)">可选值</a>
<a type="text" size="small" @click="deletePropertiesItem(scope.row)">删除</a>
</template>
</el-table-column>
</el-table>
<!-- 分页栏 -->
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<el-dialog title="属性" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="430px">
<el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
<el-form-item label="属性编码:" prop="itemNo" :rules="rules.itemNoType">
<el-input v-model="modalData.itemNo" :disabled="modalDisableFlag" style="width: 120px"></el-input>
</el-form-item>
<el-form-item label="属性名称:" prop="itemDesc" :rules="rules.itemDescType">
<el-input v-model="modalData.itemDesc" style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'值类型'" prop="valueTypeDb" :rules="rules.valueTypeDbType">
<el-select filterable v-model="modalData.valueTypeDb" style="width: 120px">
<el-option label="文本" value="T"></el-option>
<el-option label="数字" value="N"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
<el-form-item label="参照值:">
<el-input v-model="modalData.defaultValue" style="width: 120px"></el-input>
</el-form-item>
<el-form-item label="最大值:">
<el-input v-model="modalData.maxValue" type="number" style="width: 120px"></el-input>
</el-form-item>
<el-form-item label="最小值:">
<el-input v-model="modalData.minValue" type="number" style="width: 120px"></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
<el-form-item :label="'属性类型'" prop="itemType" :rules="rules.itemType">
<el-select filterable v-model="modalData.itemType" :disabled="modalDisableFlag" style="width: 120px">
<el-option label="A" value="A"></el-option>
<el-option label="B" value="B"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="'是否值可选'" prop="valueChooseFlag" :rules="rules.valueChooseFlagType">
<el-select v-model="modalData.valueChooseFlag" style="width: 80px">
<el-option label="是" value="Y"></el-option>
<el-option label="否" value="N"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-footer style="height:40px;margin-top: 20px;text-align:center">
<el-button type="primary" @click="saveData()">保存</el-button>
<el-button type="primary" @click="modalFlag = false">关闭</el-button>
</el-footer>
</el-dialog>
<el-dialog title="可选值" :close-on-click-modal="false" v-drag :visible.sync="chooseModalFlag" width="430px">
<el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
<el-form-item label="属性名称:">
<el-input v-model="chooseModalData.itemDesc" disabled style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'值类型'">
<el-select filterable v-model="chooseModalData.valueTypeDb" disabled style="width: 120px">
<el-option label="文本" value="T"></el-option>
<el-option label="数字" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="' '">
<el-button type="primary" @click="addChooseModal()">新增</el-button>
</el-form-item>
</el-form>
<el-table
:height="300"
:data="chooseTableData"
border
style="width: 100%">
<el-table-column
prop="availableValue"
header-align="center"
align="left"
min-width="200"
label="属性值">
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="100"
label="操作">
<template slot-scope="scope">
<a type="text" size="small" @click="updateChooseModal(scope.row)">修改</a>
<a type="text" size="small" @click="deleteItemAvailable(scope.row)">删除</a>
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog title="可选值维护" :close-on-click-modal="false" v-drag :visible.sync="itemModalFlag" width="215px" >
<el-form :inline="true" label-position="top" style="margin-left: 22px;margin-top: -5px;" @submit.native.prevent>
<el-form-item :label="'可选值：'">
<el-input v-model="itemData.availableValue" :type="itemFlag" style="width: 130px;"></el-input>
</el-form-item>
</el-form>
<el-footer style="height:40px;margin-top: 20px;text-align:center">
<el-button type="primary" @click="saveItemAvailable()">保存</el-button>
<el-button type="primary" @click="itemModalFlag = false">关闭</el-button>
</el-footer>
</el-dialog>
</div>
</template>
<script>
import {
propertiesItemSearch,
propertiesItemSave,
propertiesItemEdit,
propertiesItemDelete,
searchItemAvailable,
saveItemAvailable,
deleteItemAvailable,
} from "@/api/base/properties.js"
export default {
watch: {
searchData: {
deep: true,
handler: function (newV, oldV) {
this.searchData.itemNo = this.searchData.itemNo.toUpperCase()
}
},
itemData: {
deep: true,
handler: function (newV, oldV) {
this.itemData.itemNo = this.itemData.itemNo.toUpperCase()
}
},
modalData: {
deep: true,
handler: function (newV, oldV) {
this.modalData.itemNo = this.modalData.itemNo.toUpperCase()
}
},
chooseModalData: {
deep: true,
handler: function (newV, oldV) {
this.chooseModalData.itemNo = this.chooseModalData.itemNo.toUpperCase()
}
}
},
data () {
return {
// 导出 start
exportData: [],
exportName: "属性" + this.dayjs().format('YYYYMMDDHHmmss'),
exportHeader: ["属性"],
exportFooter: [],
exportList:[],
// 导出 end
searchData: {
site: this.$store.state.user.site,
itemNo: '',
itemDesc: '',
itemType:'',
page: 1,
limit: 10,
},
height: 200,
pageIndex: 1,
pageSize: 50,
totalPage: 0,
dataList: [],
chooseTableData:[],
dataListLoading: false,
dataListSelections: [],
modalFlag:false,
modalDisableFlag:false,
chooseModalFlag:false,
itemModalFlag:false,
itemFlag:'text',
itemData:{
site: this.$store.state.user.site,
itemNo:'',
valueNo:'',
availableValue:'',
itemType:'',
createdBy: this.$store.state.user.name
},
modalData:{
site: this.$store.state.user.site,
flag: '',
itemNo: '',
itemDesc: '',
valueTypeDb: '',
defaultValue: '',
valueChooseFlag: '',
createdBy: this.$store.state.user.name,
maxValue: '',
minValue: '',
itemType: '',
updateBy: this.$store.state.user.name,
},
departmentList:[],
// 展示列集
columnList: [
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueType',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'itemType',
headerAlign: "center",
align: "center",
columnLabel: '属性类型',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueType',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'itemNo',
headerAlign: "center",
align: "center",
columnLabel: '属性编码',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueType',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'itemDesc',
headerAlign: "center",
align: "center",
columnLabel: '属性名称',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueType',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'valueType',
headerAlign: "center",
align: "center",
columnLabel: '值类型',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableDefaultValue',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'defaultValue',
headerAlign: "center",
align: "right",
columnLabel: '参照值',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableMaxValue',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'maxValue',
headerAlign: "center",
align: "right",
columnLabel: '最大值',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableMinValue',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'minValue',
headerAlign: "center",
align: "right",
columnLabel: '最小值',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueChooseFlag',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'valueChooseFlag',
headerAlign: "center",
align: "center",
columnLabel: '是否值可选',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueChooseFlag',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'createdDate',
headerAlign: "center",
align: "center",
columnLabel: '创建时间',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueChooseFlag',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'createdBy',
headerAlign: "center",
align: "center",
columnLabel: '创建人',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueChooseFlag',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'updateDate',
headerAlign: "center",
align: "center",
columnLabel: '更新时间',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
{
userId: this.$store.state.user.name,
functionId: 100002001,
serialNumber: '100002001TableValueChooseFlag',
tableId: "100002001Table",
tableName: "属性表",
columnProp: 'updateBy',
headerAlign: "center",
align: "center",
columnLabel: '更新人',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
},
],
levelList:[],
chooseModalData:{
site: this.$store.state.user.site,
itemNo: '',
itemDesc: '',
itemType:'',
valueTypeDb:'',
},
rules:{
itemNoType:[
{
required: true,
message: ' ',
trigger: 'change'
}
],
itemType:[
{
required: true,
message: ' ',
trigger: 'change'
}
],
itemDescType:[
{
required: true,
message: ' ',
trigger: 'change'
}
],
valueTypeDbType:[
{
required: true,
message: ' ',
trigger: 'change'
}
],
valueChooseFlagType:[
{
required: true,
message: ' ',
trigger: 'change'
}
],
}
}
},
mounted () {
this.$nextTick(() => {
this.height = window.innerHeight - 180
})
},
created () {
this.getDataList()
},
methods: {
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
//导出excel
async createExportData() {
this.searchData.limit = -1
this.searchData.page = 1
await propertiesItemSearch(this.searchData).then(({data}) => {
this.exportList= data.rows;
})
return this.exportList;
},
startDownload() {
},
finishDownload() {
},
fields() {
let json = "{"
this.columnList.forEach((item, index) => {
if (index == this.columnList.length - 1) {
json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
} else {
json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
}
})
json += "}"
let s = eval("(" + json + ")")
return s
},
// 导出 end
// 获取数据列表
getDataList () {
this.searchData.limit = this.pageSize
this.searchData.page = this.pageIndex
propertiesItemSearch(this.searchData).then(({data}) => {
if (data.code === 0) {
this.dataList = data.page.list
this.pageIndex = data.page.currPage
this.pageSize = data.page.pageSize
this.totalPage = data.page.totalCount
}
this.dataListLoading = false
})
},
addModal(){
this.modalData = {
site: this.$store.state.user.site,
flag:'1',
itemNo:'',
itemDesc:'',
valueTypeDb:'T',
defaultValue:'',
valueChooseFlag:'N',
createdBy:this.$store.state.user.name,
maxValue:'',
minValue:'',
itemType:'A',
updateBy: this.$store.state.user.name,
};
this.modalDisableFlag = false;
this.modalFlag = true;
},
chooseModal(row){
this.chooseModalData.itemNo=row.itemNo;
this.chooseModalData.itemDesc=row.itemDesc;
this.chooseModalData.valueTypeDb=row.valueTypeDb;
this.chooseModalData.itemType=row.itemType;
searchItemAvailable(this.chooseModalData).then(({data}) => {
this.chooseTableData = data.rows
})
this.chooseModalFlag=true;
},
updateModal(row){
this.modalData = {
flag: '2',
site: this.$store.state.user.site,
itemNo: row.itemNo,
itemDesc: row.itemDesc,
valueTypeDb: row.valueTypeDb,
defaultValue: row.defaultValue,
valueChooseFlag: row.valueChooseFlag,
createdBy: this.$store.state.user.name,
maxValue: row.maxValue,
minValue: row.minValue,
itemType: row.itemType,
updateBy: this.$store.state.user.name,
};
this.modalDisableFlag = true;
this.modalFlag = true;
},
// 删除
deletePropertiesItem (row) {
this.$confirm(`是否删除这个属性?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
propertiesItemDelete(row).then(({data}) => {
if (data && data.code === '0') {
this.getDataList()
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
}
})
} else {
this.$alert(data.msg, '错误', {
confirmButtonText: '确定'
})
}
})
}).catch(() => {
})
},
saveData(){
if (this.modalData.itemNo === '' || this.modalData.itemNo == null) {
this.$alert('请输入属性编码！', '错误', {
confirmButtonText: '确定'
})
return false
}
if (this.modalData.itemDesc === '' || this.modalData.itemDesc == null) {
this.$alert('请输入属性名称！', '错误', {
confirmButtonText: '确定'
})
return false
}
if(this.modalData.flag === '1'){
propertiesItemSave(this.modalData).then(({data}) => {
if (data && data.code === '0') {
this.getDataList()
this.modalFlag = false
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
}
})
} else {
this.$alert(data.msg, '错误', {
confirmButtonText: '确定'
})
}
})
}else {
propertiesItemEdit(this.modalData).then(({data}) => {
if (data && data.code === '0') {
this.getDataList()
this.modalFlag = false
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
}
})
} else {
this.$alert(data.msg, '错误', {
confirmButtonText: '确定'
})
}
})
}
},
addChooseModal(){
this.itemFlag = this.chooseModalData.valueTypeDb === 'T'?'text':'number';
this.itemData = {
site: this.$store.state.user.site,
itemNo:this.chooseModalData.itemNo,
valueNo:0,
availableValue:'',
itemType:this.chooseModalData.itemType,
createdBy: this.$store.state.user.name
}
this.itemModalFlag = true;
},
updateChooseModal(row){
this.itemFlag= this.chooseModalData.valueTypeDb === 'T'?'text':'number';
this.itemData={
site: this.$store.state.user.site,
itemNo:this.chooseModalData.itemNo,
valueNo:row.valueNo,
availableValue:row.availableValue,
itemType:this.chooseModalData.itemType,
createdBy: row.createdBy
}
this.itemModalFlag=true;
},
saveItemAvailable(){
if(this.itemData.availableValue==''||this.itemData.availableValue==null){
this.$alert("请输入可选值！",'错误', {
confirmButtonText: '确定'
})
return false;
}
saveItemAvailable(this.itemData).then(({data}) => {
if (data && data.code === 0) {
searchItemAvailable(this.chooseModalData).then(({data}) => {
this.chooseTableData = data.rows
})
this.itemModalFlag=false
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
}
})
} else {
this.$alert(data.msg, '错误', {
confirmButtonText: '确定'
})
}
})
},
deleteItemAvailable(row){
this.$confirm(`是否删除这个可选值?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteItemAvailable(row).then(({data}) => {
if (data && data.code === 0) {
searchItemAvailable(this.chooseModalData).then(({data}) => {
this.chooseTableData = data.rows
})
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
}
})
} else {
this.$alert(data.msg, '错误', {
confirmButtonText: '确定'
})
}
})
}).catch(() => {
})
},
}
}
</script>

1122
src/views/modules/base/propertiesItem/propertiesModel.vue
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save