✨ feat(【SPD售后问题收集】): 页面开发，接口联调

20240425292

public/index.html

@@ -214,4 +214,10 @@
   </div>
 </body>
 
-</html>
+</html>
+
+<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+<script>
+  // VConsole 默认会挂载到 `window.VConsole` 上
+  var vConsole = new window.VConsole();
+</script>

src/App.vue

@@ -16,14 +16,18 @@ import ThemePicker from "@/components/ThemePicker";
 export default {
   name: "App",
   components: { ThemePicker },
-    metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
-    }
+  metaInfo() {
+    return {
+      title:
+        this.$store.state.settings.dynamicTitle &&
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
 };
 </script>
 <style scoped>
@@ -31,3 +35,13 @@ export default {
   display: none;
 }
 </style>
+<style lang="scss">
+// :v-deep.el-scrollbar .el-scrollbar__bar {
+//   opacity: 1 !important;
+// }
+.el-scrollbar {
+  > .el-scrollbar__bar {
+    opacity: 1 !important;
+  }
+}
+</style>

src/api/business/as/after-sales.js

@@ -0,0 +1,68 @@
+// SPD售后问题收集 ——移动端
+import request from "@/utils/request";
+
+// 判断是否第一次登录
+export function FirstLogin(params) {
+  return request({
+    url: `/mk/as/afterSalesUser/getByPhone`,
+    method: "GET",
+    params,
+  });
+}
+
+// 新增用户
+export function AddUser(data) {
+  return request({
+    url: "/mk/as/afterSalesUser/add",
+    method: "POST",
+    data: data,
+  });
+}
+
+// 获取用户信息
+export function GetUser(params) {
+  return request({
+    url: `/mk/as/afterSalesUser/getById/${params.id}`,
+    method: "GET",
+  });
+}
+
+
+// 修改用户信息
+export function EditUser(data) {
+  return request({
+    url: "/mk/as/afterSalesUser/edit",
+    method: "POST",
+    data: data,
+  });
+}
+
+
+// 新增问题
+export function AddProblem(data, params) {
+  return request({
+    url: "/mk/as/problem/add",
+    method: "POST",
+    data: data,
+    params,
+  });
+}
+
+// 问题列表
+export function ProblemList(params) {
+  return request({
+    url: `/mk/as/problem/getByUserId/${params.userId}`,
+    method: "GET",
+    // params,
+  });
+}
+
+// 问题详情
+export function ProblemItem(params) {
+  return request({
+    url: `/mk/as/problem/getDetail/${params.id}`,
+    method: "GET",
+    // params,
+  });
+}
+

src/main.js

@@ -74,7 +74,9 @@ import onlyNumber from '@/views/business/ehr/directive/el-input';
 // 引入和风天气图标
 import 'qweather-icons/font/qweather-icons.css'
 
-import { NavBar, Form, Field, Button, ActionSheet, Cell, Sticky, Uploader } from "vant";
+import {
+  NavBar, Form, Field, Button, ActionSheet, Cell, Sticky, Uploader, Toast
+} from "vant";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
@@ -92,6 +94,7 @@ Vue.prototype.$init = {
   rules: initRules,
   page: initPage,
 };
+Vue.prototype.$toast = Toast;
 
 // 全局组件挂载
 

src/permission.js

@@ -12,7 +12,9 @@ const whiteList = ['/login', '/register', '/test01', '/ehrentrance', '/contractB
   '/business/ehr/ehrpm-entrance', '/canteenAddFood', '/canteenAddMenu', '/menuScreen',
   '/foodScreen', '/business/wms/historical-route', '/business/SupAtttachment',
   '/business/purchase/form/transferOrder/bipPull-entrance', '/contractDetail',
-  '/spdAddQuestion', '/business/wms/ProductMarking']
+  '/spdAddQuestion', '/business/wms/ProductMarking',
+  '/after-sales/index', '/after-sales/login', '/after-sales/feedback', '/after-sales/progress', '/after-sales/updateInfo'
+]
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/store/getters.js

@@ -16,5 +16,10 @@ const getters = {
   defaultRoutes: state => state.permission.defaultRoutes,
   sidebarRouters: state => state.permission.sidebarRouters,
   query: state => state.query,
+  id: state => state.salesUser.id,
+  userName: state => state.salesUser.userName,
+  userPhone: state => state.salesUser.userPhone,
+  userProject: state => state.salesUser.userProject,
+  userRoom: state => state.salesUser.userRoom,
 }
 export default getters

