jq模拟简易购物车

<div class="dwfbgs">
	<div class="fbgsBox">
		<el-form ref="form" :model="form" label-width="80px" style="text-align: center;">
		  <el-form-item>
			  <el-input
			    type="textarea"
			    :rows="4"
				maxlength="50"
			    placeholder="请输入公告标题"
			    v-model="textarea">
			  </el-input>
		  </el-form-item>
		  <el-form-item>
			  <div class="tabs">
			  	<el-tabs v-model="activeName">
					<!--  @tab-click="handleClick" -->
			  	    <el-tab-pane label="曳引与强制驱动电梯" name="first"></el-tab-pane>
			  	    <el-tab-pane label="液压驱动电梯" name="second"></el-tab-pane>
			  	    <el-tab-pane label="杂物电梯" name="third"></el-tab-pane>
			  	    <el-tab-pane label="自动扶梯与自动人行道" name="1"></el-tab-pane>
			  	  </el-tabs>
			  </div>
			  <el-button type="primary"style="margin-right: -68%;margin-bottom: 1%;" @click="handleUsersAdd">新增</el-button>
			  <el-table 
			      :data="tableData"
			      border
			      style="width: 80%;margin-left:8%;margin-bottom: 1%;">
			      <el-table-column
			        prop="index"
			        label="序号"
			  	  class-name="column-bg-color-editable"
			  	  width="150"
			  	  >
			  	  <!-- show-overflow-tooltip -->
			      </el-table-column>
			      <el-table-column
			        prop="username"
			        label="项目名称"
			        width="360">
			      </el-table-column>
			      <el-table-column
			        prop="password"
			        label="维保周期(天)" 
			  	  width="260">
			      </el-table-column>
			  	<el-table-column
			  	  prop="email"
			  	  label="备注" 
			  	  width="360">
			  	</el-table-column>
				<el-table-column prop="" label="操作">
					<template slot-scope="scope">
					          <el-button @click="handleEdit(scope.$index)">编辑</el-button>
					        </template>
				</el-table-column>
			    </el-table>
		  </el-form-item>
		  <div style="display: flex;margin-left: 13%;margin-top: 3%;">
		  	<h1>计算公式：</h1>
		  	<el-button type="success" style="margin-left: 5%;">困人数救援平均到场时间</el-button>
		  	<el-button type="success" style="margin-left: 5%;">百台电梯困人数</el-button>
		  	<el-button type="success" style="margin-left: 5%;">百台检验不合格项数</el-button>
		  	<el-button type="success" style="margin-left: 5%;">按时维保率</el-button>
		  	<el-button type="success" style="margin-left: 5%;">物联网覆盖率</el-button>
		  </div>
		  <el-form-item>
			  <el-table
			        :data="tableData2"
			        border
			        style="width: 80%; margin-left: 8%;margin-top: 2%;" >
					<!-- :span-method="objectSpanMethod" -->
			        <el-table-column
			          prop="data"
			          label="序号">
			        </el-table-column>
			        <el-table-column
			          prop="address"
			          label="公示内容">
			        </el-table-column>
			        <el-table-column
			          prop="amount2"
			          label="承诺内容">
					  
			        </el-table-column>
			        
			      </el-table>
		  </el-form-item>
		  <div style="text-align: center;margin-top: 5%;">
		    <el-button type="primary">保存</el-button>
		  			<el-button type="primary">发布</el-button>
		    <el-button>返回</el-button>
		  </div>
		</el-form>
		<el-dialog title="添加用户" :visible.sync="dialogFormVisible">
		      <el-form :model="form">
				  <el-form-item label="序号" label-width="100px">
				    <el-input v-model="form.index" auto-complete="off"></el-input>
				  </el-form-item>
		        <el-form-item label="项目名称" label-width="100px">
		          <el-input v-model="form.username" auto-complete="off"></el-input>
		        </el-form-item>
		        <el-form-item label="维保周期(天)" label-width="100px">
		          <el-input v-model="form.password" auto-complete="off"></el-input>
		        </el-form-item>
		        <el-form-item label="备注" label-width="100px">
		          <el-input v-model="form.email" auto-complete="off"></el-input>
		        </el-form-item>
		        
		      </el-form>
		      <div slot="footer" class="dialog-footer">
		        <el-button @click="dialogFormVisible = false">取 消</el-button>
		        <el-button type="primary" @click="handleSure">确 定</el-button>
		      </div>
		</el-dialog>
		
	</div>
</div>


define([
    'vue',
	'jquery',
	// '../../api/dwfbgs',
    'text!./dwfbgs.html',
    'css!./dwfbgs.css',
], function(vue,jquery,tempLate) {
    'use strict';
    var dwfbgs = vue.extend({
        template: tempLate,
        data() {
            return {
				dialogFormVisible:false,
				 tableData: [],
				 tableData2:[{
				          data: '1',
				          name: '王小虎',
				          address: '困人数救援平均到场时间'
				        },
						{
						         data: '2',
						         name: '王小虎',
						         address: '百台电梯困人数'
						       },
						{
						         data: '3',
						         name: '王小虎',
						         address: '百台检验不合格项数'
						       },
						{
						         data: '4',
						         name: '王小虎',
						         address: '按时维保率'
						       },
						{
								data: '4',
								name: '王小虎',
								address: '物联网覆盖率'
						      },
						{
								data: '单位名称',

						      },
						],
						  textarea: '',
				form: {
					index:'',
					username:'',
					password:'',
					email:''
				},
				activeName: 'first',
        		isedit:false,
				editindex:''
        	}
        },
		created() {
			
			
		},
        mounted() {
        },
        methods: {
			
			handleSure() {
				let form = JSON.parse(JSON.stringify(this.form))
				if(this.tableData.length){
					let status = this.tableData.some(item=>{
						return item.index == form.index
						
					})
					console.log(status)
					if(status){
						if(this.isedit){
							this.tableData[this.editindex] = form
						}else{
						this.$message({type:"error",message:"序号不可重复"})
						}
					}else{
							this.tableData.unshift(form)
					}
				}else{
					this.tableData.unshift(form)
				}
				this.clear()
			},	
			clear(){
				this.dialogFormVisible = false
				this.form.index = ''
				this.form.username = ''
				this.form.password = ''
				this.form.email = ''
			},
			handleEdit (index) {
				console.log(index)
				this.editindex = index
				this.isedit = true
				console.log(index)
				this.dialogFormVisible = true
				this.form =JSON.parse(JSON.stringify(this.tableData[index])) 
			},
			handleUsersAdd () {
				this.isedit = false
			      this.form = {}
			      this.dialogFormVisible = true
			    },
        }
    });
    return dwfbgs;
});