工单系统

components/menu/data.js

@@ -169,6 +169,10 @@ export default [{
     {
       title: "设置主页访问密码",
       path: baseUrl + "user_homepwd"
+    },
+    {
+      title: "客服工单",
+      path: baseUrl + "workorder"
     }
     ]
   },

pages/main/index/workorder.vue

@@ -0,0 +1,347 @@
+<template>
+  <div>
+    <div class="mainContainer">
+      <el-form :inline="true" :model="filterForm" class="filter-form" label-width="110px" :label-position="labelPosition">
+        <el-row>
+          <el-form-item label="工单状态">
+            <el-radio-group v-model="filterForm.status" size="mini">
+              <el-radio-button :label="0">全部</el-radio-button>
+              <el-radio-button v-for="itm in optionsData.statuses" :label="itm.status" :key="itm.status">{{itm.name}}（{{itm.count}}）</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="工单类别">
+            <el-radio-group v-model="filterForm.type" size="mini">
+              <el-radio-button :label="0">全部</el-radio-button>
+              <el-radio-button v-for="itm in optionsData.types" :label="itm.type" :key="itm.type">{{itm.name}}（{{itm.count}}）</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              size="small"
+              style="width: 360px;"
+              v-model="timeRange"
+              type="daterange"
+              align="left"
+              unlink-panels
+              range-separator="到"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              :picker-options="pickerOptions"
+            ></el-date-picker>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="工单负责人">
+            <el-radio-group v-model="filterForm.manager" size="mini">
+              <el-radio-button :label="0">全部</el-radio-button>
+              <el-radio-button v-for="itm in optionsData.managers" :label="itm.uid" :key="itm.uid">{{itm.nickname}}（{{itm.count}}）</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchManage()" size="small">查询</el-button>
+          </el-form-item>
+          <el-form-item style="float: right;margin-right: 20px;">
+            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addDialog = true">新建工单</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-table :data="workorderList" border >
+        <el-table-column label="用户">
+          <template slot-scope="scope">
+            <span class="lblue point">
+              <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{scope.row.nickname}}</a>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="user_from" label="来源"></el-table-column>
+        <el-table-column prop="company_name" label="企业信息"></el-table-column>
+        <el-table-column label="地区">
+          <template slot-scope="scope">
+            <span>{{scope.row.province}}</span>
+            <span>{{scope.row.city}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mobile" label="联系方式">
+          <template slot-scope="scope">
+            <span>手机：{{scope.row.mobile}}</span>
+            <br>
+            <span>微信：{{scope.row.weixin}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="logintime" label="注册时间"></el-table-column>
+        <el-table-column prop="count_total" label="发布项目数"></el-table-column>
+        <el-table-column prop="outcome" label="总托管费用"></el-table-column>
+        <el-table-column prop="obj_id" label="客户经理">
+          <template slot-scope="scope">
+            <span class="lblue point">
+              <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.manager_id">{{scope.row.manager_nickname}}</a>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注">
+          <template slot-scope="scope">
+            <div>{{ scope.row.remark_text }}</div>
+            <el-button type="text" @click="onToList(scope.row.uid, 6)">查看备注({{ scope.row.remark_num }})</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" @click="onRemark(scope.row.uid, 6)">添加备注</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="page">
+      <el-pagination
+        class="order-footer"
+        background
+        layout="total, prev, pager, next"
+        :page-size="20"
+        :total="total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <el-dialog title="创建工单" :visible.sync="addDialog" width="600px">
+      <el-form :model="add_form" :label-position="labelPosition" label-width="90px">
+        <el-form-item label="工单状态">
+          <el-radio-group v-model="add_form.status" size="mini">
+            <el-radio-button v-for="itm in optionsData.statuses" :label="itm.status" :key="itm.status">{{itm.name}}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="工单类别">
+          <el-radio-group v-model="add_form.type">
+            <el-radio v-for="itm in optionsData.types" :label="itm.name" :key="itm.type" :value="itm.type"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="工单负责人">
+          <el-select v-model="add_form.manager" placeholder="请选择负责人">
+            <el-option v-for="itm in optionsData.managers" :label="itm.nickname" :key="itm.uid" :value="itm.uid"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工单详情">
+          <el-input type="textarea" v-model="add_form.content" rows="4"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="addDialog = false">取消</el-button>
+        <el-button size="medium" type="primary" >确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="添加备注" :visible.sync="remarkModel">
+      <div>
+        <el-input
+          type="textarea"
+          :rows="5"
+          placeholder="请输入内容"
+          v-model="remarkData.content">
+        </el-input>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="remarkModel = false">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="onRemarkSave">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      page: 1,
+      total: 0,
+      loading: false,
+      remarkModel: false,
+      remarkType: 6,
+      remarkData: {id: '0', content: ''},
+      labelPosition: 'left',
+      filterForm: {
+        status: 0,
+        type: 0,
+        manager:0,
+      },
+      workorderList: [],
+      timeRange: [],
+      optionsData: [],
+      addDialog: false,
+      add_form: {
+        status: 1,
+        type: 1,
+        manager: '',
+        content: ''
+      },
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "全部",
+            onClick(picker) {
+              this.timeRange = [];
+              picker.$emit("pick", []);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近30天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本周",
+            onClick(picker) {
+              let week = new Date().getDay() - 1;
+              if (week == -1) {
+                week = 6;
+              }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * week);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本月",
+            onClick(picker) {
+              let month = new Date().getMonth + 1;
+              let year = new Date().getFullYear();
+              let day = new Date().getDate() - 1;
+
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "本年",
+            onClick(picker) {
+              let month = new Date().getMonth + 1;
+              let year = new Date().getFullYear();
+              let day = new Date().getDate() - 1;
+              let firstDay = new Date(year, 0, 1);
+              let dateDiff = new Date() - firstDay;
+              let msPerDay = 1000 * 60 * 60 * 24;
+              //计算天数
+              let diffDays = Math.ceil(dateDiff / msPerDay) - 1;
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * diffDays);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      },
+    }
+  },
+  mounted() {
+    this.getOptions();
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      const page = this.page;
+      const data = {
+        page,
+        type: this.filterForm.type,
+        status: this.filterForm.status,
+        manager: this.filterForm.manager
+      };
+      if (this.timeRange != null) {
+        data.start_time = this.timeRange[0];
+        data.end_time = this.timeRange[1];
+      }
+
+      let res = await this.$post("/api/admin/workorder/getList", data);
+      if (res && res.status === 1) {
+        this.workorderList = res.data.list || [];
+        this.total = res.data.total * 1;
+      }
+    },
+    async getOptions() {
+      let res = await this.$post("/api/admin/workorder/getOptions");
+      if (res && res.status === 1) {
+        this.optionsData = res.data;
+      }
+    },
+    searchManage() {
+      this.page = 1;
+      this.getList();
+    },
+    onRemark(id, type) {
+      this.remarkData.id = id;
+      this.remarkType = type;
+      this.remarkModel = true;
+    },
+    onToList(id, type) {
+      let data = {
+        obj_id: id,
+        type: type
+      }
+      this.$router.push({path: '/main/remark_list', query: data});
+    },
+    async onRemarkSave() {
+      this.loading = true;
+      if (this.remarkData.content === '' || this.remarkData.id === '0') {
+        this.$message.error('请输入内容')
+        this.loading = false
+        return false
+      }
+
+      let data = {content: this.remarkData.content, id: this.remarkData.id, type:this.remarkType}
+      let res = await this.$post("/api/admin/accountManager/saveRemark", data);
+      if (res && res.status === 1) {
+        this.$message.success('备注成功')
+        this.remarkModel = false
+        this.getData()
+      }
+      this.loading = false
+    },
+    async onUpdateManager(row) {
+      let data = {id: row.id}
+      let res = await this.$post("/api/admin/accountManager/updateManager", data);
+      if (res && res.status === 1) {
+        this.$message.success('已备注')
+        this.getData();
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getList();
+    }
+
+  }
+
+}
+</script>
+
+<style scoped>
+
+.page {
+  margin-top: 10px;
+}
+.filter-form .el-form-item{
+  margin-bottom: 0;
+}
+.filter-form{
+  margin-bottom: 10px;
+}
+</style>