✨ feat(【spd-售后问题分析-移动端】): 详情、功能按钮

开发

20240806041 -v2

src/router/index.js

@@ -457,9 +457,12 @@ export const constantRoutes = [
     name: "aspaAdd",
     component: () => import('@/views/business/as/aspa-mobile/add/index'),
     hidden: true,
-    meta: {
-      // keepAlive: true // 需要缓存
-    }
+  },
+  {
+    path: '/aspa-mobile/see/:id?',
+    name: "aspaSee",
+    component: () => import('@/views/business/as/aspa-mobile/see/index'),
+    hidden: true,
   },
 ]
 

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

@@ -3,17 +3,22 @@
 export default {
   name: "ASPA-MOBILE",
   props: {},
-  components: {},
+  components: {
+    Sizer: () => import("./operating-btn/sizer/index.vue"),
+  },
   data() {
     return {
+      size: "mini",
       loading: false,
     };
   },
   methods: {
-    useSubmit(){},
-    useBack(){},
+    useBack() {},
+    useQuery() {},
   },
   created() {},
 };
 </script>
-<template></template>
+<template>
+  <Sizer :size="size" @refresh="useQuery"></Sizer>
+</template>

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

@@ -10,7 +10,8 @@ export default {
   },
   data() {
     return {
-      title: "",
+      size: "45%",
+      title: "立即处理",
       visible: false,
       params: {
         processingFeedback: null,
@@ -24,49 +25,71 @@ export default {
     };
   },
   methods: {
+    useClick() {
+      this.visible = true;
+    },
     open() {},
-    close() {},
     beforeClose() {},
-    useConfirm(){},
+    close() {
+      this.visible = false;
+    },
+    useConfirm() {
+      console.log(this.params, "params");
+    },
   },
 };
 </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 type="primary" round :size="$attrs.size" @click="useClick">
+    {{ title }}
+    <el-drawer
+      :size="size"
+      :title="title"
+      append-to-body
+      direction="btt"
+      :show-close="false"
+      :visible.sync="visible"
+      :before-close="beforeClose"
+      @close="close"
+      @open="open"
+    >
+      <div style="padding: 0px 15px">
+        <el-form
+          :model="params"
+          :rules="rules"
+          :size="$attrs.size"
+          ref="dealtOrder"
+          label-width="auto"
         >
-        <el-button :size="$attrs.size" @click="close">取 消</el-button>
-      </el-row>
-    </div>
-  </el-drawer>
+          <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="$attrs.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>
+  </el-button>
 </template>
+
+<style lang="scss" scoped>
+::v-deep .el-drawer__header {
+  margin-bottom: 20px;
+}
+</style>

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

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

src/views/business/as/aspa-mobile/operating-btn/sizer/columns.js

@@ -0,0 +1,90 @@
+export default function useColumns() {
+
+  const formColumns = [
+    {
+      item: { key: "hospitalId", title: "项目医院", },
+      attr: {
+        is: "el-select",
+      }
+    },
+    {
+      item: { key: "isAuto", title: "问题来源", },
+      attr: {
+        is: "el-select",
+        options: [
+          { value: '', label: '全部', },
+          { value: '0', label: '群自动收集', },
+          { value: '1', label: '客户提交', },
+        ],
+      }
+    },
+    {
+      item: { key: "problemDescription", title: "问题描述", },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: { key: "problemType", title: "问题类型", },
+      attr: {
+        is: "el-select",
+        options: [
+          { value: '1', label: '软件问题', },
+          { value: '2', label: '硬件问题', },
+          { value: '3', label: '服务问题', },
+          { value: '4', label: '其他问题', },
+        ]
+      }
+    },
+    {
+      item: { key: "roomInformation", title: "科室信息", },
+      attr: {
+        is: "el-select",
+      }
+    },
+    {
+      item: { key: "questioner", title: "提问人", },
+      attr: {
+        is: "",
+      }
+    },
+    {
+      item: { key: "processor", title: "处理负责人", },
+      attr: {
+        is: "",
+      }
+    },
+    {
+      item: { key: "isProblem", title: "是否非问题", },
+      attr: {
+        is: "el-select",
+        options: [
+          { value: '0', label: '全部', },
+          { value: '1', label: '问题', },
+          { value: '2', label: '非问题', },
+        ],
+      }
+    },
+    {
+      item: { key: "creatStart", title: "开始日期", },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+        rangeSeparator: "至",
+        placeholder: "问题创建开始日期",
+        endPlaceholder: "结束日期",
+      }
+    },
+    {
+      item: { key: "creatEnd", title: "结束日期", },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+        placeholder: "问题创建结束日期",
+      }
+    },
+  ];
+  return { formColumns };
+}

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