src/store/index.js

@@ -8,6 +8,7 @@ import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
 import query from './material/query'
+import salesUser from "./modules/salesUser"
 
 Vue.use(Vuex)
 
@@ -19,7 +20,8 @@ const store = new Vuex.Store({
     tagsView,
     permission,
     settings,
-    query
+    query,
+    salesUser
   },
   getters
 })

src/store/modules/salesUser.js

@@ -0,0 +1,49 @@
+import Cookies from 'js-cookie'
+// SPD售后问题收集
+const salesUser = {
+  state: {
+    id: "",
+    userName: "",
+    userPhone: "",
+    userProject: "",
+    userRoom: "",
+  },
+
+  mutations: {
+    SET_SALESID: (state, id) => {
+      state.id = id;
+    },
+    SET_SALESNAME: (state, userName) => {
+      state.userName = userName;
+    },
+    SET_SALESPHONE: (state, userPhone) => {
+      state.userPhone = userPhone;
+    },
+    SET_SALESPROJECT: (state, userProject) => {
+      state.userProject = userProject;
+    },
+    SET_SALESROOM: (state, userRoom) => {
+      state.userRoom = userRoom;
+    },
+  },
+  actions: {
+    // 获取信息
+    setSalesUser({ commit }, { data }) {
+      return new Promise((resolve, reject) => {
+        let { id, userName, userPhone, userProject, userRoom } = data;
+        Cookies.set('salesId', id);
+        commit("SET_SALESID", id);
+        commit("SET_SALESNAME", userName);
+        commit("SET_SALESPHONE", userPhone);
+        commit("SET_SALESPROJECT", userProject);
+        commit("SET_SALESROOM", userRoom);
+        resolve()
+      })
+
+    }
+
+
+  }
+}
+
+export default salesUser;

src/views/business/as/after-sales/components/format-value/index.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+  name: "FormatValue",
+  props: {
+    value: {
+      type: [String, Number],
+      require: true,
+    },
+    dicts: {
+      type: Array,
+      require: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    innerValue: {
+      get() {
+        const { value, dicts } = this.$props;
+        const item = dicts.find((dict) => dict.value === value);
+        return item ? item.label : "";
+      },
+      set() {},
+    },
+  },
+  methods: {},
+  created() {},
+};
+</script>
+
+<template>
+  <span>{{ innerValue }}</span>
+</template>

src/views/business/as/after-sales/components/image-preview/index.vue

@@ -0,0 +1,45 @@
+<!-- 文件预览 -->
+<script>
+export default {
+  name: "ImagePreview",
+  props: {
+    value: [ Array],
+  },
+  data() {
+    return {
+      // fileList: [],
+    };
+  },
+  computed: {
+    fileList: {
+      get() {
+        return this.$props.value.map((item) => {
+          return {
+            ...item,
+            url: item.filepath,
+          };
+        });
+      },
+      set() {},
+    },
+  },
+  methods: {
+    afterRead(file) {
+      console.log(file, "file");
+    },
+    useDelete() {},
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <div class="preview-image">
+    <van-uploader
+      v-model="fileList"
+      preview-size="60px"
+      :deletable="false"
+      readonly
+    />
+  </div>
+</template>

src/views/business/as/after-sales/components/image-upload/index.vue

@@ -10,11 +10,14 @@ export default {
       fileList: [],
     };
   },
+  computed: {},
   methods: {
     afterRead(file) {
-      console.log(file, "file");
+      this.$emit("input", this.fileList);
+    },
+    useDelete(file) {
+      this.$emit("input", this.fileList);
     },
-    useDelete() {},
   },
   created() {},
 };
