From abe7e8ea7ef812d313e5d76c7f90ef2acf70dae5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E4=BC=9F?= <943146732@qq.com>
Date: Tue, 12 Mar 2024 23:02:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=B4=E4=BF=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/content/maintenance/category.js       |  54 +++++
 src/api/content/maintenance/index.js          |  64 ++++++
 src/config/router.config.js                   |  18 ++
 src/views/content/maintenance/Index.vue       | 210 ++++++++++++++++++
 .../content/maintenance/category/Index.vue    | 144 ++++++++++++
 .../maintenance/category/modules/AddForm.vue  | 109 +++++++++
 .../maintenance/category/modules/EditForm.vue | 124 +++++++++++
 .../content/maintenance/modules/AddForm.vue   | 127 +++++++++++
 .../content/maintenance/modules/EditForm.vue  | 162 ++++++++++++++
 9 files changed, 1012 insertions(+)
 create mode 100644 src/api/content/maintenance/category.js
 create mode 100644 src/api/content/maintenance/index.js
 create mode 100644 src/views/content/maintenance/Index.vue
 create mode 100644 src/views/content/maintenance/category/Index.vue
 create mode 100644 src/views/content/maintenance/category/modules/AddForm.vue
 create mode 100644 src/views/content/maintenance/category/modules/EditForm.vue
 create mode 100644 src/views/content/maintenance/modules/AddForm.vue
 create mode 100644 src/views/content/maintenance/modules/EditForm.vue

