Commit 8270e90f authored by 仇晓婷's avatar 仇晓婷

物料

parent 036a5a5e
<template>
<div>
<div v-if="theme=='list'" class="flex fd userSelect">
<div class="fg1 users">
<dl v-for="(g,i) in group" :key="i">
<dt :class="{checked:g.opened}" class="flex fc-b">
<div class="ib fg">
<Checkbox v-model="g.checked" @on-change="checkAll(g,i)">
<span class="ml10">{{g.departmentTitle}}</span>
</Checkbox>
<!-- <span class="ml20">(<span v-text="g.children | vvv"></span>/{{g.children.length}}人)</span></div> -->
<span class="ml20">({{g.children.length}}人)</span>
</div>
<a class="op" @click="toggle(i)">
<Icon :type="g.opened?'ios-arrow-up':'ios-arrow-down'" size="24" />
</a>
</dt>
<dd
v-show="g.opened"
v-for="(li,j) in g.children"
:key="j"
@click="checkItem(i,j,li)"
:class="{checked:li.checked}"
>{{li.name}}</dd>
</dl>
</div>
<div class="footer flex">
<div v-width="50" class="fa-m fs">
<span>已选项</span>
</div>
<div class="fg">
<dl>
<dd v-for="(li,i) in checkedItems" :key="i">
<div class="flex">
<span class="fg">{{li.name}}</span>
<a @click="removeItem(li)">
<Icon type="md-close" size="16" />
</a>
</div>
</dd>
</dl>
</div>
</div>
</div>
<Select
v-else
:placeholder="placeholder"
v-model="name"
@on-change="change"
:multiple="multiple"
:departmentId="departmentId"
clearable
filterable
>
<Option
v-for="item in datas?datas:dic"
:value="item.value"
:key="item.value"
:label="item.label"
>
<div>
{{ item.label }}
<span style="color:#c3c3c3">(</span>
<span style="color:#c3c3c3" v-if="item.code">{{ item.code }}</span>
<span style="color:#c3c3c3" v-if="item.version">/ {{item.version}}</span>
<span style="color:#c3c3c3">)</span>
<br />
<span style="color:#c3c3c3" v-if="item.departmentTitle">{{ item.departmentTitle }}</span>
</div>
</Option>
</Select>
</div>
</template>
<script>
export default {
model: {
prop: "value",
event: "on-change"
},
data() {
return {
name: this.value,
data: [],
departId: "",
group: []
};
},
created() {
// let url = `${systemUrl}/user/getfordispatch_x`
// this.$api.get(url).then((r) => {
// this.data = r.result
// })
this.materiallist();
},
props: {
value: [String, Number, Array],
placeholder: {
type: String,
default: "请选择人员"
},
multiple: {
type: Boolean,
default: false
},
theme: {
type: String,
default: "select"
},
type: {
type: Number,
default: 0
},
departmentId: {
type: Number,
default: 0
},
roleTitle: {
type: String,
default: ""
},
datas: {
//自定义用户数据
type: Array,
default: null
}
},
methods: {
change(val) {
console.log(val);
let entity = {};
this.data.forEach(e => {
if (e.id == val) {
entity.name = e.name;
entity.mmcode = e.code;
entity.drawingNo = e.drawing;
entity.version = e.version;
}
});
entity.materialId = val;
this.$emit("on-change", entity);
},
// 加载物料
materiallist(id) {
let url = `${systemUrl}/material/materiallist`;
this.$api
.post(url, {
// pageIndex: 1,
departmentId: id,
type: this.type,
conditions: []
// roleTitle: this.roleTitle
// pageSize: 0
})
.then(r => {
this.data = r.result.filter(u => u.status == 3);
if (this.theme == "list") {
this.departmentGroup();
}
});
},
departmentGroup() {
var group = [];
var users = this.$u.clone(this.data);
if (this.name && this.name.length > 0) {
users.map(u => {
u.checked = this.name.indexOf(u.id) > -1;
});
}
group = this.$u.group(users, u => {
return u.departmentId;
});
var deps = [];
group.map((u, i) => {
deps.push({
departmentTitle: u[0].departmentTitle,
departmentId: u[0].departmentId,
children: u,
opened: (i = 0),
checked: false
});
});
this.group = deps;
},
toggle(i) {
this.group[i].opened = !this.group[i].opened;
// this.$set(this.group,i,this.group[i])
},
checkItem(i, j, item) {
item.checked = !item.checked;
this.group[i][j] = item;
this.$set(this.group, i, this.group[i]);
this.listSetValue();
},
removeItem(item) {
this.group.map((u, i) => {
if (u.departmentId == item.departmentId) {
u.children.map(p => {
if (p.id == item.id) {
p.checked = false;
}
});
this.$set(this.group, i, u);
}
});
this.listSetValue();
},
//list 时,设置值。
listSetValue() {
var ids = [];
this.checkedItems.map(u => {
ids.push(u.id);
});
this.$emit("on-change", ids);
},
checkAll(item, i) {
item.children.map(u => {
u.checked = item.checked;
});
this.$set(this.group, i, this.group[i]);
this.listSetValue();
},
//获取所有的选中项
getSelectItems() {
var items = [];
if (this.theme == "list") {
this.checkedItems.map(u => {
items.push(u);
});
} else {
if (!this.multiple) {
//单选时返回信息
if (this.datas && this.datas.length > 0) {
var item2 = this.datas.filter(u => u.value == this.value);
if (item2 && item2[0]) {
items.push(item2[0]);
}
} else {
var item1 = this.dic.filter(u => u.value == this.value);
if (item1 && item1[0]) {
items.push(item1[0]);
}
}
} else {
//复选时返回
if (this.datas && this.datas.length > 0) {
this.value.forEach(v => {
var item3 = this.dic.filter(u => u.value == v);
if (item3 && item3[0]) {
items.push(item3[0]);
}
});
} else {
this.value.forEach(v => {
var item = this.dic.filter(u => u.value == v);
if (item && item[0]) {
items.push(item[0]);
}
});
}
}
}
return items;
},
//获取所有选中项的名称
getSelectNames() {
var names = [];
if (this.theme == "list") {
this.checkedItems.map(u => {
items.push(u.name);
});
} else {
this.getSelectItems().forEach(v => {
names.push(v.label);
});
}
return names;
}
},
computed: {
dic() {
let result = [];
this.data.forEach(u => {
// result.push({
// value: u.id,
// label: u.userName
// })
(u.value = u.id), (u.label = u.name);
result.push(u);
});
return result;
},
checkedItems() {
var items = [];
this.group.map(u => {
u.children.map(l => {
if (l.checked) {
items.push(l);
}
});
});
return items;
}
},
filters: {
vvv: lis => {
return 3;
// return lis.filter(u=>{
// return u.checked==true
// }).lenght;
}
},
watch: {
value: {
handler(v, o) {
this.name = v;
},
deep: true
},
departmentId: {
handler(v, o) {
this.getselectuser(v);
},
deep: true
},
datas(v) {
if (v) {
//alert(JSON.stringify(v))
}
}
}
};
</script>
<style lang="less">
.userSelect {
.users {
width: 100%;
border: 1px solid #2680eb;
max-height: 420px;
overflow: auto;
font-size: 14px;
}
dl {
width: 100%;
margin-bottom: 2px;
dt,
dd {
list-style: none;
padding: 0 15px;
}
dt {
width: 100%;
background: rgba(38, 128, 235, 0.1);
height: 48px;
font-weight: bold;
line-height: 48px;
color: rgba(81, 90, 110, 1);
a.op {
height: 26px;
width: 26px;
text-align: center;
display: inline-block;
padding-top: -15px;
line-height: 100%;
margin-top: 12px;
}
a.op:hover {
color: white;
background: rgba(38, 128, 235, 1.5);
border-radius: 4px;
}
}
dt.checked {
background: rgba(38, 128, 235);
color: white;
a.op {
color: white;
}
a.op:hover {
background: white;
color: rgba(38, 128, 235);
}
}
dd {
min-width: 120px;
line-height: 32px;
height: 36px;
border-radius: 18px;
display: inline-block;
background: rgba(38, 128, 235, 0.1);
border: 2px solid transparent;
color: #515a6e;
margin: 10px;
a {
display: inline-flex;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid transparent;
justify-items: center;
align-items: center;
margin-top: 5px;
}
a:hover {
background: rgb(241, 14, 14);
color: white;
}
}
dd:hover {
// background: rgba(38, 128, 235, 1);
// border:1px solid rgba(38,128,235,0.1);
background: rgba(38, 128, 235, 0.1);
border: 2px solid rgba(38, 128, 235, 1);
// color: white;
cursor: pointer;
}
dd.checked {
border: 2px solid rgba(38, 128, 235, 1);
}
}
.footer {
margin-top: 5px;
min-height: 68px;
dl {
background: rgba(245, 246, 250, 1);
border: 1px solid rgba(220, 223, 230, 1);
opacity: 1;
border-radius: 4px;
min-height: 48px;
flex-wrap: wrap;
}
}
}
</style>
\ No newline at end of file
...@@ -20,10 +20,7 @@ ...@@ -20,10 +20,7 @@
</Col>--> </Col>-->
<Col :span="12"> <Col :span="12">
<FormItem :label="l('materialId')" prop="materialId"> <FormItem :label="l('materialId')" prop="materialId">
<!-- <Input v-model="entity.mmcode"></Input> --> <Materiel v-model="entity.materialId" @on-change="change"></Materiel>
<Select v-model="entity.materialId" filterable clearable @on-change="change">
<Option v-for="item in dataList" :value="item.id" :key="item.id">{{ item.code }}</Option>
</Select>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12"> <Col :span="12">
...@@ -146,35 +143,24 @@ export default { ...@@ -146,35 +143,24 @@ export default {
this.getTree(); this.getTree();
this.parms.eid = this.$u.guid(); this.parms.eid = this.$u.guid();
this.entity.levelId = this.parents.id; this.entity.levelId = this.parents.id;
this.getMaterialList();
}, },
methods: { methods: {
getTree() { getTree() {
var url = `${designUrl}/productlevel/getdepartmentstree`; var url = `${designUrl}/productlevel/getdepartmentstree`;
service.get(`${url}`).then(response => { service.get(`${url}`).then(response => {
this.data2 = response.result; //主承制单位 this.data2 = response.result; //主承制单位
});
},
getMaterialList() {
let data = {
conditions: []
};
Api.materiallist(data).then(r => {
this.dataList = r.result.filter(item => item.status == 3);
}); });
}, },
change(val) {
this.dataList.forEach(e => { change(e) {
if (e.id == val) { // console.log(e);
this.entity.name = e.name; this.entity.name = e.name;
this.entity.mmcode = e.code; this.entity.mmcode = e.mmcode;
this.entity.drawingNo = e.drawing; this.entity.drawingNo = e.drawingNo;
this.entity.version = e.version; this.entity.version = e.version;
} this.entity.materialId = e.materialId;
});
}, },
clickData(data, liUrl) { clickData(data, liUrl) {
this.img = liUrl; this.img = liUrl;
this.entity.productUrl = liUrl; this.entity.productUrl = liUrl;
}, },
......
...@@ -276,7 +276,7 @@ export default { ...@@ -276,7 +276,7 @@ export default {
this.fullscreen = false; this.fullscreen = false;
}, },
view(row) { view(row) {
console.log(row) // console.log(row)
this.curId = row.id; this.curId = row.id;
this.parent.id = row.levelId; this.parent.id = row.levelId;
this.parent.parentName = row.levelTitle; this.parent.parentName = row.levelTitle;
......
...@@ -24,6 +24,7 @@ import Tools from '@/components/page/tool.vue' ...@@ -24,6 +24,7 @@ import Tools from '@/components/page/tool.vue'
import State from '@/components/page/state.vue' import State from '@/components/page/state.vue'
import Dictionary from '@/components/page/dictionary.vue' import Dictionary from '@/components/page/dictionary.vue'
import UserSelect from '@/components/page/userSelect.vue' import UserSelect from '@/components/page/userSelect.vue'
import Materiel from '@/components/page/materiel.vue'
import RoleSelect from '@/components/page/roleSelect.vue' import RoleSelect from '@/components/page/roleSelect.vue'
import UserExamSelect from '@/components/page/userExamSelect.vue' import UserExamSelect from '@/components/page/userExamSelect.vue'
import DepartmentSelect from '@/components/page/departmentSelect.vue' import DepartmentSelect from '@/components/page/departmentSelect.vue'
...@@ -97,6 +98,7 @@ Vue.component("DataGrid", DataGrid) ...@@ -97,6 +98,7 @@ Vue.component("DataGrid", DataGrid)
Vue.component("TreeGrid", TreeGrid) Vue.component("TreeGrid", TreeGrid)
Vue.component("Filed", Filed) Vue.component("Filed", Filed)
Vue.component("UserSelect", UserSelect) Vue.component("UserSelect", UserSelect)
Vue.component("Materiel", Materiel)
Vue.component("RoleSelect", RoleSelect) Vue.component("RoleSelect", RoleSelect)
Vue.component("UserExamSelect", UserExamSelect) Vue.component("UserExamSelect", UserExamSelect)
Vue.component("WorkShopSelect", WorkShopSelect) Vue.component("WorkShopSelect", WorkShopSelect)
......
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