Commit 1f4889fa authored by 刘殿昕's avatar 刘殿昕

修改com列表+剪切+去除内置移除

parent e88443b3
......@@ -7,7 +7,7 @@
/>
</div>
<div class="com_cell_message">
<div class="com_cell_msg_title">水路货物周转量情况</div>
<div class="com_cell_msg_title" @click="goUrl('ssurl')">水路货物周转量情况</div>
<div class="com_cell_item">
<span class="com_cell_item_title">资源摘要:</span>
<span
......@@ -37,10 +37,19 @@
<script>
export default {
components: {},
props: {
url: { type: String, default: "" }
},
data: () => ({}),
computed: {},
watch: {},
methods: {},
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + parame);
}
}
},
mounted() {}
};
</script>
......@@ -71,6 +80,7 @@ export default {
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
cursor: pointer;
}
.com_cell_item {
font-size: 16px;
......
<template>
<div>
<commodity-cell v-for="item in list" :key="item"></commodity-cell>
<commodity-cell v-for="item in datas" :url="url" :key="item"></commodity-cell>
<!-- 分页 -->
<section class="com-pagination" v-if="paginationShow">
<div class="com_page_total">{{ pagination.total }} 个条目</div>
<div class="com_page_num" v-if="pageSizeShow">
<div class="com_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
placeholder="请选择"
size="mini"
@change="handleSizeChange"
>
<el-option
v-for="item in pageOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div>条 / 页</div>
</div>
<div class="com_page_control">
<el-button
icon="el-icon-arrow-left"
circle
size="mini"
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
&nbsp;&nbsp;{{ pagination.page }}页 / 共{{
Math.ceil(pagination.total / pagination.rowsPerPage)
}}
<el-button
icon="el-icon-arrow-right"
circle
size="mini"
@click="handleCurrentChange(1)"
:disabled="
pagination.page >=
Math.ceil(pagination.total / pagination.rowsPerPage)
"
></el-button>
</div>
</section>
</div>
</template>
......@@ -10,16 +54,82 @@ export default {
components: {
"commodity-cell": CommodityCell
},
props: {
datas: { type: Array, default: [] },
url: { type: String, default: "" },
paginationShow: {
type: Boolean,
default: false
},
pageSizeShow: {
type: Boolean,
default: false
}
},
data: () => ({
list: [1, 2, 3, 4, 5, 6]
pagination: {
rowsPerPage: 10,
page: 1,
total: 0
},
pageOptions: [
{
value: "10",
label: "10"
},
{
value: "20",
label: "20"
},
{
value: "50",
label: "50"
}
]
}),
computed: {},
watch: {},
methods: {},
mounted() {}
methods: {
handleSizeChange(val) {
this.pagination.rowsPerPage = val;
this.$emit("refresh");
},
handleCurrentChange(val) {
this.pagination.page += val;
this.$emit("refresh");
},
getTotal() {
this.total = this.datas.length;
}
},
mounted() {
this.getTotal();
}
};
</script>
<style scoped>
.com-pagination {
margin-top: 20px;
padding-bottom: 20px;
font-size: 14px;
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.com_page_num {
width: 120px;
display: flex;
justify-content: space-around;
align-items: center;
}
.com_page_num_sel {
width: 66px;
}
</style>
<style>
.com_page_control .el-button {
border: 0;
}
</style>
\ No newline at end of file
......@@ -146,18 +146,18 @@ export default {
margin-left: 10px;
}
.add_pic {
width: 100px;
height: 100px;
border: 1px #409eff solid;
width: 140px;
height: 140px;
border: 3px #f6f7fb solid;
border-radius: 5px;
position: relative;
}
.add_icon {
position: absolute;
top: calc((100% - 40px) / 2);
left: calc((100% - 40px) / 2);
color: #409eff;
font-size: 40px;
top: calc((100% - 70px) / 2);
left: calc((100% - 70px) / 2);
color: #e3e6f0;
font-size: 70px;
}
.up_input {
display: inline-block;
......
......@@ -24,8 +24,7 @@
type="primary"
@click="addRow()"
class="ces_toolbar_btn"
>新增</el-button
>
>新增</el-button>
<el-input
prefix-icon="el-icon-search"
v-if="searchShow"
......@@ -96,19 +95,9 @@
:header-cell-class-name="headerCellClassName"
v-cloak
>
<el-table-column
v-if="isSelection"
type="selection"
align="center"
></el-table-column>
<el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
<!-- 序号 -->
<el-table-column
v-if="isIndex"
type="index"
:label="indexLabel"
width="80"
align="center"
></el-table-column>
<el-table-column v-if="isIndex" type="index" :label="indexLabel" width="80" align="center"></el-table-column>
<!-- 数据栏 -->
<el-table-column
......@@ -126,24 +115,11 @@
<span v-if="item.type === 'Button'">
<b v-for="(btn, key) in item.btnList" :key="key">
<em
v-if="btn.label == '删除' || btn.label == '移除'"
:class="btn.type"
style="color: #830f53"
@click="handleRemove(scope.row, btn.label)"
>
{{ btn.label }}
</em>
<em
v-else
:class="btn.type"
style="color: #0f2683"
@click="handleClick(btn.type, scope.row)"
>
{{ btn.label }}
</em>
<em v-if="btn.line" style="padding:0 20px;color:#edf0ff">
{{ btn.line }}
</em>
>{{ btn.label }}</em>
<em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{ btn.line }}</em>
</b>
</span>
<!--href 链接-->
......@@ -178,9 +154,7 @@
trigger="hover"
:content="scope.row[item.prop]"
>
<div slot="reference" class="overlit">
{{ scope.row[item.prop] }}
</div>
<div slot="reference" class="overlit">{{ scope.row[item.prop] }}</div>
</el-popover>
<!-- others -->
<span v-else>{{ scope.row[item.prop] }}</span>
......@@ -217,7 +191,7 @@
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
第{{ pagination.page }}页 / 共{{
&nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
Math.ceil(pagination.total / pagination.rowsPerPage)
}}页
<el-button
......@@ -226,20 +200,12 @@
size="mini"
@click="handleCurrentChange(1)"
:disabled="
pagination.page ==
pagination.page >=
Math.ceil(pagination.total / pagination.rowsPerPage)
"
></el-button>
</div>
</section>
<!-- 删除弹窗 -->
<d-confirm
v-if="isDialog"
:confirmModalOptions="confirmOptions"
:delSelect="delSelect"
ref="myConfirm"
@refreshuseList="refreshuseList"
></d-confirm>
</section>
</template>
......@@ -255,7 +221,7 @@ export default {
"v-apaas-table-input": tableInput,
"v-apaas-table-select": tableSelect,
"v-apaas-table-umhref": tableUmhref,
"d-confirm": DConfirm,
"d-confirm": DConfirm
},
props: {
// 表格型号:mini,medium,small
......@@ -280,91 +246,78 @@ export default {
// },
searchShow: {
type: Boolean,
default: false,
default: false
},
url: {
type: String,
default: "",
default: ""
},
detailsUrl: {
type: String,
default: "",
default: ""
},
rowprop: {
type: String,
default: "",
default: ""
},
ready: {
type: Boolean,
default: false,
default: false
},
addRowBtn: {
type: Boolean,
default: false,
default: false
},
couldNotEdit: {
type: Boolean,
default: false,
},
// 是否显示删除弹窗
isDialog: { type: Boolean, default: false },
confirmOptions: {
type: Object,
default: () => {
return {
title: "提示", //提示
message: "", //""
btnCancelText: "取消", //取消
btnSubmitText: "确定",
};
},
default: false
},
refreshInit: { type: Boolean },
sortBy: {
type: String,
default: "",
default: ""
},
searchNoName: { type: Boolean, default: false },
emptyText: {
type: String,
default: "暂无数据",
default: "暂无数据"
},
autoAdd: {
type: Boolean,
default: false,
default: false
},
border: {
type: Boolean,
default: false,
default: false
},
stripe: {
type: Boolean,
default: false,
default: false
},
radius: {
type: Boolean,
default: false,
default: false
},
pageSizeShow: {
type: Boolean,
default: false,
default: false
},
paginationShow: {
type: Boolean,
default: false,
default: false
},
headerCellClassName: {
type: String,
default: "",
default: ""
},
filterList: {
type: Array,
default: null,
default: null
},
showHeader: {
type: Boolean,
default: true,
},
default: true
}
},
data() {
return {
......@@ -372,7 +325,7 @@ export default {
pagination: {
rowsPerPage: 10,
page: 1,
total: 0,
total: 0
},
delSelect: null,
helper: helper,
......@@ -381,23 +334,23 @@ export default {
pageOptions: [
{
value: "10",
label: "10",
label: "10"
},
{
value: "20",
label: "20",
label: "20"
},
{
value: "50",
label: "50",
},
label: "50"
}
],
search: "",
times: null,
showFliterList: false,
filterData: null, // 筛选条件
filterToggle: null, // 控制筛选条件的展开和收起
filterLength: 0, // 每行最多可容纳多少个过滤条件
filterLength: 0 // 每行最多可容纳多少个过滤条件
};
},
mounted() {
......@@ -410,20 +363,20 @@ export default {
if (val) {
this.getDataFromApiSync();
}
},
}
},
url: {
handler(val) {
this.getDataFromApiSync();
},
deep: true,
deep: true
},
filterList: {
handler(val) {
this.initFilterData();
},
deep: true,
},
deep: true
}
},
methods: {
// get data
......@@ -439,14 +392,14 @@ export default {
}
} else {
this.getDataFromApi().then(
(data) => {
data => {
this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr));
this.pagination.total = data.total;
if (this.autoAdd) {
this.addRow();
}
},
(err) => {
err => {
console.log("失败" + err);
}
);
......@@ -459,7 +412,7 @@ export default {
this.all_url = `/static/data.json`;
this.$http
.get(this.all_url)
.then((response) => {
.then(response => {
let newArr = response.data.data[this.url];
// if it is true url, total is response's total
let total = newArr.length;
......@@ -498,17 +451,11 @@ export default {
console.log(obj.column);
return h("span", { class: "ces-table-require" }, obj.column.label);
},
handleRemove(row, label) {
this.$refs.myConfirm.showModel();
this.delSelect = row;
this.delSelect.label = label;
this.label = label;
},
refreshuseList() {
this.$message({
showClose: true,
message: this.label + "成功",
type: "success",
type: "success"
});
},
switchChange(val) {
......@@ -578,7 +525,7 @@ export default {
if (this.filterList && this.filterList.length) {
this.filterData = {};
this.filterToggle = {};
this.filterList.forEach((item) => {
this.filterList.forEach(item => {
this.$set(this.filterData, item.prop, []);
this.$set(this.filterToggle, item.prop, false);
});
......@@ -591,8 +538,8 @@ export default {
this.filterData[prop].push(filter);
}
console.log(this.filterData);
},
},
}
}
};
</script>
......@@ -834,4 +781,7 @@ em {
background-color: #515fe7;
color: #f4f7fc;
}
.ces_page_control .el-button {
border: 0;
}
</style>
......@@ -170,8 +170,8 @@ export default {
</style>
<style scoped>
.list_img {
width: 100px;
height: 100px;
width: 140px;
height: 140px;
border-radius: 5px;
overflow: hidden;
margin-left: 10px;
......
<template>
<div class="com_ex">
<block-radius>
<h3>商品列表,分页啥乱七八糟的都没有,再说</h3>
<commodity-list :datas="datas"></commodity-list>
<h3>商品列表,分页啥乱七八糟的都没有,再说(0506 completed)</h3>
<commodity-list :datas="list" url="urlssss" :paginationShow="true" :pageSizeShow="true"></commodity-list>
</block-radius>
</div>
</template>
......@@ -17,7 +17,7 @@ export default {
BlockRadius
},
data: () => ({
datas: {}
list: [1, 2, 3, 4, 5, 6]
}),
mounted() {},
methods: {}
......
......@@ -17,6 +17,7 @@
:confirmOptions="confirmOptions"
:detailsUrl="detailsUrl"
@primary-edit="editItem"
@primary-del="delItem"
:emptyText="emptyText"
:stripe="true"
:pageSizeShow="true"
......@@ -146,6 +147,9 @@ export default {
methods: {
editItem(val) {
console.log(val);
},
delItem(val) {
console.log(val);
}
}
};
......
......@@ -66,5 +66,6 @@ export default {
margin-top: 84px;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
}
</style>
\ No newline at end of file
......@@ -183,11 +183,11 @@
</el-form-item>
<el-form-item>
<p class="formname">服务描述:</p>
<el-input type="textarea" v-model="form.desc" placeholder="请输入服务描述,不超过200个字"></el-input>
<el-input type="textarea" v-model="form.desc" placeholder="请输入服务描述,不超过200个字" class="form_in"></el-input>
</el-form-item>
<el-form-item>
<p class="formname">服务领域:</p>
<el-select v-model="form.area" placeholder="请选择">
<el-select v-model="form.area" placeholder="请选择" class="form_in">
<el-option
v-for="item in optionsArea"
:key="'area' + item.value"
......@@ -198,7 +198,7 @@
</el-form-item>
<el-form-item>
<p class="formname">所属组织:</p>
<el-select v-model="form.origin" placeholder="请选择">
<el-select v-model="form.origin" placeholder="请选择" class="form_in">
<el-option
v-for="item in optionsOrganization"
:key="item.value"
......@@ -220,7 +220,7 @@
</el-form-item>
<el-form-item>
<p class="formname">接口编码:</p>
<el-input v-model="form.code"></el-input>
<el-input v-model="form.code" class="form_in"></el-input>
</el-form-item>
<el-form-item>
<p class="formname">开放程度:</p>
......@@ -231,9 +231,9 @@
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-form-item class="btn_footer">
<el-button class="previous" @click="previous">上一步</el-button>
<el-button class="registe" @click="registe">服务注册</el-button>
</el-form-item>
</el-form>
</div>
......@@ -367,11 +367,14 @@ export default {
this.jcxxtx = true;
},
// edit form
onSubmit() {
console.log("submit!");
},
getNewList(val) {
console.log(val);
},
previous() {
this.jcxxtx = false;
},
registe() {
console.log("submit!");
}
},
mounted() {}
......@@ -447,6 +450,16 @@ export default {
background-color: #0f2683;
color: #f8f9fd;
}
.btn_footer .previous {
width: 100px;
background-color: #c3caf8;
color: #0f2683;
}
.btn_footer .registe {
width: 100px;
background-color: #0f2683;
color: #f8f9fd;
}
.sqxx_row {
padding: 0 20px;
}
......@@ -503,6 +516,9 @@ export default {
font-size: 14px;
margin-left: 10px;
}
.form_in {
width: 1000px;
}
</style>
<style>
.bread_crumb .el-breadcrumb__inner {
......
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