1

src/views/repair/index.vue

@@ -4,19 +4,48 @@
       <el-col :span="24" class="main">
         <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
         <el-col :span="24" class="container">
-          维修
+          <el-col :span="24" class="add">
+            <el-button type="primary" size="mini" @click="dialog = true">添加</el-button>
+          </el-col>
+          <dataTable :fields="fields" :data="list" :opera="opera" :total="total" @query="search" @edit="toEdit" @delete="toDelete" :toFormat="toFormat">
+            <template #options="{item}">
+              <template v-if="item.prop === 'uid'">
+                <el-option v-for="(i, index) in carList" :key="index" :label="i.name" :value="i.id"></el-option>
+              </template>
+            </template>
+          </dataTable>
         </el-col>
       </el-col>
     </el-row>
+    <el-dialog :visible.sync="dialog" title="维修信息" @close="toClose" width="60%">
+      <data-form :data="form" :fields="formfields" :rules="{}" @save="turnSave">
+        <template #radios="{item}">
+          <template v-if="item.model === 'type'">
+            <el-radio label="Km常规保养口">Km常规保养口</el-radio>
+            <el-radio label="一般维修口">一般维修口</el-radio>
+            <el-radio label="事故车口">事故车口</el-radio>
+            <el-radio label="洗车口">洗车口</el-radio>
+            <el-radio label="其他口">其他口</el-radio>
+          </template>
+        </template>
+        <template #options="{item}">
+          <template v-if="item.model === 'uid'">
+            <el-option v-for="(i, index) in carList" :key="index" :label="i.name" :value="i.id"></el-option>
+          </template>
+        </template>
+      </data-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import dataTable from '@/components/frame/filter-page-table.vue';
+import dataForm from '@/components/frame/form.vue';
 import breadcrumb from '@c/common/breadcrumb.vue';
-
 import { mapState, createNamespacedHelpers } from 'vuex';
-
 import bus from '@/components/common/bus';
+const { mapActions: repair } = createNamespacedHelpers('repair');
+const { mapActions: car } = createNamespacedHelpers('car');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -25,18 +54,142 @@ export default {
   props: {},
   components: {
     breadcrumb,
+    dataTable,
+    dataForm,
   },
   data: function() {
     return {
-      breadcrumbTitle: '',
+      fields: [
+        { label: '客户姓名', prop: 'uid', filter: 'select', format: 'emit' },
+        { label: '维修项目名', prop: 'name' },
+        { label: '类型', prop: 'type' },
+        { label: '配件', prop: 'parts' },
+        { label: '工时', prop: 'jobdate' },
+        { label: '合计', prop: 'totalmoney' },
+      ],
+      opera: [
+        { label: '修改', method: 'edit' },
+        { label: '删除', method: 'delete' },
+      ],
+      list: [],
+      total: 0,
+      dialog: false,
+      form: {},
+      formfields: [
+        { label: '客户姓名', model: 'uid', type: 'select' },
+        { label: '维修项目名', model: 'name' },
+        { label: '类型', model: 'type', type: 'radio' },
+        { label: '配件', model: 'parts' },
+        { label: '工时', model: 'jobdate' },
+        { label: '合计', model: 'totalmoney' },
+      ],
+      // 客户列表
+      carList: [],
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.searchother();
+    this.search();
+  },
+  methods: {
+    ...repair(['query', 'create', 'delete', 'update']),
+    ...car({ carquery: 'query' }),
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      } else {
+        this.$message({
+          message: res.errmsg,
+          type: 'error',
+        });
+      }
+    },
+    // 修改
+    toEdit({ data }) {
+      this.$set(this, `form`, data);
+      this.dialog = true;
+    },
+    // 删除
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '创建成功',
+          type: 'success',
+        });
+        this.toClose();
+      } else {
+        this.$message({
+          message: res.errmsg,
+          type: 'error',
+        });
+      }
+    },
+    // 取消添加
+    toClose() {
+      this.form = {};
+      this.dialog = false;
+      this.search();
+    },
+    // 保存
+    async turnSave({ data }) {
+      if (data.id) {
+        const res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      } else {
+        const res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '创建成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      }
+    },
+    // 查询客户
+    async searchother() {
+      const res = await this.carquery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `carList`, res.data);
+      }
+    },
+    // 过滤客户
+    toFormat({ model, value }) {
+      if (model == 'uid') {
+        let arr = this.carList.find(i => i.id === value);
+        if (arr) return arr.name;
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.add {
+  text-align: right;
+  padding: 10px 0;
+}
+</style>