diff --git a/src/api/content/maintenance/category.js b/src/api/content/maintenance/category.js
new file mode 100644
index 0000000..9250413
--- /dev/null
+++ b/src/api/content/maintenance/category.js
@@ -0,0 +1,54 @@
+import { axios } from '@/utils/request'
+
+// api接口列表
+const api = {
+  list: '/content.maintenanceCategory/list',
+  add: '/content.maintenanceCategory/add',
+  edit: '/content.maintenanceCategory/edit',
+  delete: '/content.maintenanceCategory/delete'
+}
+
+// 列表记录
+export function list (params) {
+  return axios({
+    url: api.list,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 新增记录
+ * @param {*} data
+ */
+export function add (data) {
+  return axios({
+    url: api.add,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function edit (data) {
+  return axios({
+    url: api.edit,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除记录
+ * @param {*} data
+ */
+export function deleted (data) {
+  return axios({
+    url: api.delete,
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/api/content/maintenance/index.js b/src/api/content/maintenance/index.js
new file mode 100644
index 0000000..f0de653
--- /dev/null
+++ b/src/api/content/maintenance/index.js
@@ -0,0 +1,64 @@
+import { axios } from '@/utils/request'
+
+// api接口列表
+const api = {
+  list: '/content.maintenance/list',
+  detail: '/content.maintenance/detail',
+  add: '/content.maintenance/add',
+  edit: '/content.maintenance/edit',
+  delete: '/content.maintenance/delete'
+}
+
+// 列表记录
+export function list (params) {
+  return axios({
+    url: api.list,
+    method: 'get',
+    params
+  })
+}
+
+// 详情信息
+export function detail (params) {
+  return axios({
+    url: api.detail,
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 新增记录
+ * @param {*} data
+ */
+export function add (data) {
+  return axios({
+    url: api.add,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function edit (data) {
+  return axios({
+    url: api.edit,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除记录
+ * @param {*} data
+ */
+export function deleted (data) {
+  return axios({
+    url: api.delete,
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 678664c..9110543 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -511,6 +511,24 @@ export const asyncRouterMap = [
               }
             ]
           },
+          {
+            path: '/content/maintenance',
+            component: RouteView,
+            redirect: '/content/maintenance/index',
+            meta: { title: '维修管理', keepAlive: false },
+            children: [
+              {
+                path: '/content/maintenance/category/index',
+                component: () => import(/* webpackChunkName: "content" */ '@/views/content/maintenance/category/Index'),
+                meta: { title: '维修分类', keepAlive: false }
+              },
+              {
+                path: '/content/maintenance/index',
+                component: () => import(/* webpackChunkName: "content" */ '@/views/content/maintenance/Index'),
+                meta: { title: '维修列表', keepAlive: false }
+              }
+            ]
+          },
           {
             path: '/content/help/index',
             component: () => import(/* webpackChunkName: "content" */ '@/views/content/help/Index'),
diff --git a/src/views/content/maintenance/Index.vue b/src/views/content/maintenance/Index.vue
new file mode 100644
index 0000000..c4bb113
--- /dev/null
+++ b/src/views/content/maintenance/Index.vue
@@ -0,0 +1,210 @@
+<template>
+  <a-card :bordered="false">
+    <div class="card-title">{{ $route.meta.title }}</div>
+    <div class="table-operator">
+      <!-- 搜索板块 -->
+      <a-row class="row-item-search">
+        <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
+          <a-form-item label="维修名称">
+            <a-input v-decorator="['name']" placeholder="请输入维修名称" />
+          </a-form-item>
+          <a-form-item label="维修分类">
+            <a-select v-decorator="['categoryId', { initialValue: -1 }]">
+              <a-select-option :value="-1">全部</a-select-option>
+              <a-select-option
+                v-for="(item, index) in categoryList"
+                :key="index"
+                :value="item.id"
+              >{{ item.name }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          
+          <a-form-item class="search-btn">
+            <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
+          </a-form-item>
+        </a-form>
+      </a-row>
+      <!-- 操作板块 -->
+      <div class="row-item-tab clearfix">
+        <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      </div>
+    </div>
+    <s-table
+      ref="table"
+      rowKey="id"
+      :loading="isLoading"
+      :columns="columns"
+      :data="loadData"
+      :pageSize="15"
+      :scroll="{ x: 1400 }"
+    >
+      <span slot="name" slot-scope="text">
+        <p class="twoline-hide">{{ text }}</p>
+      </span>
+      <!-- 所属分类 -->
+      <span slot="category" slot-scope="text">{{ text.name }}</span>
+      <!-- 状态 -->
+      <span slot="status" slot-scope="text">
+        <a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
+      </span>
+      <!-- 操作项 -->
+      <span slot="action" slot-scope="text, item">
+        <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
+        <a v-action:delete @click="handleDelete(item)">删除</a>
+      </span>
+    </s-table>
+    <AddForm ref="AddForm" :categoryList="categoryList" @handleSubmit="handleRefresh" />
+    <EditForm ref="EditForm" :categoryList="categoryList" @handleSubmit="handleRefresh" />
+  </a-card>
+</template>
+
+<script>
+import * as MaintenanceApi from '@/api/content/maintenance'
+import * as CategoryApi from '@/api/content/maintenance/category'
+import { ContentHeader, STable } from '@/components'
+import EditForm from './modules/EditForm'
+import AddForm from './modules/AddForm'
+
+// 表格表头
+const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id'
+  },
+  {
+    title: '维修名称',
+    dataIndex: 'name'
+  },
+  {
+    title: '所属分类',
+    dataIndex: 'category',
+    scopedSlots: { customRender: 'category' }
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort'
+  },
+  {
+    title: '创建时间',
+    width: '180px',
+    dataIndex: 'create_time'
+  },
+  {
+    title: '更新时间',
+    width: '180px',
+    dataIndex: 'update_time'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: '150px',
+    fixed: 'right',
+    scopedSlots: { customRender: 'action' }
+  }
+]
+
+export default {
+  name: 'Index',
+  components: {
+    ContentHeader,
+    STable,
+    AddForm,
+    EditForm
+  },
+  data () {
+    return {
+      expand: false,
+      // 当前表单元素
+      searchForm: this.$form.createForm(this),
+      // 分类列表
+      categoryList: [],
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      columns,
+      // 加载数据方法 必须为 Promise 对象
+      loadData: param => {
+        return MaintenanceApi.list({ ...param, ...this.queryParam })
+          .then(response => {
+            return response.data.list
+          })
+      }
+    }
+  },
+  created () {
+    // 获取分类列表
+    this.getCategoryList()
+  },
+  methods: {
+
+    // 获取分类列表
+    getCategoryList () {
+      this.isLoading = true
+      CategoryApi.list()
+        .then(result => {
+          this.categoryList = result.data.list
+          console.log('🚀 ~ file: Index.vue:161 ~ getCategoryList ~ this.categoryList:', this.categoryList)
+        })
+        .finally(() => this.isLoading = false)
+    },
+
+    // 确认搜索
+    handleSearch (e) {
+      e.preventDefault()
+      this.searchForm.validateFields((error, values) => {
+        if (!error) {
+          this.queryParam = { ...this.queryParam, ...values }
+          this.handleRefresh(true)
+        }
+      })
+    },
+
+    // 删除记录
+    handleDelete (item) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该记录吗?',
+        content: '删除后不可恢复',
+        onOk () {
+          return MaintenanceApi.deleted({ maintenanceId: item.id })
+            .then(result => {
+              app.$message.success(result.message, 1.5)
+              app.handleRefresh()
+            })
+            .finally(result => modal.destroy())
+        }
+      })
+    },
+
+    // 新增记录
+    handleAdd () {
+      this.$refs.AddForm.add()
+    },
+
+    // 编辑记录
+    handleEdit (item) {
+      this.$refs.EditForm.edit(item.id)
+    },
+
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh (bool = false) {
+      this.$refs.table.refresh(bool)
+    }
+
+  }
+}
+</script>
+<style lang="less" scoped>
+.ant-card-body {
+  padding: 22px 29px 25px;
+}
+// 筛选tab
+.tab-list {
+  margin-right: 20px;
+}
+</style>
diff --git a/src/views/content/maintenance/category/Index.vue b/src/views/content/maintenance/category/Index.vue
new file mode 100644
index 0000000..72ec0c2
--- /dev/null
+++ b/src/views/content/maintenance/category/Index.vue
@@ -0,0 +1,144 @@
+<template>
+  <a-card :bordered="false">
+    <div class="card-title">{{ $route.meta.title }}</div>
+    <div class="table-operator">
+      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
+    </div>
+    <a-table
+      v-if="!isLoading"
+      rowKey="id"
+      :columns="columns"
+      :dataSource="categoryList"
+      :defaultExpandAllRows="true"
+      :expandIconColumnIndex="1"
+      :pagination="false"
+      :loading="isLoading"
+    >
+      <!-- 文章封面图 -->
+      <span slot="img_url" slot-scope="text">
+        <a v-if="text" title="点击查看原图" :href="text" target="_blank">
+          <img height="50" :src="text" alt="分类图片" />
+        </a>
+      </span>
+      <!-- 状态 -->
+      <span slot="status" slot-scope="text">
+        <a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
+      </span>
+      <span slot="action" slot-scope="text, item">
+        <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
+        <a v-action:delete @click="handleDelete(item)">删除</a>
+      </span>
+    </a-table>
+    <AddForm ref="AddForm" @handleSubmit="handleRefresh" />
+    <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
+  </a-card>
+</template>
+
+<script>
+import * as Api from '@/api/content/maintenance/category'
+import { STable } from '@/components'
+import AddForm from './modules/AddForm'
+import EditForm from './modules/EditForm'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    AddForm,
+    EditForm
+  },
+  data () {
+    return {
+      // 分类列表
+      categoryList: [],
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      columns: [
+        {
+          title: '分类ID',
+          dataIndex: 'id'
+        },
+        {
+          title: '分类名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '排序',
+          dataIndex: 'sort'
+        },
+        {
+          title: '添加时间',
+          dataIndex: 'create_time'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '180px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  created () {
+    // 获取分类列表
+    this.getCategoryList(true)
+  },
+  methods: {
+
+    // 获取分类列表
+    getCategoryList (bool) {
+      bool && (this.isLoading = true)
+      Api.list()
+        .then(result => {
+          this.categoryList = result.data.list
+        })
+        .finally(() => this.isLoading = false)
+    },
+
+    // 新增记录
+    handleAdd () {
+      this.$refs.AddForm.add()
+    },
+
+    // 编辑记录
+    handleEdit (item) {
+      this.$refs.EditForm.edit(item)
+    },
+
+    // 删除记录
+    handleDelete (item) {
+      const self = this
+      const modal = this.$confirm({
+        title: '您确定要删除该记录吗?',
+        content: '删除后不可恢复',
+        onOk () {
+          return Api.deleted({ categoryId: item['id'] })
+            .then(result => {
+              self.$message.success(result.message, 1.5)
+              self.handleRefresh()
+            })
+            .finally(result => modal.destroy())
+        }
+      })
+    },
+
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh () {
+      // 获取分类列表
+      this.getCategoryList()
+    }
+
+  }
+}
+</script>
diff --git a/src/views/content/maintenance/category/modules/AddForm.vue b/src/views/content/maintenance/category/modules/AddForm.vue
new file mode 100644
index 0000000..5d3850c
--- /dev/null
+++ b/src/views/content/maintenance/category/modules/AddForm.vue
@@ -0,0 +1,109 @@
+<template>
+  <a-modal
+    title="新增维修分类"
+    :width="720"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
+          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+            <a-radio :value="1">显示</a-radio>
+            <a-radio :value="0">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number
+            :min="0"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字'  }] }]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import * as Api from '@/api/content/maintenance/category'
+import { SelectImage } from '@/components'
+
+export default {
+  components: {
+    SelectImage
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '',
+      // 标签布局属性
+      labelCol: {
+        span: 7
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        span: 13
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    add () {
+      // 显示窗口
+      this.visible = true
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        if (!errors) {
+          this.onFormSubmit(values)
+        }
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.add({ form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(result => {
+          this.confirmLoading = false
+        })
+    }
+
+  }
+}
+</script>
diff --git a/src/views/content/maintenance/category/modules/EditForm.vue b/src/views/content/maintenance/category/modules/EditForm.vue
new file mode 100644
index 0000000..5f12ec3
--- /dev/null
+++ b/src/views/content/maintenance/category/modules/EditForm.vue
@@ -0,0 +1,124 @@
+<template>
+  <a-modal
+    title="编辑维修分类"
+    :width="720"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
+          <a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
+            <a-radio :value="1">显示</a-radio>
+            <a-radio :value="0">隐藏</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number
+            :min="0"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/content/maintenance/category'
+import { SelectImage } from '@/components'
+
+export default {
+  components: {
+    SelectImage
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '',
+      // 标签布局属性
+      labelCol: {
+        span: 7
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        span: 13
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {}
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    edit (record) {
+      // 显示窗口
+      this.visible = true
+      // 当前分类记录
+      this.record = record
+      // 设置默认值
+      this.setFieldsValue()
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { $nextTick, form: { setFieldsValue } } = this
+      $nextTick(() => {
+        setFieldsValue(pick(this.record, ['name', 'status', 'sort']))
+      })
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        if (!errors) {
+          this.onFormSubmit(values)
+        }
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.edit({ categoryId: this.record['id'], form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(result => {
+          this.confirmLoading = false
+        })
+    }
+  }
+}
+</script>
diff --git a/src/views/content/maintenance/modules/AddForm.vue b/src/views/content/maintenance/modules/AddForm.vue
new file mode 100644
index 0000000..b5a9be0
--- /dev/null
+++ b/src/views/content/maintenance/modules/AddForm.vue
@@ -0,0 +1,127 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="780"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="维修名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="维修分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-select
+            v-decorator="['category_id', { rules: [{ required: true, message: '请选择1个维修分类' }] }]"
+          >
+            <a-select-option
+              v-for="(item, index) in categoryList"
+              :key="index"
+              :value="item.id"
+            >{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="维修链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['url', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number
+            :min="0"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/content/maintenance'
+import { SelectImage, Ueditor } from '@/components'
+
+export default {
+  components: {
+    SelectImage,
+    Ueditor
+  },
+  props: {
+    // 分类列表
+    categoryList: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '新增维修',
+      // 标签布局属性
+      labelCol: {
+        span: 7
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        span: 13
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    add () {
+      // 显示窗口
+      this.visible = true
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.add({ form: values })
+        .then(result => {
+           // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(result => {
+          this.confirmLoading = false
+        })
+    }
+
+  }
+}
+</script>
diff --git a/src/views/content/maintenance/modules/EditForm.vue b/src/views/content/maintenance/modules/EditForm.vue
new file mode 100644
index 0000000..f3e45ec
--- /dev/null
+++ b/src/views/content/maintenance/modules/EditForm.vue
@@ -0,0 +1,162 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="780"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="维修名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="维修分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-select
+            v-decorator="['category_id', { rules: [{ required: true, message: '请选择1个商品分类' }] }]"
+          >
+            <a-select-option
+              v-for="(item, index) in categoryList"
+              :key="index"
+              :value="item.id"
+            >{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="维修链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            v-decorator="['url', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
+          <a-input-number
+            :min="0"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/content/maintenance'
+import { SelectImage, Ueditor } from '@/components'
+
+export default {
+  components: {
+    SelectImage,
+    Ueditor
+  },
+  props: {
+    // 分类列表
+    categoryList: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '编辑维修',
+      // 标签布局属性
+      labelCol: {
+        span: 7
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        span: 13
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+
+      // 当前记录ID
+      recordId: null,
+      // 当前记录详情
+      record: {}
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    edit (recordId) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录ID
+      this.recordId = recordId
+      // 获取当前详情记录
+      this.getDetail()
+    },
+
+    // 获取当前详情记录
+    getDetail () {
+      this.confirmLoading = true
+      Api.detail({ maintenanceId: this.recordId })
+        .then(result => {
+          // 当前记录
+          this.record = result.data.detail
+          // 设置默认值
+          this.setFieldsValue()
+        })
+        .finally(result => {
+          this.confirmLoading = false
+        })
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(pick(this.record, [
+          'name', 'category_id', 'url', 'sort', 'status', 'virtual_views'
+        ]))
+      })
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+      this.record = {}
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.edit({ maintenanceId: this.recordId, form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(result => {
+          this.confirmLoading = false
+        })
+    }
+
+  }
+}
+</script>