vue element ui 自定义组件的使用
前端菜鸟，都这个年代了，vue出来那么久了，自定义组件的使用，组件间的传值还不会使用~
最近用element ui做了一个项目，终于用了一次自定义组件。
下面是设计图：
但是因为有几个界面的差异较大，不只是操作栏的按钮不同，所以这个要用自定义组件，根据上面状态栏的条件下面表格切换。
文件布局如图：
代码如下：
jzdd.vue
查询
重置
审核报名
js:
import Wc from "./wca.vue";
import Toaudit from "./toAudit.vue";
import Wtg from "./wtg.vue";
import Qx from "./qx.vue";
export default {
components: {
Toaudit,
Wtg,
Wc,
Qx
},
filters: {
//城市过滤
typea(val) {
let cities = JSON.parse(sessionStorage.getItem("cities"));
for (let i = 0; i < cities.length; i++) {
if (val == cities[i].id) {
return cities[i].city_name;
} else if (val == 0) {
return "全部";
}
}
},
//结算方式过滤
typeb(val){
if (val==0) {
return "日结"
}else if (val==1) {
return "月结"
}else if (val==3) {
return "完工结"
}
},
},
data() {
return {
e: {},
rules: {},
showjiesuan: false,
// 提交状态
loading: false,
city_list: [],
status_list: [
{ id: 0, name: "待审核" },
{ id: 1, name: "已审核" },
{ id: 2, name: "已取消" },
{ id: 3, name: "未通过" },
{ id: 4, name: "待结算" },
{ id: 5, name: "已结算" }
],
//表单数据
form: Object.assign({}, this.data),
// 表格数据接口
url: "?s=Manage.Order.Job",
// 表格列配置
parseData: res => {
console.log(res);
return {
code: res.code == 200 ? 0 : res.code,
data: res.data.data,
count: res.data.count
};
},
columns: [
{
prop: "city_id",
label: "城市",
minWidth: 60,
align: "center",
slot: "state1"
},
{
prop: "title",
label: "兼职标题",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "company_name",
label: "来源公司",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "credit_points_stint",
label: "信用分要求",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "created_at",
label: "兼职时间",
showOverflowTooltip: true,
minWidth: 110,
formatter: (row, column, cellValue) => {
return this.$util.toDateString(
cellValue * 1000,
"yyyy-MM-dd HH:mm:ss"
);
}
},
{
prop: "pay_type",
label: "结算方式",
showOverflowTooltip: true,
minWidth: 110,
slot:"state2"
},
{
prop: "wx_name",
label: "报名用户",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "mobile",
label: "手机号",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "user_credit_points",
label: "用户信用分",
showOverflowTooltip: true,
minWidth: 110
},
{
columnKey: "action",
label: "操作",
width: 160,
align: "center",
resizable: false,
slot: "action"
}
],
// 表格搜索条件
where: {
title: "",
city_id: 0,
status: 0
},
// 表格选中数据
selection: [],
// 当前编辑数据
current: null,
// 是否显示编辑弹窗
showEdit: false
};
},
created() {
let cities = JSON.parse(sessionStorage.getItem("cities"));
this.city_list = cities;
console.log(this.city_list);
this.admin_city = sessionStorage.getItem("admin_city");
let that = this;
if (this.admin_city == 0) {
this.city_list.unshift({ id: 0, city_name: "全部" });
} else {
this.city_list = this.city_list.filter(function(item) {
return item.id == that.admin_city;
});
}
console.log(this.city_list);
this.where.city_id = this.city_list[0].id;
},
methods: {
changeinfo() {
// this.reload();
},
changeinfo2() {
this.reload();
},
//结算
settlement(e) {
this.e = e;
this.showjiesuan = true;
},
viewOrder(e) {
console.log(e);
this.e = e;
this.show = true;
},
//审核报名
signUp(row) {
console.log(row);
this.$confirm("是否通过审核报名?", "审核报名", {
confirmButtonText: "通过",
cancelButtonText: "不通过"
})
.then(() => {
this.$http
.post("?s=Manage.Order.AuditJob", { jobOrderId: row.id, status: 1 })
.then(res => {
console.log(res);
if (res.data.data == "成功") {
this.$message("审核通过");
this.reload();
}
});
})
.catch(() => {
this.$prompt("审核不通过备注", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
})
.then(({ value }) => {
this.$http
.post("?s=Manage.Order.AuditJob", {
jobOrderId: row.id,
status: 3,
remark: value
})
.then(res => {
console.log(res);
if (res.data.data == "成功") {
this.$message("已发送请求");
this.reload();
}
});
this.$message({
type: "success",
message: "不通过备注是: " + value
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入"
});
});
});
},
/* 刷新表格 */
reload() {
this.$refs.table.reload({ page: 1 });
},
/* 重置搜索 */
reset() {
this.where = {};
this.$nextTick(() => {
this.reload();
});
},
/* 显示编辑 */
openEdit(row) {
this.current = row;
console.log(row);
this.showEdit = true;
},
/* 保存编辑 */
save() {
this.$refs["form"].validate(valid => {
if (valid) {
this.loading = true;
this.$http
.post("?s=Manage.Order.Payment", {
jobOrderId: this.e.id,
cash: this.form.cash
})
.then(res => {
this.loading = false;
if (res.data.code === 200) {
this.$message({ type: "success", message: "成功" });
if (!this.isUpdate) {
this.form = {};
}
this.updateVisible(false);
this.$emit("done");
} else {
this.$message.error(res.data.msg);
}
})
.catch(e => {
this.loading = false;
this.$message.error(e.msg);
});
} else {
return false;
}
});
},
/* 更新visible */
updateVisible(value) {
this.showjiesuan = false;
}
}
};已审核 toAudit.vue
结算
已通过
js:
export default {
name: "toaudit",
props: {
wheres: {
type: Object
}
},
filters: {
//城市过滤
typea(val) {
let cities = JSON.parse(sessionStorage.getItem("cities"));
for (let i = 0; i < cities.length; i++) {
if (val == cities[i].id) {
return cities[i].city_name;
} else if (val == 0) {
return "全部";
}
}
},
//结算方式过滤
typeb(val){
if (val==0) {
return "日结"
}else if (val==1) {
return "月结"
}else if (val==3) {
return "完工结"
}
},
},
data() {
return {
selection: [],
form: Object.assign({}, this.data),
where: {
title: this.wheres.title,
status: this.wheres.status,
city_id: this.wheres.city_id
},
// 表格数据接口
url: "?s=Manage.Order.Job",
// 表格列配置
parseData: res => {
console.log(res);
return {
code: res.code == 200 ? 0 : res.code,
data: res.data.data,
count: res.data.count
};
},
columns: [
{
prop: "city_id",
label: "城市",
minWidth: 60,
align: "center",
slot: "state1"
},
{
prop: "title",
label: "兼职标题",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "company_name",
label: "来源公司",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "credit_points_stint",
label: "信用分要求",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "created_at",
label: "兼职时间",
showOverflowTooltip: true,
minWidth: 110,
formatter: (row, column, cellValue) => {
return this.$util.toDateString(
cellValue * 1000,
"yyyy-MM-dd HH:mm:ss"
);
}
},
{
prop: "pay_type",
label: "结算方式",
showOverflowTooltip: true,
minWidth: 110,
slot:"state2"
},
{
prop: "wx_name",
label: "报名用户",
showOverflowTooltip: true,
minWidth: 110
},
{
prop: "mobile",
label: "手机号",
showOverflowTooltip: true,
minWidth: 110
},
{
columnKey: "action",
label: "操作",
width: 160,
align: "center",
resizable: false,
slot: "action"
}
]
};
},
methods: {
signUps(e) {},
//结算
settlement(row) {
console.log(row);
//this.e = row;
//this.showjiesuan = true;
this.$prompt('请输结算金额', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
this.$http.post("?s=Manage.Order.Payment",{jobOrderId:row.id,cash:value}).then(res=>{
console.log(res);
if (res.data.data=="成功") {
this.$message("您已结算成功！")
this.reload();
}
})
this.$message({
type: 'success',
message: '结算金额是: ' + value
});
})
},
viewOrder(e) {
console.log(e);
this.e = e;
this.show = true;
},
/* 刷新表格 */
reload() {
this.$refs.table.reload({ page: 1 });
},
/* 重置搜索 */
reset() {
this.where = {};
this.$nextTick(() => {
this.reload();
});
},
/* 更新visible */
updateVisible(value) {
this.showjiesuan = false;
}
}
};纵观以上代码，总结：
子组件：name: "toaudit", 声明，注册
props: {
wheres: {
type: Object
}
},//传递变量
父组件：
js:
import Toaudit from "./toAudit.vue";
components:{Toaudit}