@@ -0,0 +1,107 @@
+<script>
+import useColumns from "./columns";
+export default {
+  name: "Sizer",
+  props: {},
+  data() {
+    const { formColumns } = useColumns();
+    const params = this.$init.params(formColumns);
+    return {
+      params,
+      formColumns,
+      size: "85%",
+      title: "筛 选",
+      visible: false,
+    };
+  },
+  methods: {
+    useClick() {
+      this.visible = true;
+    },
+    open() {},
+    useQuery() {},
+    useReset() {},
+    beforeClose() {},
+    close() {},
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-button type="text" :size="$attrs.size" @click="useClick">
+    {{ title }}
+    <i class="el-icon-arrow-down"></i>
+    <el-drawer
+      :size="size"
+      :title="title"
+      append-to-body
+      direction="btt"
+      :show-close="false"
+      :visible.sync="visible"
+      :before-close="beforeClose"
+      @close="close"
+      @open="open"
+    >
+      <template #title>
+        <span style="text-align: center; font-weight: 600; color: #333">{{
+          title
+        }}</span>
+      </template>
+
+      <div style="padding: 0px 15px 15px; margin-top: 15px">
+        <el-form
+          :model="params"
+          :size="$attrs.size"
+          ref="query"
+          label-width="auto"
+        >
+          <el-form-item
+            v-for="({ item, attr }, index) in formColumns"
+            :key="index"
+            :prop="item.key"
+            :label="item.title"
+          >
+          <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>
+          </component>
+          </el-form-item>
+        </el-form>
+        <el-row type="flex" class="row-bg" justify="center">
+          <el-button-group>
+            <el-button :size="$attrs.size" @click="useReset">重 置</el-button>
+            <el-button :size="$attrs.size" type="primary" @click="useQuery"
+              >搜 索</el-button
+            >
+          </el-button-group>
+        </el-row>
+      </div>
+    </el-drawer>
+  </el-button>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .el-drawer__header {
+  margin-bottom: 0px;
+  padding: 15px 15px 0;
+}
+</style>

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

@@ -34,58 +34,79 @@ export default {
       rules,
       params,
       columns,
-      title: "确认该问题转工单处理？",
+      size: "35%",
+      title: "转工单专人处理",
       visible: false,
     };
   },
   methods: {
-    setVisible(prop) {
-      this.visible = prop;
+    useClick() {
+      this.visible = true;
     },
     open() {},
-    beforeClose() {},
-    useConfirm() {},
-    close() {},
+    useConfirm() {
+      console.log(this.params, "params");
+      // this.close();
+    },
+    beforeClose() {
+      this.params = this.$init.params(this.columns);
+    },
+    close() {
+      this.visible = false;
+    },
   },
   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"
+  <el-button type="warning" round :size="$attrs.size" @click="useClick">
+    {{ title }}
+    <el-drawer
+      :size="size"
+      :title="title"
+      append-to-body
+      direction="btt"
+      :show-close="false"
+      :visible.sync="visible"
+      :before-close="beforeClose"
+      @close="close"
+      @open="open"
+    >
+      <div style="padding: 0px 15px">
+        <el-form
+          :model="params"
+          :rules="rules"
+          :size="$attrs.size"
+          ref="transferOrder"
+          label-width="auto"
         >
-          <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>
+          <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]"
+              style="width: 100%"
+            ></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>
+  </el-button>
 </template>
+
+<style lang="scss" scoped>
+::v-deep .el-drawer__header {
+  margin-bottom: 20px;
+}
+</style>

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

@@ -0,0 +1,48 @@
+export default function useColumns() {
+
+  const formColumns = [
+    {
+      item: { key: "projectSource", title: "项目医院" },
+      attr: {}
+    },
+    {
+      item: { key: "roomInformation", title: "需求科室", required: true, },
+      attr: {}
+    },
+    {
+      item: { key: "questioner", title: "需求人员", },
+      attr: {}
+    },
+    {
+      item: { key: "questionerWay", title: "联系方式", required: true, },
+      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/aspa-mobile/see/index.vue

@@ -0,0 +1,188 @@
+<script>
+import useColumns from "./columns";
+export default {
+  name: "ASPA-SEE",
+  components: {
+    zgdButton: () => import("../operating-btn/zgd/index.vue"),
+    clButton: () => import("../operating-btn/cl/index.vue"),
+    ElFormatValue: () =>
+      import(
+        "@/views/business/as/after-sales/components/format-value/index.vue"
+      ),
+    ElImagePreview: () =>
+      import(
+        "@/views/business/as/after-sales/components/image-preview/index.vue"
+      ),
+  },
+  data() {
+    const { formColumns } = useColumns();
+    const params = this.$init.params(formColumns);
+    return {
+      params,
+      formColumns,
+      size: "mini",
+      loading: false,
+      title: "问题详情",
+      imgUrl: require("../images/order.png"),
+    };
+  },
+  methods: {
+    useBack() {},
+    useEdit() {},
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <div class="ASPA-SEE" v-loading="loading">
+    <van-sticky style="width: 100%">
+      <van-nav-bar
+        :title="title"
+        left-text="返回"
+        right-text="编辑"
+        left-arrow
+        @click-left="useBack"
+        @click-right="useEdit"
+        style="width: 100%"
+      />
+    </van-sticky>
+    <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-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-row type="flex" justify="end" style="margin: 15px 0">
+        <zgd-button :size="size"></zgd-button>
+        <cl-button :size="size"></cl-button>
+      </el-row>
+
+      <el-card shadow="never">
+        <p class="dispose">
+          <span>问题处理情况</span>
+          <span style="color: #ff8500; font-size: 12px"
+            >持续时长:{{ params.processingTime }}</span
+          >
+        </p>
+        <el-timeline style="padding: 16px 12px">
+          <el-timeline-item
+            v-for="(flow, index) in params.processFlow"
+            :key="index"
+            :timestamp="flow.timestamp"
+            size="large"
+          >
+            <div>
+              <span
+                >[{{
+                  handleStatus(
+                    flow.problemStateConvert,
+                    flow.problemStateSolve
+                  )
+                }}] {{ flow.content }}</span
+              >
+              <div style="padding: 6px 0 0">
+                <span>处理人：{{ flow.processorName }}</span>
+                <el-button
+                  v-if="flow.processorWay"
+                  type="text"
+                  @click="useCall(flow)"
+                  style="padding: 0px 12px"
+                  >{{ flow.processorWay }}</el-button
+                >
+              </div>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+      </el-card>
+    </el-form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ASPA-SEE {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f7f7f7;
+  .el-form {
+    height: calc(100vh - 46px);
+    padding: 16px;
+    background-color: #f7f7f7;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .el-descriptions {
+    padding: 12px;
+    background-color: #fff;
+    border-radius: 4px;
+  }
+}
+
+::v-deep .el-descriptions__header {
+  margin: 0 0 12px;
+  color: #303133;
+}
+::v-deep .el-descriptions__title {
+  width: 100%;
+}
+.mes_title {
+  width: 100%;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+::v-deep .van-uploader__upload {
+  display: none;
+}
+
+.el-card {
+  font-size: 14px;
+}
+::v-deep .el-card__body {
+  padding: 0;
+}
+.dispose {
+  border-bottom: 1px solid #e2dede;
+  margin: 0;
+  line-height: 28px;
+  padding: 6px 12px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>