|
|
@@ -0,0 +1,363 @@
|
|
|
+<template>
|
|
|
+ <div class="manage-root personnel-create">
|
|
|
+ <Header />
|
|
|
+ <div class="manage-root-contain">
|
|
|
+ <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
|
|
|
+ <div class="manage-root-contain-right">
|
|
|
+ <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
|
|
|
+ <div class="create-bottom">
|
|
|
+ <div class="top-box">
|
|
|
+ <h3>订阅价格管理</h3>
|
|
|
+ <div class="save-btn">
|
|
|
+ <el-button size="small" @click="onCancel">取消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="onSubmit()" :loading="loading">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tabs">
|
|
|
+ <a :class="[typeValue===item.value?'active':'']" @click="handleChangeTabs(item.value)" v-for="item in typeList" :key="item.value">{{item.label}}</a>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ class="search-table order-table"
|
|
|
+ :data="tableList"
|
|
|
+ border
|
|
|
+ style="width: 672px"
|
|
|
+ :max-height="tableHeight">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="#"
|
|
|
+ width="64">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="period"
|
|
|
+ label="总期数"
|
|
|
+ width="152">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.period" placeholder="输入"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="issue"
|
|
|
+ label="合刊"
|
|
|
+ width="152">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.issue" placeholder="0"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="发行日期"
|
|
|
+ width="152" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="scope.row.date"
|
|
|
+ prefix-icon="-"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="price"
|
|
|
+ label="价格"
|
|
|
+ width="152" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.price" placeholder="输入" type="number" @blur="handlePrice(scope.row)"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <span class="quick-btn" @click="tableLength('-')">
|
|
|
+ 减一行
|
|
|
+ </span>
|
|
|
+ <span class="quick-btn" @click="tableLength('1')">
|
|
|
+ 加一行
|
|
|
+ </span>
|
|
|
+ <span class="quick-btn" @click="tableLength('10')">
|
|
|
+ 加十行
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import Header from "../../components/Header.vue";
|
|
|
+import NavMenu from "../../components/NavMenu.vue"
|
|
|
+import Breadcrumb from '../../components/Breadcrumb.vue';
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+import { cutMoneyFiter } from '@/utils/defined';
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { Header, NavMenu, Breadcrumb },
|
|
|
+ props: {},
|
|
|
+ filters:{
|
|
|
+ cutMoneyFiter,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ activeMenuIndex: "order_setting",
|
|
|
+ breadcrumbList:[
|
|
|
+ {
|
|
|
+ icon:'setting',
|
|
|
+ url:'',
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon:'',
|
|
|
+ url:'',
|
|
|
+ notLink: true,
|
|
|
+ text:'系统配置'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon:'',
|
|
|
+ url:'',
|
|
|
+ text:'订阅价格管理'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ loading: false,
|
|
|
+ typeValue: 'huakan',
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ value: 'huakan',
|
|
|
+ label: '画刊'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'xiaoxue',
|
|
|
+ label: '小学'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'chuyi',
|
|
|
+ label: '初一'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'chuer',
|
|
|
+ label: '初二'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'chusan',
|
|
|
+ label: '初三'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'gaoyi',
|
|
|
+ label: '高一'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableList:[
|
|
|
+ {
|
|
|
+ period: '',
|
|
|
+ issue: '',
|
|
|
+ date: '',
|
|
|
+ price: ''
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableHeight: "", // 表格高度
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ handleChangeTabs(value){
|
|
|
+ this.typeValue = value
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
+ // 提交表单
|
|
|
+ onSubmit(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/OrgServer/Manager/SysConfigManager/SetSysConfig_SharePath";
|
|
|
+ let data = {
|
|
|
+ article_share_url_path: this.registerForm.article_share_url_path
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ if(res.status===1){
|
|
|
+ this.$message.success("保存成功")
|
|
|
+ }
|
|
|
+ }).catch((res) =>{
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消 恢复到修改前状态
|
|
|
+ onCancel(){
|
|
|
+
|
|
|
+ },
|
|
|
+ // 得到配置信息
|
|
|
+ getInfo(){
|
|
|
+ let MethodName = "/OrgServer/Manager/SysConfigManager/GetSysConfig_SharePath";
|
|
|
+ getLogin(MethodName, {})
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch((res) =>{
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //计算table高度(动态设置table高度)
|
|
|
+ getTableHeight() {
|
|
|
+ let tableH = 370; //距离页面下方的高度
|
|
|
+ let tableHeightDetil = window.innerHeight - tableH;
|
|
|
+ if (tableHeightDetil <= 300) {
|
|
|
+ this.tableHeight = 300;
|
|
|
+ } else {
|
|
|
+ this.tableHeight = window.innerHeight - tableH;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlePrice(item){
|
|
|
+ item.price = cutMoneyFiter(item.price)
|
|
|
+ },
|
|
|
+ tableLength(type){
|
|
|
+ if(type=='-'){
|
|
|
+ if(this.tableList.length>1){
|
|
|
+ this.tableList.splice(this.tableList.length-1,1)
|
|
|
+ }else{
|
|
|
+ this.$message.warning('最少须保留一行')
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for(let i = 0; i < Number(type); i++){
|
|
|
+ let obj = {
|
|
|
+ period: '',
|
|
|
+ issue: '',
|
|
|
+ date: '',
|
|
|
+ price: ''
|
|
|
+ }
|
|
|
+ this.tableList.push(obj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.getInfo()
|
|
|
+ this.getTableHeight();
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() { },
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() { },
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() { },
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() { },
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() { },
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() { },
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() { }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.create-bottom{
|
|
|
+ padding: 40px 40px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: calc(100vh - 140px);
|
|
|
+ overflow: auto;
|
|
|
+ .top-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ h3{
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 28px;
|
|
|
+ margin: 0;
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ .tabs{
|
|
|
+ display: flex;
|
|
|
+ padding: 16px 0;
|
|
|
+ a{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ border-radius: 100px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ margin-right: 12px;
|
|
|
+ &:hover{
|
|
|
+ background: #F2F3F5;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: #F2F3F5;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-table{
|
|
|
+ margin-top: 0;
|
|
|
+ .el-input{
|
|
|
+ width: 135px;
|
|
|
+ height: 22px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+.quick-btn{
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ background: #F4F4F4;
|
|
|
+ width: 219px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 16px 8px 0 0;
|
|
|
+ display: inline-block;
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 26px; /* 157.143% */
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.order-table.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+.order-table{
|
|
|
+ .cell{
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .el-table__row:hover {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ .el-table__cell{
|
|
|
+ padding: 9px 10px;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ width: 132px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha