Commit 4ce18b6f authored by zL's avatar zL

2020年9月25日15:19:11部分代码提交

parent c335e227
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
:value="value" :value="value"
type="text" type="text"
class="input" class="input"
:class="{'js-input_error':errorShowing&&value.length===0}" :class="{ 'js-input_error': errorShowing && value.length === 0 }"
@input="handleInput" @input="handleInput"
v-bind="$attrs" v-bind="$attrs"
maxlength="10" maxlength="10"
......
<template> <template>
<div class="pagination"> <div class="pagination">
<div class="btn_nav" :class="{'js-btn_nav_disable':value===1}" @click="navLeft"> <div
class="btn_nav"
:class="{ 'js-btn_nav_disable': value === 1 }"
@click="navLeft"
>
<i class="iconfont iconyidong btn_nav-icon btn_nav-icon_right"></i> <i class="iconfont iconyidong btn_nav-icon btn_nav-icon_right"></i>
</div> </div>
<span class="item_box" :class="{'js-item_box_active':value===1}" @click="changePage(1)">1</span> <span
<span v-if="mid[0]&&mid[0]>2" class="item_box">...</span>
<span v-for="item in mid"
class="item_box" class="item_box"
:class="{'js-item_box_active':value===item}" :class="{ 'js-item_box_active': value === 1 }"
@click="changePage(1)"
>1</span
>
<span v-if="mid[0] && mid[0] > 2" class="item_box">...</span>
<span
v-for="item in mid"
class="item_box"
:class="{ 'js-item_box_active': value === item }"
:key="item" :key="item"
@click="changePage(item)">{{item}}</span> @click="changePage(item)"
<span v-if="mid.length>4&&mid[mid.length-1]<pageCount-1" class="item_box">...</span> >{{ item }}</span
<span class="item_box" v-if="pageCount>1" :class="{'js-item_box_active':value===pageCount}" >
@click="changePage(pageCount)">{{pageCount}}</span> <span
<div class="btn_nav btn_nav_right" :class="{'js-btn_nav_disable':value===pageCount}" @click="navRight"> v-if="mid.length > 4 && mid[mid.length - 1] < pageCount - 1"
class="item_box"
>...</span
>
<span
class="item_box"
v-if="pageCount > 1"
:class="{ 'js-item_box_active': value === pageCount }"
@click="changePage(pageCount)"
>{{ pageCount }}</span
>
<div
class="btn_nav btn_nav_right"
:class="{ 'js-btn_nav_disable': value === pageCount }"
@click="navRight"
>
<i class="iconfont iconyidong btn_nav-icon"></i> <i class="iconfont iconyidong btn_nav-icon"></i>
</div> </div>
<slot></slot> <slot></slot>
...@@ -21,27 +46,19 @@ ...@@ -21,27 +46,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component
/** export default class Pagination extends Vue {
* 分页组件 @Prop({ type: Number, required: true }) value!: number; // 从1开始
* @author yuanzeyu @Prop({ type: Number, required: true }) total!: number;
* @date 2019-05-30 @Prop({ type: Number, default: 10 }) size!: number;
* @desc @change
*/
@Component
export default class Pagination extends Vue {
@Prop({type: Number, required: true}) value!: number; // 从1开始
@Prop({type: Number, required: true}) total!: number;
@Prop({type: Number, default: 10}) size!: number;
public get pageCount() { public get pageCount() {
return Math.ceil(this.total / this.size); return Math.ceil(this.total / this.size);
} }
public get mid() { public get mid() {
const arr = Array.from({length: this.pageCount}, (value, key) => key + 1); const arr = Array.from({ length: this.pageCount }, (value, key) => key + 1);
if (this.pageCount < 7) { if (this.pageCount < 7) {
return arr.slice(1, this.pageCount - 1); return arr.slice(1, this.pageCount - 1);
} }
...@@ -56,50 +73,49 @@ ...@@ -56,50 +73,49 @@
public navLeft() { public navLeft() {
if (this.value !== 1) { if (this.value !== 1) {
this.changePage(this.value - 1) this.changePage(this.value - 1);
} }
} }
public navRight() { public navRight() {
if (this.value !== this.pageCount) { if (this.value !== this.pageCount) {
this.changePage(this.value + 1) this.changePage(this.value + 1);
} }
} }
public changePage(val: number) { public changePage(val: number) {
if (this.value === val) { if (this.value === val) {
return; return;
} }
this.$emit('input', val); this.$emit("input", val);
this.$emit('change', val); this.$emit("change", val);
}
} }
}
</script> </script>
<style scoped> <style scoped>
.pagination { .pagination {
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
font-size: 0; font-size: 0;
} }
.item_box { .item_box {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
min-width: 20px; min-width: 20px;
color: #BABABA; color: #bababa;
font-size: 15px; font-size: 15px;
margin: 0 2px; margin: 0 2px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.js-item_box_active { .js-item_box_active {
color: #000; color: #000;
} }
.btn_nav { .btn_nav {
display: inline-block; display: inline-block;
margin: 0 8px 0 0; /* 15 - (20 - 9)/2 - 2*/ margin: 0 8px 0 0; /* 15 - (20 - 9)/2 - 2*/
width: 20px; width: 20px;
...@@ -107,27 +123,27 @@ ...@@ -107,27 +123,27 @@
border-radius: 50%; border-radius: 50%;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
color: #7A7A7A; color: #7a7a7a;
background: #F1F1F1; background: #f1f1f1;
cursor: pointer; cursor: pointer;
} }
.js-btn_nav_disable { .js-btn_nav_disable {
cursor: not-allowed; cursor: not-allowed;
} }
.btn_nav-icon { .btn_nav-icon {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
transform: scale(.5); transform: scale(0.5);
} }
.btn_nav_right { .btn_nav_right {
margin: 0 0 0 8px; margin: 0 0 0 8px;
} }
.btn_nav-icon_right { .btn_nav-icon_right {
transform: scale(.5) rotate(180deg); transform: scale(0.5) rotate(180deg);
} }
</style> </style>
<template>
<div class="default-page">
<div class="center-box">
<div class="imgbox">
<img src="../../images/default.png" />
</div>
<p>您还未添加存证</p>
<div class="default-page-btn" @click="$emit('to-add')">去添加</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
// 缺省页
.default-page {
.center-box {
margin: 0 auto;
margin-top: 218px;
width: 132px;
.imgbox {
width: 132px;
height: 116px;
img {
width: 100%;
}
}
p {
text-align: center;
padding-top: 18px;
color: #b6b7b9;
padding-bottom: 18px;
}
}
}
.default-page-btn {
width: 100px;
height: 36px;
cursor: pointer;
margin: 0 auto;
background: rgba(68, 100, 235, 1);
border-radius: 4px;
color: white;
text-align: center;
line-height: 36px;
}
</style>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
class="col_right" class="col_right"
:class="{ 'col_right--show': this.$store.state.selectedStatus === 1 }" :class="{ 'col_right--show': this.$store.state.selectedStatus === 1 }"
> >
<!-- <new-productList @update="update"></new-productList> --> <new-productList @update="update"></new-productList>
</div> </div>
<!-- 右侧列 --> <!-- 右侧列 -->
...@@ -75,7 +75,7 @@ import { Component, Vue, Watch } from "vue-property-decorator"; ...@@ -75,7 +75,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
// import TemplateManage from "./TemplateManage.vue"; // import TemplateManage from "./TemplateManage.vue";
// 右侧存证部分 // 右侧存证部分
// import newProductList from "./newProductList.vue"; import newProductList from "./newProductList.vue";
//删除页 //删除页
// import deleted from "./deleted.vue"; // import deleted from "./deleted.vue";
// 引导页 // 引导页
...@@ -83,7 +83,7 @@ import bootPage from "@/components/bootPage.vue"; ...@@ -83,7 +83,7 @@ import bootPage from "@/components/bootPage.vue";
import CommonDialog from "@/components/CommonDialog.vue"; import CommonDialog from "@/components/CommonDialog.vue";
@Component({ @Component({
components: { components: {
// newProductList, newProductList,
// TemplateManage, // TemplateManage,
// deleted, // deleted,
bootPage, bootPage,
......
<template>
<div class="subject">
<h1>添加存证</h1>
<input v-model.trim="name" type="text" placeholder="请输入存证名称" />
<div class="btn-box">
<div class="btn btn-cancel" @click="$emit('cancel')">取消</div>
<div class="btn btn-determine" @click="determine">确定</div>
</div>
</div>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
import * as storage from "@/entry/refactoring/plugins/storage";
export default {
// 引入组件
components: {},
props: [],
data() {
return {
name: "",
};
},
created() {},
computed: {
//
},
methods: {
// 确认按钮
async determine() {
if (!this.name) {
this.$message("请输入名称");
return false;
}
const res = await this.$ajax({
type: "post",
url: GO_URLS.add,
params: {
name: this.name,
note: JSON.stringify({
version: 1,
userName: this.$store.state.userInfos.user || "",
userIcon: this.$store.state.userInfos.icon || "",
evidenceName: this.name,
stepName: "",
banners: [],
}),
detail: JSON.stringify([
{
label: "ext",
key: "",
type: 3,
data: [
{
data: {
type: "text",
format: "string",
value: this.name,
},
type: 0,
key: "存证名称",
label: "存证名称",
},
{
data: {
type: "text",
format: "hash",
value: "null",
},
type: 0,
key: "basehash",
label: "basehash",
},
{
data: {
type: "text",
format: "hash",
value: "null",
},
type: 0,
key: "prehash",
label: "prehash",
},
{
data: {
type: "text",
format: "string",
value: this.name,
},
type: 0,
key: "存证类型",
label: "存证类型",
},
],
},
]),
},
});
if (res) {
this.$message({
message: "添加成功",
type: "success",
});
this.$router.push({
path: "/editTemplate",
query: {
personalTemplateId: res.data.id,
},
});
}
},
},
};
</script>
<style scoped lang="less">
.subject {
width: 512px;
height: 279px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
padding: 0 44px;
}
h1 {
padding-top: 34px;
padding-bottom: 42px;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(53, 53, 53, 1);
}
input {
width: 500px;
height: 44px;
border: 1px solid rgba(226, 226, 226, 1);
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: black;
line-height: 25px;
text-indent: 26px;
&::-webkit-input-placeholder {
/* WebKit browsers */
color: #b6b5ba;
}
&:-moz-placeholder {
color: #b6b5ba;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #b6b5ba;
}
&:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #b6b5ba;
}
}
input:focus {
outline: none;
border: 1px solid rgba(226, 226, 226, 1);
}
.btn-box {
overflow: hidden;
padding-top: 40px;
float: right;
}
.btn {
float: left;
width: 120px;
height: 40px;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 40px;
cursor: pointer;
}
.btn-cancel {
color: rgba(92, 100, 118, 1);
}
.btn-determine {
background: rgba(63, 121, 254, 1);
color: white;
}
</style>
This diff is collapsed.
import Vue from 'vue'; import Vue from 'vue';
import { import {
Button, Message,
Container,
Header,
Aside,
Main,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Table,
TableColumn,
Input, Input,
Notification,
Form,
FormItem,
Row,
Col,
Select,
Option,
Switch,
InputNumber,
Tree,
Tag,
Steps,
Step,
Cascader,
Upload,
Loading,
Checkbox Checkbox
// Button,
// Container,
// Header,
// Aside,
// Main,
// Menu,
// Submenu,
// MenuItem,
// MenuItemGroup,
// Table,
// TableColumn,
// Form,
// FormItem,
// Row,
// Col,
// Select,
// Option,
// Switch,
// InputNumber,
// Tree,
// Tag,
// Steps,
// Step,
// Cascader,
// Upload,
// Notification,
// Loading,
} from 'element-ui'; } from 'element-ui';
Vue.use(Button);
Vue.use(Checkbox); Vue.use(Checkbox);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Input); Vue.use(Input);
Vue.use(Form); // Vue.use(Loading);
Vue.use(FormItem); // Vue.use(Form);
Vue.use(Row); // Vue.use(FormItem);
Vue.use(Col); // Vue.use(Row);
Vue.use(Select); // Vue.use(Col);
Vue.use(Option); // Vue.use(Select);
Vue.use(Switch); // Vue.use(Option);
Vue.use(InputNumber); // Vue.use(Switch);
Vue.use(Tree); // Vue.use(InputNumber);
Vue.use(Tag); // Vue.use(Tree);
Vue.use(Steps); // Vue.use(Tag);
Vue.use(Step); // Vue.use(Steps);
Vue.use(Cascader); // Vue.use(Step);
Vue.use(Upload); // Vue.use(Cascader);
Vue.use(Loading); // Vue.use(Upload);
// Vue.use(Container);
Vue.prototype.$notify = Notification; // Vue.use(Header);
\ No newline at end of file // Vue.use(Aside);
// Vue.use(Main);
// Vue.use(Menu);
// Vue.use(Submenu);
// Vue.use(MenuItem);
// Vue.use(MenuItemGroup);
// Vue.use(Table);
// Vue.use(TableColumn);
// Vue.use(Button);
// Vue.use(message)
// Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
\ No newline at end of file
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