Skip to content

M
mes-ui
Commit 0ad3cee5 authored by renjintao's avatar renjintao
Browse files
Options

supporting

parent 6f7b2dfd
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 354 deletions
pages/technology/productMix/product/index.vue
View file @ 0ad3cee5
<template>
<div class="product-m">
<DataGrid
:columns="columns"
ref="grid"
:action="action"
:conditions="easySearch"
:type="typeInfo"
:high="false"
:span="6"
:lazy="true"
>
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入物料编号/名称" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="add">新增</Button>&nbsp;
</template>
<template slot="buttons">
<Button :icon="iconInfo" shape="circle" :title="titleInfo" @click="changeShwo"></Button>
</template>
<template slot="card" slot-scope="{row}">
<div class="body-card">
<Row class="title-i">
<Col :span="16">
<Ellipsis :text="row.name" :length="12" tooltip />
</Col>
<Col :span="8" class="btn-click">{{row.mmcode}}</Col>
</Row>
<Row class="row-down" :gutter="10">
<Col span="7">
<div class="img-i">
<img :src="downUrl +row.productUrl" v-if="row.productUrl" />
<!-- onerror="this.src='/imgicon/chan_Pin.png'" -->
<img src="@/assets/imgicon/chan_Pin.png" v-else width="100%" height="100%" />
</div>
</Col>
<Col span="17" class="c">
<div>分类：{{row.levelTitle}}</div>
<div>图号：{{row.drawingNo}}</div>
<div>主制单位：{{row.madeCompanyTitle}}</div>
<p class="a-icon">
<a @click="bom(row)">
<Icon type="md-git-merge" />BOM
</a>&nbsp;
<a @click="edit(row)">
<Icon type="md-create" />编辑
</a>&nbsp;
<a @click="remove(row)">
<Icon type="ios-trash" />删除
</a>&nbsp;
<a @click="view(row)">
<Icon type="md-document" />详情
</a>
</p>
</Col>
</Row>
</div>
</template>
<div class="product-m">
<DataGrid :columns="columns" ref="grid" :action="action" :conditions="easySearch" :type="typeInfo" :high="false" :span="6" :lazy="true" exportTitle="产品管理">
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入物料编号/名称" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="add">新增</Button>&nbsp;
</template>
<template slot="buttons">
<Button :icon="iconInfo" shape="circle" :title="titleInfo" @click="changeShwo"></Button>
</template>
<template slot="card" slot-scope="{row}">
<div class="body-card">
<Row class="title-i">
<Col :span="16">
<Ellipsis :text="row.name" :length="12" tooltip />
</Col>
<Col :span="8" class="btn-click">{{row.mmcode}}</Col>
</Row>
<Row class="row-down" :gutter="10">
<Col span="7">
<div class="img-i">
<img :src="downUrl +row.productUrl" v-if="row.productUrl" />
<!-- onerror="this.src='/imgicon/chan_Pin.png'" -->
<img src="@/assets/imgicon/chan_Pin.png" v-else width="100%" height="100%" />
</div>
</Col>
<Col span="17" class="c">
<div>分类：{{row.levelTitle}}</div>
<div>图号：{{row.drawingNo}}</div>
<div>主制单位：{{row.madeCompanyTitle}}</div>
<p class="a-icon">
<a @click="bom(row)">
<Icon type="md-git-merge" />BOM
</a>&nbsp;
<a @click="edit(row)">
<Icon type="md-create" />编辑
</a>&nbsp;
<a @click="remove(row)">
<Icon type="ios-trash" />删除
</a>&nbsp;
<a @click="view(row)">
<Icon type="md-document" />详情
</a>
</p>
</Col>
</Row>
</div>
</template>
</DataGrid>
<Modal
v-model="modal"
:title="title"
width="1200"
footer-hide
:fullscreen="fullscreen"
:mask-closable="false"
>
<component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" :parents="parent" />
<Modal v-model="modal" :title="title" width="1200" footer-hide :fullscreen="fullscreen" :mask-closable="false">
<component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" :parents="parent" />
</Modal>
</div>
</div>
</template>
<script>
import Api from "./api";
import Search from "./search";
export default {
name: "list",
components: {
Search,
},
head: {
title: "",
author: "henq",
description: "product_info 5/20/2020 3:13:51 PM",
},
props: {
parent: {
id: Number,
parentName: String,
ids: String,
bomId: Number,
name: "list",
components: {
Search,
},
head: {
title: "",
author: "henq",
description: "product_info 5/20/2020 3:13:51 PM",
},
},
data() {
return {
action: Api.index,
fullscreen: false,
easySearch: {
keys: { op: "mmcode,name", value: null },
levelId: { op: "In", value: this.id },
upId: { op: "In", value: 0 },
},
modal: false,
title: "新增",
detail: null,
downUrl: fileUrlDown,
curId: 0,
columns: [
{
key: "id",
title: this.$t("id"),
hide: true,
align: "left",
high: true,
props: {
parent: {
id: Number,
parentName: String,
ids: String,
bomId: Number,
},
{
title: this.l("name"),
key: "name",
},
data() {
return {
action: Api.index,
fullscreen: false,
easySearch: {
keys: {
op: "mmcode,name",
value: null
},
levelId: {
op: "In",
value: this.id
},
upId: {
op: "In",
value: 0
},
},
modal: false,
title: "新增",
detail: null,
downUrl: fileUrlDown,
curId: 0,
columns: [{
key: "id",
title: this.$t("id"),
hide: true,
align: "left",
high: true,
},
{
title: this.l("name"),
key: "name",
align: "left",
},
{
key: "mmcode",
title: this.l("mmcode"),
align: "center",
high: true,
},
{
key: "productUrl",
title: this.l("productUrl"),
align: "left",
high: true,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"a",
align: "left",
},
{
attrs: {
oprate: "detail",
// href: this.fileUrlPath,
// target: "_blank"
},
on: {
click: () => {
this.downFile(params.row.productUrl);
key: "mmcode",
title: this.l("mmcode"),
align: "center",
high: true,
},
{
key: "productUrl",
title: this.l("productUrl"),
align: "left",
high: true,
render: (h, params) => {
return h("div", {
class: "action"
}, [
h(
"a", {
attrs: {
oprate: "detail",
// href: this.fileUrlPath,
// target: "_blank"
},
on: {
click: () => {
this.downFile(params.row.productUrl);
},
},
},
"查看图片"
),
]);
},
},
},
"查看图片"
),
]);
},
},
{
key: "levelTitle",
title: this.l("levelTitle"),
align: "left",
high: true,
},
{
key: "drawingNo",
title: this.l("drawingNo"),
align: "right",
high: true,
},
{
key: "madeCompanyTitle",
title: this.l("madeCompanyTitle"),
align: "center",
width: 260,
high: true,
},
{
title: "操作",
key: "action",
width: 200,
align: "center",
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{
attrs: { oprate: "edit" },
on: {
click: () => this.bom(params.row),
},
key: "levelTitle",
title: this.l("levelTitle"),
align: "left",
high: true,
},
"BOM"
),
h(
"op",
{
attrs: { oprate: "edit" },
on: {
click: () => this.edit(params.row),
},
key: "drawingNo",
title: this.l("drawingNo"),
align: "right",
high: true,
},
"编辑"
),
h(
"op",
{
attrs: { oprate: "delete" },
on: { click: () => this.remove(params.row) },
key: "madeCompanyTitle",
title: this.l("madeCompanyTitle"),
align: "center",
width: 260,
high: true,
},
"删除"
),
h(
"op",
{
attrs: { oprate: "view" },
on: {
click: () => this.view(params.row),
},
title: "操作",
key: "action",
width: 200,
align: "center",
render: (h, params) => {
return h("div", {
class: "action"
}, [
h(
"op", {
attrs: {
oprate: "edit"
},
on: {
click: () => this.bom(params.row),
},
},
"BOM"
),
h(
"op", {
attrs: {
oprate: "edit"
},
on: {
click: () => this.edit(params.row),
},
},
"编辑"
),
h(
"op", {
attrs: {
oprate: "delete"
},
on: {
click: () => this.remove(params.row)
},
},
"删除"
),
h(
"op", {
attrs: {
oprate: "view"
},
on: {
click: () => this.view(params.row),
},
},
"详情"
),
]);
},
},
"详情"
),
]);
},
},
],
typeInfo: "card",
iconInfo: "md-apps",
titleInfo: "卡片模式",
};
},
mounted() {
this.$refs.grid.reload(this.easySearch);
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
changeShwo() {
//显示模式切换
if (this.typeInfo == "card") {
this.typeInfo = "table";
this.iconInfo = "md-list";
this.titleInfo = "列表模式";
} else {
this.typeInfo = "card";
this.iconInfo = "md-apps";
this.titleInfo = "卡片模式";
}
},
downFile(url) {
let url1 = this.downUrl + url;
if (url) {
window.open(url1, "_blank");
} else {
this.$Message.error("暂无图片");
}
},
ok() {
this.$refs.grid.load();
this.modal = false;
this.curId = 0;
},
search() {
this.$refs.grid.reload(this.easySearch);
},
add() {
if (this.parent.id) {
this.curId = 0;
this.title = "新增";
this.detail = () => import("./add");
this.modal = true;
this.fullscreen = false;
} else {
this.$Message.error("请先选择产品分类");
}
},
copy(id) {
this.curId = id;
this.title = "克隆";
this.detail = () => import("./add");
this.modal = true;
this.fullscreen = false;
},
view(row) {
this.curId = row.id;
this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle;
this.title = "详情";
this.detail = () => import("./detail");
this.modal = true;
this.fullscreen = false;
},
edit(row) {
this.curId = row.id;
this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle;
this.title = "编辑";
this.detail = () => import("./edit");
this.modal = true;
this.fullscreen = false;
],
typeInfo: "card",
iconInfo: "md-apps",
titleInfo: "卡片模式",
};
},
bom(row) {
this.curId = row.id;
this.parent.bomId = row.bomId;
this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle;
this.title = "BOM";
this.detail = () => import("./bom");
this.modal = true;
this.fullscreen = true;
mounted() {
this.$refs.grid.reload(this.easySearch);
},
remove(row) {
Api.delete(row.bomId).then((r) => {
if (r.success) {
this.$refs.grid.load();
this.$Message.success("删除成功");
}
});
async fetch({
store,
params
}) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
cancel() {
this.curId = 0;
this.modal = false;
},
l(key) {
let vkey = "product_info" + "." + key;
return this.$t(vkey) || key;
methods: {
changeShwo() {
//显示模式切换
if (this.typeInfo == "card") {
this.typeInfo = "table";
this.iconInfo = "md-list";
this.titleInfo = "列表模式";
} else {
this.typeInfo = "card";
this.iconInfo = "md-apps";
this.titleInfo = "卡片模式";
}
},
downFile(url) {
let url1 = this.downUrl + url;
if (url) {
window.open(url1, "_blank");
} else {
this.$Message.error("暂无图片");
}
},
ok() {
this.$refs.grid.load();
this.modal = false;
this.curId = 0;
},
search() {
this.$refs.grid.reload(this.easySearch);
},
add() {
if (this.parent.id) {
this.curId = 0;
this.title = "新增";
this.detail = () => import("./add");
this.modal = true;
this.fullscreen = false;
} else {
this.$Message.error("请先选择产品分类");
}
},
copy(id) {
this.curId = id;
this.title = "克隆";
this.detail = () => import("./add");
this.modal = true;
this.fullscreen = false;
},
view(row) {
this.curId = row.id;
this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle;
this.title = "详情";
this.detail = () => import("./detail");
this.modal = true;
this.fullscreen = false;
},
edit(row) {
this.curId = row.id;
this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle;
this.title = "编辑";
this.detail = () => import("./edit");
this.modal = true;
this.fullscreen = false;
},
bom(row) {
this.curId = row.id;
this.parent.bomId = row.bomId;
this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle;
this.title = "BOM";
this.detail = () => import("./bom");
this.modal = true;
this.fullscreen = true;
},
remove(row) {
Api.delete(row.bomId).then((r) => {
if (r.success) {
this.$refs.grid.load();
this.$Message.success("删除成功");
}
});
},
cancel() {
this.curId = 0;
this.modal = false;
},
l(key) {
let vkey = "product_info" + "." + key;
return this.$t(vkey) || key;
},
},
},
watch: {
"parent.id"(v) {
if (v) {
let data = {
levelId: { op: "In", value: this.parent.ids },
upId: { op: "In", value: 0 },
};
this.$refs.grid.reload(data);
}
watch: {
"parent.id"(v) {
if (v) {
let data = {
levelId: {
op: "In",
value: this.parent.ids
},
upId: {
op: "In",
value: 0
},
};
this.$refs.grid.reload(data);
}
},
},
},
};
</script>
<style lang="less">
.product-m {
.body-card {
border: 1px solid rgba(38, 128, 235, 1);
margin: 10px;
border-radius: 4px;
.title-i {
border-bottom: 1px solid #2680eb;
padding: 0 10px;
height: 35px;
line-height: 35px;
background: rgba(38, 128, 235, 0.2);
color: #2680eb;
.btn-click {
text-align: right;
}
}
.row-down {
padding: 10px;
.img-i {
width: 90px;
background: #eee;
height: 90px;
margin-right: 15px;
// overflow: hidden;
img {
width: 90px;
height: 90px;
.body-card {
border: 1px solid rgba(38, 128, 235, 1);
margin: 10px;
border-radius: 4px;
.title-i {
border-bottom: 1px solid #2680eb;
padding: 0 10px;
height: 35px;
line-height: 35px;
background: rgba(38, 128, 235, 0.2);
color: #2680eb;
.btn-click {
text-align: right;
}
}
.row-down {
padding: 10px;
.img-i {
width: 90px;
background: #eee;
height: 90px;
margin-right: 15px;
// overflow: hidden;
img {
width: 90px;
height: 90px;
}
}
.c div {
margin-bottom: 8px;
}
.a-icon {
text-align: right;
margin-bottom: -5px;
}
}
}
.c div {
margin-bottom: 8px;
}
.a-icon {
text-align: right;
margin-bottom: -5px;
}
}
}
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment