|
|
@@ -4,7 +4,79 @@
|
|
|
<el-col :span="24" class="main">
|
|
|
<breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
|
|
|
<el-col :span="24" class="container">
|
|
|
- 设置
|
|
|
+ <el-form ref="form" :model="formData" label-width="120px" :inline="true">
|
|
|
+ <el-form-item label="顾客姓名">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车牌号">
|
|
|
+ <el-input v-model="form.number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车型">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车辆颜色">
|
|
|
+ <el-input v-model="form.color"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="顾客电话">
|
|
|
+ <el-input v-model="form.phone"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="行驶里程">
|
|
|
+ <el-input v-model="form.length"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="VIN号">
|
|
|
+ <el-input v-model="form.vin"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="保险日期">
|
|
|
+ <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="驾驶证日期">
|
|
|
+ <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="行驶证日期">
|
|
|
+ <el-date-picker type="date" placeholder="选择日期" v-model="form.date3" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btn">
|
|
|
+ <el-button type="primary" size="medium" @click="addData">添加</el-button>
|
|
|
+ <el-button type="primary" size="medium">保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-table :data="formData.tableData" border stripe style="width: 100%;">
|
|
|
+ <el-table-column prop="project" label="维修项目" class="tab1">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item v-if="scope.row.edit" :prop="'tableData.' + scope.$index + '.project'" :rules="rules.project">
|
|
|
+ <el-input v-model="scope.row.project" placeholder="维修项目"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <span v-else>{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="parts" label="配件">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item v-if="scope.row.edit" :prop="'tableData.' + scope.$index + '.parts'" :rules="rules.parts">
|
|
|
+ <el-input v-model="scope.row.parts" placeholder="配件"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="hours" label="工时">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item v-if="scope.row.edit" :prop="'tableData.' + scope.$index + '.hours'" :rules="rules.hours">
|
|
|
+ <el-input v-model="scope.row.hours" placeholder="工时"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="sum" label="合计">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item v-if="scope.row.edit" :prop="'tableData.' + scope.$index + '.sum'" :rules="rules.sum">
|
|
|
+ <el-input v-model="scope.row.sum" placeholder="合计"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="medium" @click="deleteData(scope.row, scope.$index)">删除 </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -12,16 +84,65 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import breadcrumb from '@c/common/breadcrumb.vue';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ breadcrumb,
|
|
|
+ },
|
|
|
data: function() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ formData: {
|
|
|
+ tableData: [],
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: {
|
|
|
+ required: true,
|
|
|
+ message: '请输入名字',
|
|
|
+ },
|
|
|
+ sex: {
|
|
|
+ required: true,
|
|
|
+ message: '请选择性别',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
created() {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ //添加
|
|
|
+ addData() {
|
|
|
+ this.formData.tableData.push({
|
|
|
+ edit: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //确认添加
|
|
|
+ confirmAdd(row, formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ row.edit = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //修改
|
|
|
+ editData(row) {
|
|
|
+ row.edit = true;
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ deleteData(row, index) {
|
|
|
+ this.formData.tableData.splice(index, 1);
|
|
|
+ },
|
|
|
+ submitData(formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let data = this.formData.tableData;
|
|
|
+ alert(JSON.stringify(data));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
|
@@ -31,4 +152,26 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.btn {
|
|
|
+ display: block;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+/deep/.el-table th.is-leaf {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+/deep/.el-form-item--small.el-form-item {
|
|
|
+ padding-right: 0;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+/deep/.el-table .cell {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+// /deep/.el-form-item--small.el-form-item{
|
|
|
+// margin-bottom: 0px;
|
|
|
+// }
|
|
|
+// .tab1 {
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+</style>
|
