✨ feat(【spd-售后问题分析-移动端】): 开发

spd问题收集运营移动端开发(界面及静态功能) 1.新增/编辑页面开发 2.运营端详情页开发 3.运营端首页开发 4.首页筛选条件弹窗界面开发 5.转工单弹窗界面开发 6.立即处理弹窗界面开发

20240806041 -v1

src/router/index.js

@@ -329,8 +329,8 @@ export const constantRoutes = [
     component: () => import('@/views/business/as/after-sales/user/index'),
     hidden: true,
   },
-   // 合作企业
-   {
+  // 合作企业
+  {
     path: '/ctyc/info/index',
     name: "Ctyc",
     component: () => import('@/views/ctyc/info/index'),
@@ -427,7 +427,7 @@ export const constantRoutes = [
     component: () => import('@/views/qualityControl/approved'),
     hidden: true,
   },
-   // 质管-供应商编辑
+  // 质管-供应商编辑
   {
     path: '/qualityControl/gysDetail',
     name: "QualityControlGysDetail",
@@ -441,6 +441,26 @@ export const constantRoutes = [
     component: () => import('@/views/qualityControl/khDetail'),
     hidden: true,
   },
+
+  // SPD售后问题分析-移动端
+  {
+    path: '/aspa-mobile/index',
+    name: "aspaMobile",
+    component: () => import('@/views/business/as/aspa-mobile/index'),
+    hidden: true,
+    meta: {
+      // keepAlive: true // 需要缓存
+    }
+  },
+  {
+    path: '/aspa-mobile/add/:id?',
+    name: "aspaAdd",
+    component: () => import('@/views/business/as/aspa-mobile/add/index'),
+    hidden: true,
+    meta: {
+      // keepAlive: true // 需要缓存
+    }
+  },
 ]
 
 

src/views/business/as/aspa-mobile/add/columns.js

@@ -0,0 +1,97 @@
+export default function useColumns() {
+  const userColumns = [
+    {
+      item: { key: "projectSource", title: "项目医院", required: true, },
+      attr: {
+        is: "el-select",
+        // readonly: true,
+      }
+    },
+    {
+      item: { key: "roomInformation", title: "需求科室", required: true, },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: {
+        key: "questioner",
+        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: "问题类型", required: true, },
+      attr: {
+        is: "el-select",
+        options: [
+          { label: "软件问题", value: "1" },
+          { label: "硬件问题", value: "2" },
+          { label: "服务问题", value: "3" },
+          { label: "其他问题", value: "4" },
+        ],
+      }
+    },
+    {
+      item: { key: "problemDescription", title: "问题描述", required: true, },
+      attr: {
+        is: "el-input",
+        rows: 5,
+        type: "textarea",
+        placeholder: "请输入内容",
+      }
+    },
+    {
+      item: {
+        key: "files",
+        title: "问题图片",
+      },
+      attr: {
+        is: "image-upload",
+        size: "mini",
+      }
+    },
+    {
+      item: {
+        key: "",
+        title: "处理负责人",
+
+      },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "", title: "处理人电话", },
+      attr: {
+        is: "el-input",
+        readonly: true,
+        rules: [{
+          pattern: /^1[3-9]\d{9}$/,
+          message: "手机号格式错误",
+          trigger: "blur",
+        },]
+      }
+    },
+  ];
+  return { userColumns, problemColumns };
+}

src/views/business/as/aspa-mobile/add/index.vue

@@ -0,0 +1,200 @@
+<script>
+import useColumns from "./columns";
+export default {
+  name: "ASPA-ADD",
+  props: {},
+  components: {
+    ImageUpload: () =>
+      import(
+        "@/views/business/as/after-sales/components/image-upload/index.vue"
+      ),
+  },
+  data() {
+    const { userColumns, problemColumns } = useColumns();
+
+    const params = this.$init.params([...userColumns, ...problemColumns]);
+    const rules = this.$init.rules([...userColumns, ...problemColumns]);
+    return {
+      rules,
+      params,
+      userColumns,
+      problemColumns,
+      size: "mini",
+      loading: false,
+      files: [],
+      isAdd: true,
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        let { id } = this.$route.params;
+        if (id) {
+          this.isAdd = false;
+          return "编 辑";
+        }
+        this.isAdd = true;
+        return "新 增";
+      },
+      set() {},
+    },
+  },
+  methods: {
+    useBack() {
+      this.$router.go(-1);
+    },
+    useSubmit(prop) {
+      // this.$refs[prop].validate(async (valid) => {
+      //   if (valid) {
+      try {
+        console.log({ params: this.params, files: this.files }, "params");
+        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",
+        });
+        // 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 fetchItem(id) {
+      try {
+        this.loading = true;
+        // let {code,data} = await
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  created() {
+    let { id } = this.$route.params;
+    if (id) {
+      this.fetchItem(id);
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="ASPA-ADD" v-loading="loading">
+    <van-sticky style="width: 100%">
+      <van-nav-bar
+        :title="title"
+        left-text="返回"
+        right-text="保存"
+        left-arrow
+        @click-left="useBack"
+        @click-right="useSubmit"
+        style="width: 100%"
+      />
+    </van-sticky>
+    <div style="width: 100%; padding: 16px">
+      <el-form
+        ref="problemInfo"
+        :model="params"
+        label-width="auto"
+        :size="size"
+        :rules="rules"
+      >
+        <!-- 基本信息 -->
+        <el-row>
+          <el-form-item
+            v-for="({ item, attr }, index) in userColumns"
+            :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[item.key]"
+            ></component>
+          </el-form-item>
+        </el-row>
+
+        <!-- 问题信息 -->
+        <el-row>
+          <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[item.key]"
+              style="width: 100%"
+            ></component>
+          </el-form-item>
+          <!-- <el-form-item label="问题图片" prop="files">
+            <image-upload v-model="files" :size="size"></image-upload>
+          </el-form-item> -->
+        </el-row>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ASPA-ADD {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f7f7f7;
+}
+.el-row {
+  width: 100%;
+  padding: 16px 16px 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+</style>

src/views/business/as/aspa-mobile/index.vue

@@ -0,0 +1,19 @@
+<!--  SPD售后问题分析-移动端 -->
+<script>
+export default {
+  name: "ASPA-MOBILE",
+  props: {},
+  components: {},
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  methods: {
+    useSubmit(){},
+    useBack(){},
+  },
+  created() {},
+};
+</script>
+<template></template>

src/views/business/as/aspa-mobile/operating-btn/cl/index.vue

@@ -0,0 +1,72 @@
+<script>
+export default {
+  name: "CL",
+  props: {},
+  components: {
+    ImageUpload: () =>
+      import(
+        "@/views/business/as/after-sales/components/image-upload/index.vue"
+      ),
+  },
+  data() {
+    return {
+      title: "",
+      visible: false,
+      params: {
+        processingFeedback: null,
+        files: [],
+      },
+      rules: {
+        processingFeedback: [
+          { required: true, message: "请输入处理反馈", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    open() {},
+    close() {},
+    beforeClose() {},
+    useConfirm(){},
+  },
+};
+</script>
+
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="visible"
+    direction="btt"
+    :before-close="beforeClose"
+    @close="close"
+    @open="open"
+  >
+    <div>
+      <el-form
+        :size="$attrs.size"
+        ref="transferOrder"
+        :model="params"
+        label-width="auto"
+        :rules="rules"
+      >
+        <el-form-item label="描述" prop="processingFeedback">
+          <el-input
+            v-model="params.processingFeedback"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入处理反馈"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="图片">
+          <image-upload v-model="params.files" :size="size"></image-upload>
+        </el-form-item>
+      </el-form>
+      <el-row type="flex" class="row-bg" justify="end">
+        <el-button :size="$attrs.size" type="primary" @click="useConfirm"
+          >确 认</el-button
+        >
+        <el-button :size="$attrs.size" @click="close">取 消</el-button>
+      </el-row>
+    </div>
+  </el-drawer>
+</template>

src/views/business/as/aspa-mobile/operating-btn/search/index.vue

@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: "Search",
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {},
+};
+</script>

src/views/business/as/aspa-mobile/operating-btn/zgd/index.vue

@@ -0,0 +1,91 @@
+<script>
+export default {
+  name: "ZGD",
+  props: {},
+  data() {
+    const columns = [
+      {
+        item: {
+          key: "workOrderProcessor",
+          title: "工单处理人",
+          required: true,
+        },
+        attr: {
+          is: "el-input",
+        },
+      },
+      {
+        item: {
+          key: "processorEndTime",
+          title: "处理截至时间",
+          required: true,
+        },
+        attr: {
+          is: "el-date-picker",
+          type: "date",
+          valueFormat: "yyyy-MM-dd",
+          placeholder: "选择处理截至时间",
+        },
+      },
+    ];
+    const rules = this.$init.rules(columns);
+    const params = this.$init.params(columns);
+    return {
+      rules,
+      params,
+      columns,
+      title: "确认该问题转工单处理？",
+      visible: false,
+    };
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    open() {},
+    beforeClose() {},
+    useConfirm() {},
+    close() {},
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="visible"
+    direction="btt"
+    :before-close="beforeClose"
+    @close="close"
+    @open="open"
+  >
+    <div>
+      <el-form
+        :size="$attrs.size"
+        ref="transferOrder"
+        :model="params"
+        label-width="auto"
+        :rules="rules"
+      >
+        <el-form-item
+          v-for="({ item, attr }, index) in columns"
+          :label="item.title"
+          :prop="item.key"
+        >
+          <component
+            :is="attr.is"
+            v-bind="attr"
+            v-model="params[item.key]"
+          ></component>
+        </el-form-item>
+      </el-form>
+      <el-row type="flex" class="row-bg" justify="end">
+        <el-button :size="$attrs.size" type="primary" @click="useConfirm"
+          >确 认</el-button
+        >
+        <el-button :size="$attrs.size" @click="close">取 消</el-button>
+      </el-row>
+    </div>
+  </el-drawer>
+</template>