@@ -25,6 +28,7 @@ export default {
     <van-uploader
       v-model="fileList"
       multiple
+      preview-size="60px"
       :after-read="afterRead"
       @delete="useDelete"
     />

src/views/business/as/after-sales/contact-us/index.vue

@@ -4,6 +4,7 @@ export default {
   name: "contactUs",
   data() {
     return {
+      phone: "18874149031",
       show: false,
       actions: [
         { name: "拨号", key: "call" },
@@ -12,14 +13,15 @@ export default {
     };
   },
   methods: {
-    onSelect({ key, name }) {
+    async onSelect({ key, name }) {
       this.show = false;
       if (key === "call") {
-        // window.location.href = "tel:18973094426";
+        window.location.href = `tel:${this.phone}`;
         return;
       }
       if (key === "copy") {
-        return;
+        await navigator.clipboard.writeText(this.phone);
+        return this.$toast("已复制到剪贴板");
       }
     },
     onCancel() {},
@@ -32,7 +34,7 @@ export default {
   <div>
     <van-cell
       is-link
-      title="热线电话40080000"
+      :title="'热线电话' + phone"
       value="8:00-22:00"
       @click="show = true"
     />
@@ -50,5 +52,8 @@ export default {
 <style scope lang="scss">
 .van-cell {
   background-color: #f5f5f5;
+  .van-cell__title {
+    flex-grow: 2;
+  }
 }
 </style>

src/views/business/as/after-sales/feedback/columns.js

@@ -1,35 +1,53 @@
 export default function useColumns() {
   const userColumns = [
     {
-      item: { key: "questioner", title: "用户姓名", },
+      item: { key: "projectSource", title: "项目名称", required: true, },
       attr: {
         is: "el-input",
+        readonly: true,
       }
     },
     {
-      item: { key: "roomInformation", title: "用户科室", },
+      item: { key: "questioner", title: "用户姓名", required: true, },
       attr: {
         is: "el-input",
       }
     },
     {
-      item: { key: "questionerWay", title: "联系方式", },
+      item: { key: "roomInformation", title: "用户科室", required: true, },
       attr: {
         is: "el-input",
       }
     },
+    {
+      item: { key: "questionerWay", title: "联系方式", required: true, },
+      attr: {
+        is: "el-input",
+        rules: [{
+          pattern: /^1[3-9]\d{9}$/,
+          message: "手机号格式错误",
+          trigger: "blur",
+        },]
+      }
+    },
 
   ];
 
   const problemColumns = [
     {
-      item: { key: "problemType", title: "问题类型", },
+      item: { key: "problemType", title: "问题类型", required: true, },
       attr: {
         is: "el-select",
+        options: [
+          { label: "软件问题", value: "1" },
+          { label: "硬件问题", value: "2" },
+          { label: "服务问题", value: "3" },
+          { label: "其他问题", value: "4" },
+        ],
       }
     },
     {
-      item: { key: "problemDescription", title: "问题描述", },
+      item: { key: "problemDescription", title: "问题描述", required: true, },
       attr: {
         is: "el-input",
         rows: 5,

src/views/business/as/after-sales/feedback/index.vue

@@ -1,6 +1,8 @@
 <!-- 问题反馈 -->
 <script>
+import Cookies from "js-cookie";
 import useColumns from "./columns";
+import { AddProblem, GetUser } from "@/api/business/as/after-sales";
 export default {
   name: "Feedback",
   components: {
@@ -9,28 +11,78 @@ export default {
   data() {
     const { userColumns, problemColumns } = useColumns();
 
-    const problemInfo = this.$init.params([...userColumns, ...problemColumns]);
+    const params = this.$init.params([...userColumns, ...problemColumns]);
+    const rules = this.$init.rules([...userColumns, ...problemColumns]);
     return {
       params: {
-        problemInfo: {
-          ...problemInfo,
-          projectSource: "测试项目",
-        },
-        files: [],
+        ...params,
+        userId: null,
+        // projectSource: "测试项目",
       },
+      files: [],
       userColumns,
       size: "mini",
       loading: false,
       problemColumns,
       title: "问题反馈",
+      rules,
     };
   },
   methods: {
     useBack() {
       this.$router.go(-1);
     },
+    useSubmit(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            console.log(this.params, "params");
+            console.log(this.files, "files");
+            this.loading = true;
+            let formData = new FormData();
+            this.files.forEach((f) => {
+              formData.append("files", f.file);
+            });
+            const blob = new Blob([JSON.stringify(this.params)], {
+              type: "application/json",
+            });
+            // formData.append("problemInfo", blob);
+            let { code, msg } = await AddProblem(formData, this.params);
+            if (code === 200) {
+              this.$toast(msg);
+              this.useBack();
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async fetchUser() {
+      try {
+        // const { id } = this.$store.state.salesUser;
+        const id = Cookies.get("salesId");
+        let { code, data } = await GetUser({ id });
+        if (code === 200) {
+          this.params = {
+            userId: data.id,
+            projectSource: data.userProject,
+            questioner: data.userName,
+            roomInformation: data.userRoom,
+            questionerWay: data.userPhone,
+          };
+          // this.params.userId = data.id;
+        }
+      } catch (error) {}
+    },
+  },
+  created() {
+    this.fetchUser();
   },
-  created() {},
 };
 </script>
 
@@ -48,24 +100,26 @@ export default {
 
     <div style="width: 100%; padding: 16px">
       <el-form
-        ref="userInfo"
-        :model="params.problemInfo"
+        ref="problemInfo"
+        :model="params"
         label-width="auto"
         :size="size"
+        :rules="rules"
       >
         <!-- 基本信息 -->
         <el-row>
-          <el-form-item label="项目名称">
-            <span>{{ params.problemInfo.projectSource }}</span>
-          </el-form-item>
+          <!-- <el-form-item label="项目名称">
+            <span>{{ params.projectSource }}</span>
+          </el-form-item> -->
           <el-form-item
             v-for="({ item, attr }, index) in userColumns"
             :label="item.title"
+            :prop="item.key"
           >
             <component
               :is="attr.is"
               v-bind="attr"
-              v-model="params.problemInfo[item.key]"
+              v-model="params[item.key]"
             ></component>
           </el-form-item>
         </el-row>
@@ -75,22 +129,44 @@ export default {
           <el-form-item
             v-for="({ item, attr }, index) in problemColumns"
             :label="item.title"
+            :prop="item.key"
           >
             <component
+              v-if="attr.is === 'el-select'"
+              :is="attr.is"
+              v-bind="attr"
+              v-model="params[item.key]"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="op in attr.options"
+                :key="op.value"
+                :label="op.label"
+                :value="op.value"
+              >
+              </el-option>
+            </component>
+            <component
+              v-else
               :is="attr.is"
               v-bind="attr"
-              v-model="params.problemInfo[item.key]"
+              v-model="params[item.key]"
               style="width: 100%"
             ></component>
           </el-form-item>
-          <el-form-item label="问题图片">
-            <image-upload v-model="params.files" :size="size"></image-upload>
+          <el-form-item label="问题图片" prop="files">
+            <image-upload v-model="files" :size="size"></image-upload>
           </el-form-item>
         </el-row>
       </el-form>
     </div>
 
-    <el-button type="primary" round class="stickyBtn" :size="size"
+    <el-button
+      type="primary"
+      round
+      class="stickyBtn"
+      :size="size"
+      @click="useSubmit('problemInfo')"
       >提 交</el-button
     >
   </div>
@@ -113,6 +189,7 @@ export default {
   padding: 16px;
   box-sizing: border-box;
   background-color: #fff;
+  border-radius: 4px;
   margin-bottom: 12px;
 }
 .stickyBtn {

src/views/business/as/after-sales/progress/columns.js

@@ -0,0 +1,36 @@
+export default function useColumns() {
+
+  const formColumns = [
+    {
+      item: { key: "projectSource", title: "项目名称" },
+      attr: {}
+    },
+    {
+      item: { key: "problemType", title: "问题类型" },
+      attr: {
+        is: "el-select",
+        options: [
+          { label: "软件问题", value: "1" },
+          { label: "硬件问题", value: "2" },
+          { label: "服务问题", value: "3" },
+          { label: "其他问题", value: "4" },
+        ],
+      }
+    },
+    {
+      item: { key: "problemDescription", title: "问题描述" },
+      attr: {}
+    },
+    {
+      item: { key: "problemPicture", title: "问题图片" },
+      attr: {
+        is: "el-image-preview",
+      }
+    },
+  ];
+
+  return {
+    formColumns
+  }
+
+}

src/views/business/as/after-sales/progress/details.vue

@@ -1,15 +1,208 @@
 <!-- 进度查询-详情 -->
 <script>
+import useColumns from "./columns";
+import { ProblemItem } from "@/api/business/as/after-sales";
 export default {
   name: "asDetails",
+  props: {
+    value: {
+      type: [String, Number],
+      require: true,
+    },
+  },
+  components: {
+    ElFormatValue: () => import("../components/format-value/index.vue"),
+    ElImagePreview: () => import("../components/image-preview/index.vue"),
+  },
   data() {
-    return {};
+    const { formColumns } = useColumns();
+    const params = this.$init.params(formColumns);
+    return {
+      title: "进度详情",
+      width: "100%",
+      loading: false,
+      visible: false,
+      size: "medium",
+      formColumns,
+      params,
+      imgUrl: require("../images/order.png"),
+    };
+  },
+  computed: {
+    problemId: {
+      get() {
+        return this.$props.value;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    hide() {
+      this.params = this.$init.params(this.formColumns);
+      this.visible = false;
+      this.$emit("refresh");
+    },
+    beforeOpen() {
+      this.fetchItem(this.problemId);
+    },
+    async fetchItem(id) {
+      try {
+        this.loading = true;
+
+        let { code, data } = await ProblemItem({ id });
+        if (code === 200) {
+          this.params = data;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
   },
-  methods: {},
   created() {},
 };
 </script>
 
 <template>
-  <div>进度查询-详情</div>
+  <el-drawer
+    :size="width"
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-loading="loading"
+    :visible.sync="visible"
+    :show-close="false"
+    destroy-on-close
+    @close="hide"
+    @open="beforeOpen"
+  >
+    <div
+      slot="title"
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <van-nav-bar
+        :title="title"
+        left-text="返回"
+        left-arrow
+        @click-left="hide"
+        style="width: 100%"
+      />
+    </div>
+
+    <el-form :model="params">
+      <el-descriptions :column="1" :size="size" :reverse="true">
+        <template slot="title">
+          <div class="mes_title">
+            <div style="display: flex; align-items: center">
+              <el-image
+                style="width: 16px; height: 16px; margin-right: 10px"
+                :src="imgUrl"
+                fit="contain"
+              ></el-image>
+              <span>单号:{{ params.problemCode }}</span>
+            </div>
+            <span>{{
+              params.createTime &&
+              new Date(params.createTime.replace(/-/g, "/")).Format(
+                "yyyy-MM-dd HH:mm"
+              )
+            }}</span>
+          </div>
+        </template>
+
+        <el-descriptions-item
+          v-for="({ item, attr }, index) in formColumns"
+          :label="item.title"
+        >
+          <!-- <el-image
+            v-if="attr.is === 'el-image-preview'"
+            style="width: 50px; height: 50px; margin-right: 10px"
+            src="https://dev-sy.derom.com/document-center/minio/1f196e04-7524-4bbf-991d-c5072599a6fd_2a991c4c9dc966b7bb5d3d0686fa3c14.jpg"
+            fit="contain"
+          ></el-image> -->
+          <el-format-value
+            v-if="attr.is === 'el-select'"
+            v-model="params[item.key]"
+            :dicts="attr.options"
+          ></el-format-value>
+          <el-image-preview
+            v-else-if="attr.is === 'el-image-preview'"
+            v-model="params[item.key]"
+          ></el-image-preview>
+          <span v-else>{{ params[item.key] }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <el-card shadow="never">
+        <p
+          style="
+            border-bottom: 1px solid #e2dede;
+            margin: 0;
+            line-height: 28px;
+            padding: 6px 12px;
+            font-weight: 600;
+          "
+        >
+          工单处理状态
+        </p>
+        <el-timeline style="padding: 16px 12px">
+          <el-timeline-item
+            v-for="(flow, index) in params.processFlow"
+            :key="index"
+            :timestamp="flow.timestamp"
+            color="#0095ff"
+            size="large"
+          >
+            {{ flow.content }}
+          </el-timeline-item>
+          <el-timeline-item color="#ff8500" size="large"></el-timeline-item>
+        </el-timeline>
+      </el-card>
+    </el-form>
+  </el-drawer>
 </template>
+
+<style scoped lang="scss">
+::v-deep .el-drawer__header {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.el-form {
+  height: 100%;
+  padding: 16px;
+  background-color: #f7f7f7;
+}
+
+.el-descriptions {
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+::v-deep .el-descriptions__header {
+  margin: 0 0 12px;
+  color: #606266;
+}
+::v-deep .el-descriptions__title {
+  width: 100%;
+}
+.mes_title {
+  width: 100%;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+::v-deep .van-uploader__upload {
+  display: none;
+}
+
+.el-card {
+  margin: 10px 0;
+  font-size: 14px;
+}
+::v-deep .el-card__body {
+  padding: 0;
+}
+</style>

src/views/business/as/after-sales/progress/index.vue

@@ -1,19 +1,48 @@
 <!-- 进度查询-列表 -->
 <script>
+import Cookies from "js-cookie";
+import { ProblemList } from "@/api/business/as/after-sales";
 export default {
   name: "Progress",
+  components: {
+    ProgressDetail: () => import("./details.vue"),
+  },
   data() {
     return {
       loading: false,
       title: "进度查询",
+      imgUrl: require("../images/order.png"),
+      dataList: [],
+      checkedId: null,
     };
   },
   methods: {
     useBack() {
       this.$router.go(-1);
     },
+    handleDetail(prop) {
+      this.checkedId = prop.id;
+      let { setVisible } = this.$refs.ProgressDetail;
+      setVisible(true);
+    },
+    async getList() {
+      try {
+        this.loading = true;
+        // const { id } = this.$store.state.salesUser;
+        const userId = Cookies.get("salesId");
+        let { code, rows } = await ProblemList({ userId });
+        if (code === 200) {
+          this.dataList = rows;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  created() {
+    this.getList();
   },
-  created() {},
 };
 </script>
 
@@ -29,17 +58,52 @@ export default {
       'align-items': 'center',
     }"
   >
-    <van-nav-bar
-      :title="title"
-      left-text="返回"
-      left-arrow
-      @click-left="useBack"
-      style="width: 100%"
-    />
-
+    <van-sticky style="width: 100%">
+      <van-nav-bar
+        :title="title"
+        left-text="返回"
+        left-arrow
+        @click-left="useBack"
+        style="width: 100%"
+      />
+    </van-sticky>
     <el-row>
-      <el-col :span="24"> </el-col>
+      <el-col
+        v-for="data in dataList"
+        :span="24"
+        @click.native="handleDetail(data)"
+      >
+        <div class="mes_title">
+          <div style="display: flex; align-items: center">
+            <el-image
+              style="width: 16px; height: 16px; margin-right: 12px"
+              :src="imgUrl"
+              fit="contain"
+            ></el-image>
+            <span>{{ data.problemCode }}</span>
+          </div>
+          <span>{{
+            new Date(data.createTime.replace(/-/g, "/")).Format(
+              "yyyy-MM-dd HH:mm"
+            )
+          }}</span>
+        </div>
+        <p
+          class="van-ellipsis"
+          style="color: #333; font-size: 14px; margin: 5px 0px"
+        >
+          {{ data.processFlow[0].content }}
+        </p>
+        <p class="van-ellipsis" style="margin: 0">
+          问题描述：{{ data.problemDescription }}
+        </p>
+      </el-col>
     </el-row>
+    <progress-detail
+      ref="ProgressDetail"
+      v-model="checkedId"
+      @refresh="getList"
+    ></progress-detail>
   </el-card>
 </template>
 
@@ -55,8 +119,21 @@ export default {
   width: 100%;
   padding: 16px;
   box-sizing: border-box;
+  border-radius: 4px;
   .el-col {
     margin-bottom: 16px;
+    background-color: #fff;
+    padding: 12px;
+    font-size: 12px;
+    color: #9b9b9b;
+    .mes_title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    span {
+      align-self: center;
+    }
   }
 }
 </style>

src/views/business/as/after-sales/user/bindingInfo.vue

@@ -1,5 +1,6 @@
 <!-- 绑定用户信息 -->
 <script>
+import { AddUser } from "@/api/business/as/after-sales";
 export default {
   name: "BindingInfo",
   props: {
@@ -12,15 +13,17 @@ export default {
       width: "100%",
       loading: false,
       visible: false,
-      formData: {
-        name: "cs",
-        departments: "cs",
+      params: {
+        userName: null,
+        userRoom: null,
+        userPhone: null,
+        userProject: null,
       },
       rules: {
-        name: [{ required: true, message: "请输入科室名称", trigger: "blur" }],
-        departments: [
-          { required: true, message: "请输入姓名", trigger: "blur" },
+        userName: [
+          { required: true, message: "请输入科室名称", trigger: "blur" },
         ],
+        userRoom: [{ required: true, message: "请输入姓名", trigger: "blur" }],
       },
     };
   },
@@ -28,16 +31,31 @@ export default {
     setVisible(prop) {
       this.visible = prop;
     },
-    beforeOpen() {},
-    useConfirm() {},
+    beforeOpen() {
+      const { userProject, userPhone } = this.$props.value;
+      this.params = {
+        ...this.params,
+        userPhone,
+        userProject,
+      };
+    },
     useSubmit(prop) {
       this.$refs[prop].validate(async (valid) => {
         if (valid) {
           try {
-            console.log(this.formData, "formData");
-            console.log(this.$props.value, "value");
-            this.$router.push({ name: "afterSales" });
-          } catch (error) {}
+            this.loading = true;
+            console.log(this.params, "params");
+            let { code, data } = await AddUser({ ...this.params });
+            if (code === 200) {
+              this.$store.dispatch("setSalesUser", { data }).then(async () => {
+                this.$toast("登录成功");
+                await this.$router.push({ name: "afterSales" });
+              });
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
         } else {
           console.log("error submit!!");
           return false;
@@ -46,6 +64,9 @@ export default {
     },
     hide() {
       this.visible = false;
+      for (const key in this.params) {
+        this.params[key] = null;
+      }
     },
   },
   created() {},
@@ -78,7 +99,7 @@ export default {
       />
     </div>
     <el-form
-      :model="formData"
+      :model="params"
       :size="$attrs.size"
       :rules="rules"
       ref="form"
@@ -87,14 +108,14 @@ export default {
     >
       <h3 style="font-weight: 600">请输入您的信息</h3>
       <p style="color: #c0c4cc; font-size: 14px">方便我们联系到您</p>
-      <el-form-item label="您的科室" prop="departments">
+      <el-form-item label="您的科室" prop="userRoom">
         <el-input
-          v-model="formData.departments"
+          v-model="params.userRoom"
           placeholder="请输入科室名称"
         ></el-input>
       </el-form-item>
-      <el-form-item label="您的姓名" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
+      <el-form-item label="您的姓名" prop="userName">
+        <el-input v-model="params.userName" placeholder="请输入姓名"></el-input>
       </el-form-item>
       <!-- <el-form-item>
         <el-button

src/views/business/as/after-sales/user/columns.js

@@ -1,21 +1,26 @@
 export default function useColumns() {
   const Columns = [
     {
-      item: { key: "userName", title: "您的姓名", },
+      item: { key: "userName", title: "您的姓名", required: true, },
       attr: {
         is: "el-input",
       }
     },
     {
-      item: { key: "userRoom", title: "您的科室", },
+      item: { key: "userRoom", title: "您的科室", required: true, },
       attr: {
         is: "el-input",
       }
     },
     {
-      item: { key: "userPhone", title: "登录手机", },
+      item: { key: "userPhone", title: "登录手机", required: true, },
       attr: {
         is: "el-input",
+        rules: [{
+          pattern: /^1[3-9]\d{9}$/,
+          message: "手机号格式错误",
+          trigger: "blur",
+        },]
       }
     },
   ]

src/views/business/as/after-sales/user/index.vue

@@ -1,25 +1,62 @@
 <!-- 用户信息 -->
 <script>
+import Cookies from "js-cookie";
 import useColumns from "./columns";
+import { GetUser, EditUser } from "@/api/business/as/after-sales";
 export default {
   name: "asUser",
   data() {
     const { Columns } = useColumns();
     const params = this.$init.params(Columns);
+    const rules = this.$init.rules(Columns);
     return {
       Columns,
       size: "mini",
       loading: false,
       title: "进度查询",
       params,
+      rules,
     };
   },
   methods: {
     useBack() {
       this.$router.go(-1);
     },
+    async fetchUser() {
+      try {
+        // const { id } = this.$store.state.salesUser;
+        console.log();
+        const id = Cookies.get("salesId");
+        let { code, data } = await GetUser({ id });
+        if (code === 200) {
+          this.params = data;
+        }
+      } catch (error) {}
+    },
+    useSubmit(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            console.log(this.params, "params");
+            this.loading = true;
+            let { code, msg } = await EditUser({ ...this.params });
+            if (code === 200) {
+              this.$toast(msg);
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  created() {
+    this.fetchUser();
   },
-  created() {},
 };
 </script>
 
@@ -44,10 +81,17 @@ export default {
     />
 
     <div style="width: 100%; padding: 16px">
-      <el-form ref="userInfo" :model="params" label-width="auto" :size="size">
+      <el-form
+        ref="userInfo"
+        :model="params"
+        label-width="auto"
+        :size="size"
+        :rules="rules"
+      >
         <el-form-item
           v-for="({ item, attr }, index) in Columns"
           :label="item.title"
+          :prop="item.key"
         >
           <component
             :is="attr.is"
@@ -58,7 +102,12 @@ export default {
       </el-form>
     </div>
 
-    <el-button type="primary" round class="stickyBtn" :size="size"
+    <el-button
+      type="primary"
+      round
+      class="stickyBtn"
+      :size="size"
+      @click="useSubmit('userInfo')"
       >提 交</el-button
     >
   </el-card>

src/views/business/as/after-sales/user/login.vue

@@ -1,5 +1,6 @@
 <!-- 登录 -->
 <script>
+import { FirstLogin } from "@/api/business/as/after-sales";
 export default {
   name: "asLogin",
   components: {
@@ -12,12 +13,14 @@ export default {
       fit: "contain",
       imgUrl: require("../images/logo.jpg"),
       formData: {
-        name: "测试项目",
-        phone: "13520547701",
+        userProject: "测试项目",
+        userPhone: "13520547701",
       },
       rules: {
-        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
-        phone: [
+        userProject: [
+          { required: true, message: "请输入项目名称", trigger: "blur" },
+        ],
+        userPhone: [
           { required: true, message: "请输入手机号码", trigger: "blur" },
           {
             pattern: /^1[3-9]\d{9}$/,
@@ -35,9 +38,19 @@ export default {
         if (valid) {
           try {
             console.log(this.formData, "formData");
-            let { setVisible } = this.$refs.BindingInfo;
-            setVisible(true);
-            // this.$router.push({ name: "BindingInfo" });
+            let { code, data } = await FirstLogin({ ...this.formData });
+            if (code === 200) {
+              if (data) {
+                this.$store.dispatch("setSalesUser", { data }).then(() => {
+                  this.$toast("登录成功");
+                  this.$router.push({ name: "afterSales" });
+                });
+              } else {
+                // 第一次登录
+                let { setVisible } = this.$refs.BindingInfo;
+                setVisible(true);
+              }
+            }
           } catch (error) {}
         } else {
           console.log("error submit!!");
@@ -77,16 +90,16 @@ export default {
       label-position="top"
     >
       <h3 style="font-weight: 600">欢迎登录</h3>
-      <el-form-item label="项目名称" prop="name">
+      <el-form-item label="项目名称" prop="userProject">
         <el-input
-          v-model="formData.name"
+          v-model="formData.userProject"
           placeholder="请输入项目名称"
           readonly
         ></el-input>
       </el-form-item>
-      <el-form-item label="手机号码" prop="phone">
+      <el-form-item label="手机号码" prop="userPhone">
         <el-input
-          v-model="formData.phone"
+          v-model="formData.userPhone"
           placeholder="请输入手机号"
         ></el-input>
       </el-form-item>

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: ` http://dev-sy.derom.com/drp-admin`, //开发
+        // target: ` http://dev-sy.derom.com/drp-admin`, //开发
         // target: `http://test-sy.derom.com/drp-admin`, //测试
         // target: `http://release-sy.derom.com/drp-admin`, //预发
         // target: `http://sy.derom.com/drp-admin`, //生产
@@ -49,6 +49,7 @@ module.exports = {
         // target: `http://172.16.13.30:8000/drp-admin`, //dz's localhost
         //  target: `http://127.0.0.1:8000/drp-admin`,
         // target: 'http://172.16.62.148:8000/drp-admin', //tkf本地
+        target: 'http://172.16.60.219:8000/drp-admin', //
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",