阜外预约管理代码提交

fuwaiCallCenterWeb.UI/config/dev.env.js

@@ -3,10 +3,10 @@
 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  BASE_API: '"http://192.168.5.42:28000/"', // 这里放测试API
+  BASE_API: '"http://192.168.5.60:28000/"', // 这里放测试API
   SOCKET_IP: '"192.168.5.41"', // WebSocket通讯ip
   SOCKET_PORT: '"28822"', // WebSocket通讯端口
-  LineChat_SOCKET_IP: '"192.168.5.42"', // 在线客服WebSocket通讯ip
+  LineChat_SOCKET_IP: '"192.168.5.60"', // 在线客服WebSocket通讯ip
   LineChat_SOCKET_PORT: '"28300"', // 在线客服WebSocket通讯端口
   PAGESIZES: '[10, 20, 50, 100]', // number[] 表格每页显示个数选择器的选项设置
   PAGESIZE: '10', // number 表格每页显示条目个数

fuwaiCallCenterWeb.UI/config/sit.env.js

@@ -3,10 +3,10 @@
 module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"sit"',
-  BASE_API: '"http://192.168.5.42:28000/"', // API地址
+  BASE_API: '"http://192.168.5.60:28000/"', // API地址
   SOCKET_IP: '"192.168.5.41"', // WebSocket通讯ip
   SOCKET_PORT: '"28822"', // WebSocket通讯端口
-  LineChat_SOCKET_IP: '"192.168.5.42"', // 在线客服WebSocket通讯ip
+  LineChat_SOCKET_IP: '"192.168.5.60"', // 在线客服WebSocket通讯ip
   LineChat_SOCKET_PORT: '"28300"', // 在线客服WebSocket通讯端口
   PAGESIZES: '[10, 20, 50, 100]', // number[] 表格每页显示个数选择器的选项设置
   PAGESIZE: '10', // number 表格每页显示条目个数

fuwaiCallCenterWeb.UI/src/views/appointment/VisitInformation/addOrEdit.vue

@@ -0,0 +1,327 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
+      <el-form-item label="工单来源" prop="sourceid">
+        <el-select v-model="ruleForm.sourceid" class="form_select" filterable clearable placeholder="请选择工单来源">
+          <el-option v-for="item in sourceOptions" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工单类型" prop="typeid">
+        <el-select v-model="ruleForm.typeid" class="form_select" filterable clearable placeholder="请选择工单类型">
+          <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户姓名" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入客户姓名"/>
+      </el-form-item>
+      <el-form-item label="客户电话" prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入客户电话"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="ruleForm.sex">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="所在地" prop="provinceCity">
+        <el-cascader
+          v-model="provinceCity"
+          :options="provinceCityDatas"
+          :props="props"
+          placeholder="请选择省市"
+          class="form_select"
+          clearable
+          filterable
+          change-on-select/>
+      </el-form-item>
+      <el-form-item label="具体地址" prop="address">
+        <el-input v-model="ruleForm.address" placeholder="请输入具体地址"/>
+      </el-form-item>
+      <el-form-item label="工单内容" prop="content">
+        <el-input v-model="ruleForm.content" type="textarea" autosize placeholder="请输入工单内容"/>
+      </el-form-item>
+      <el-form-item label="附件" prop="files">
+        <el-upload
+          ref="upload"
+          :file-list="uploadData.fileList"
+          :action= "uploadData.uploadUrl"
+          :data = "uploadData.uploaderFiles"
+          :on-success="uploadSuccess"
+          :on-error="uploadError"
+          :on-remove="uploadRemove"
+          class="uploadFiles"
+          list-type="picture"
+          multiple>
+          <el-button size="small" type="primary">点击上传</el-button>
+          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+          <!-- <i class="el-icon-plus"></i> -->
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm">保存</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { getOrder, addOrder, editOrder } from '@/api/order/orderSearch'
+import { validateTel } from '@/utils/validate'
+import { delFiles, filterContent } from '@/utils'
+
+const validateTelRule = (rule, value, callback) => {
+  if (!validateTel(value)) {
+    callback(new Error('请输入有效的客户电话!'))
+  } else {
+    callback()
+  }
+}
+
+export default {
+  name: 'AddOrEdit',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    callid: {
+      type: Number,
+      default: 0
+    },
+    layerid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      uploadData: {// 文件上传数据
+        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
+        uploaderFiles: {// 上传文件的参数 //是	string	模块code，如：test
+          uploadtype: 'orderFiles'
+        },
+        fileList: [] // 展示文件的数据
+      },
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: { // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sourceOptions: [], // 工单来源下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      ruleForm: {
+        unique_id: '', //		否	string	callid
+        ordercode: '',
+        sourceid: '', //	否	string	来源id
+        typeid: '', //	否	string	类型id
+        name: '', //	否	string	姓名
+        phone: '', //	是	string	号码
+        sex: '男', //	否	string	性别
+        province: '', //	否	string	省code
+        city: '', //	否	string	市code
+        address: '', //	否	string	地址
+        // deptid: '', //	否	string	部门id
+        content: '', //	是	string	工单内容
+        files: [] // 否	list	附件json
+      },
+      rules: {
+        sourceid: [{
+          required: true,
+          message: '请选择工单来源',
+          trigger: 'blur'
+        }],
+        typeid: [{
+          required: true,
+          message: '请选择工单类型',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入客户姓名',
+          trigger: 'blur'
+        }],
+        phone: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateTelRule
+        }]
+      },
+      loading: false
+    }
+  },
+  created() {
+    if (this.callid) {
+      this.ruleForm.unique_id = this.callid
+    }
+    Promise.all([this.getOrderSource(), this.getOrderType(), this.getProCity()])
+      .then(() => {
+        if (this.rowid) {
+          this.ruleForm.ordercode = this.rowid
+          this.getDetail(this.rowid)
+        }
+      })
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.ruleForm.province = this.provinceCity && this.provinceCity[0]
+          this.ruleForm.city = this.provinceCity && this.provinceCity[1]
+          this.ruleForm.content = filterContent.delHtmlTag(this.ruleForm.content)// 保存内容时去掉 html 标签
+          this.loading = true
+          // 添加
+          if (!this.rowid) {
+            addOrder(this.ruleForm).then(response => {
+              this.loading = false
+              if (response.state.toLowerCase() === 'success') {
+                this.$parent.$layer.close(this.layerid)
+                if (this.callid) {
+                  this.$parent.getOrderRecord() // 重新加载来电弹屏工单记录
+                } else {
+                  this.$parent.getList() // 重新加载父级数据
+                }
+                this.$message.success('恭喜你，工单信息添加成功!')
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+            return
+          }
+          // 编辑
+          editOrder(this.ruleForm).then(response => {
+            this.loading = false
+            if (response.state.toLowerCase() === 'success') {
+              this.$parent.$layer.close(this.layerid)
+              this.$parent.getList() // 重新加载父级数据
+              this.$message.success('恭喜你，工单信息编辑成功!')
+            }
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          this.$message.error('请输入有效的必填项信息!')
+          return false
+        }
+      })
+    },
+    resetForm() {
+      if (!this.rowid) {
+        if (this.ruleForm.files.length > 0) {
+          for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+          }
+        }
+        this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+      }
+      this.provinceCity = []
+      this.$refs.ruleForm.resetFields()
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ruleForm.sourceid = res.sourceid // 来源
+          this.ruleForm.typeid = res.typeid // 类型
+          this.ruleForm.name = res.name // 姓名
+          this.ruleForm.phone = res.phone // 电话
+          this.ruleForm.sex = res.sex // 性别
+          this.provinceCity = [res.province, res.city]
+          this.ruleForm.address = res.address // 具体地址
+          this.ruleForm.content = res.content // 内容
+
+          // 附件
+          if (res.files) {
+            for (let i = 0, len = res.files.length; i < len; i++) {
+              this.uploadData.fileList.push({
+                'name': res.files[i].filename,
+                'url': res.files[i].fileurl
+              })
+            }
+            this.ruleForm.files = res.files
+          }
+        }
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 文件上传
+    uploadSuccess(response, file, fileList) {
+      if (response.state.toLowerCase() === 'success') {
+        this.ruleForm.files.push(response.data[0])
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    uploadRemove(file, fileList) {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
+          if (this.ruleForm.files[i].filename === file.name) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+            return
+          }
+        }
+      }
+    },
+    uploadError(err, file, fileList) {
+      // console.log(err)
+      this.$message.error(err)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.order_form .form_select{
+	width: 100%;
+}
+.order_form .uploadFiles .el-upload-list--picture{
+	margin-right: -1%;
+}
+.order_form .el-upload-list--picture li{
+	width: 24%;
+	margin-right: 1%;
+	float: left;
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/VisitInformation/detail.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="order_detail">
+    <el-row :gutter="20">
+      <el-col :md="24" class="order_detail_body">
+        <el-card shadow="hover">
+          <el-col :md="3">
+            <div class="round_img">
+              <img :src="avatar" alt="头像">
+            </div>
+          </el-col>
+          <el-col :md="21">
+            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />工单编号：{{ ordercode }}</h1>
+            <!-- <p class="title_sub"><span class="green">{{ name }}</span> {{ createtime }}</p> -->
+            <p class="title_sub"><span class="green">{{ name }}</span> 	河南阜外华中心血管病医院 {{ createtime }}</p>
+            <p class="title_sub">催单次数：<span class="red">10</span>次 | 工单状态： <span class="done">已完成</span></p>
+          </el-col>
+          <el-col :md="24" class="order_detail_content">
+            <el-col :md="6" class="order_detail_item">
+              客户电话：{{ phone }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              客户性别：{{ sex }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              工单来源：{{ sourcename }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              工单类型：{{ sourcetype }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              地址：{{ address }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              创建人：{{ createuser }}
+            </el-col>
+            <el-col :md="24" class="order_detail_item">
+              工单内容：
+              <div class="order_content" v-html="content"/>
+            </el-col>
+            <el-col v-if="fileList.length > 0" :md="24" class="order_detail_item">
+              <p>附件：<span class="yellow">（可以下载查看）</span></p>
+
+              <el-col v-for="(item, index) in fileList" :md="3" :key="index">
+                <el-card class="order_file">
+                  <span class="img_mask">
+                    <a :href="item.fileurl" download="filename" title="点击下载">
+                      <i class="el-icon-download"/>
+                    </a>
+                  </span>
+                  <img v-if="item.filesmallurl" :src="item.filesmallurl" :large="item.fileurl" :preview-text="item.filename" preview="0" height="68" width="80%">
+                  <i v-else class="el-icon-document file_icon"/>
+                  <p :title="item.filename"> {{ item.filename }} </p>
+                </el-card>
+              </el-col>
+
+            </el-col>
+            <el-col :md="6">
+              <i class="el-icon-time"/>
+              已持续 <span class="red">20</span> 小时 <span class="red">20</span> 分 <span class="red">20</span> 秒
+            </el-col>
+            <el-col :md="6" :offset="12">
+              <el-button type="primary" size="mini" plain>催单</el-button>
+              <el-button type="primary" size="mini" plain>转派</el-button>
+              <el-button type="primary" size="mini" plain>完成</el-button>
+            </el-col>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col :md="12">
+        <el-card shadow="hover">
+          <div slot="header" class="clearfix">
+            <span>工单动态</span>
+          </div>
+          <div class="order_steps">
+            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
+              <el-step title="已完成" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+              <el-step title="已转派" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+              <el-step title="已创建" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+            </el-steps>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="12">
+        <el-card shadow="hover" class="order_record">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="催单记录(2)" name="first">
+              <div class="tab_body">
+                催单记录
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="录音记录(3)" name="second">
+              <div class="tab_body">
+                录音记录
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getOrder } from '@/api/order/orderSearch'
+import { mapGetters } from 'vuex'
+import { filterContent } from '@/utils'
+
+export default {
+  name: 'Detail',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      activeName: 'first',
+      ordercode: '', // 工单编号
+      name: '', // 姓名
+      phone: '', // 电话
+      sex: '', // 性别
+      address: '', // 地址
+      sourcename: '', // 工单来源
+      sourcetype: '', // 工单类型
+      content: '', // 工单内容
+      createtime: '', // 创建时间
+      createuser: '', // 创建人
+      fileList: [] // 附件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'avatar'
+    ])
+  },
+  created() {
+    if (this.rowid) {
+      this.getDetail(this.rowid)
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ordercode = res.ordercode // 工单编号
+          this.name = res.name // 姓名
+          this.phone = res.phone // 电话
+          this.sex = res.sex // 性别
+          res.provincename = res.provincename === null ? '' : res.provincename
+          res.cityname = res.cityname === null ? '' : res.cityname
+          res.address = res.address === null ? '' : res.address
+          this.address = res.provincename + res.cityname + res.address // 地址
+          this.sourcename = res.sourcename // 工单来源
+          this.sourcetype = res.typename // 工单类型
+          this.content = filterContent.content(res.content) // 工单内容
+          this.createtime = res.createtime // 创建时间
+          this.createuser = res.createuser + '-' + res.createusername // 创建人
+          // 附件
+          if (res.files) {
+            this.fileList = res.files
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_detail{
+		.el-col{
+			margin-bottom: 20px;
+		}
+		.el-icon-time{
+			color: #d81e06;
+		}
+		.el-card__header{
+			padding-top: 14px;
+			padding-bottom: 14px;
+			background-color: #F5F5F6;
+		}
+		.order_file{
+			.el-card__body{
+				padding: 22px 0 0 0;
+				text-align: center;
+			}
+		}
+		.order_steps{
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+		.order_record {
+			.el-card__body{
+				padding: 0;
+			}
+			.el-tabs__header{
+				padding: 0px 20px;
+				background-color: #F5F5F6;
+					.el-tabs__item{
+						font-size: 16px;
+						height: 47px;
+						line-height: 47px;
+					}
+			}
+		}
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.order_detail{
+		.order_detail_body{
+			margin-bottom: 20px;
+			.round_img{
+				width: 90px;
+				height: 90px;
+				border-radius: 50%;
+				overflow: hidden;
+				margin: 14px;
+				img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title{
+				font-size: 20px;
+				.title_icon{
+					color: #d81e06;
+					font-size: 16px;
+					margin-right: 20px;
+				}
+			}
+			.title_sub{
+				font-size: 14px;
+				color: #666666;
+			}
+			.order_detail_content{
+				background-color: #F5F5F6;
+				padding-top: 20px;
+				color: #4c4c4c;
+				font-size: 14px;
+				.order_detail_item{
+					margin-bottom: 10px;
+					.order_content{
+						margin-top: 10px;
+					}
+					.order_file {
+						position: relative;
+						cursor: pointer;
+						.img_mask {
+							display: none;
+							position: absolute;
+							left: 0px;
+							top: 0px;
+							background-color: rgba(0, 0, 0, 0.3);
+							width: 100%;
+							height: 22px;
+							text-align: right;
+							z-index: 1;
+							i {
+								font-size: 20px;
+								line-height: 22px;
+								display: inline-block;
+								margin-right: 15px;
+								color: #fff;
+							}
+						}
+						p {
+							margin-top: 5px;
+							padding-left: 14px;
+							padding-right: 14px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+						.file_icon{
+							height: 68px;
+							line-height: 68px;
+							font-size: 68px;
+							color: #409EFF;
+						}
+					}
+					.order_file:hover .img_mask {
+						display: block;
+					}
+				}
+			}
+		}
+		.green {
+			color: #00c1de;
+		}
+		.done {
+			color: #198120;
+		}
+		.red {
+			color: #d81e06;
+		}
+		.yellow{
+			color: #e6a23c;
+		}
+		.order_steps{
+			// height: 240px;
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+
+		.tab_body{
+			padding: 0 20px 20px 20px;
+		}
+	}
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/VisitInformation/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-cascader
+        v-model="provinceCity"
+        :options="provinceCityDatas"
+        :props="props"
+        placeholder="请选择省市"
+        class="filter-item"
+        clearable
+        filterable
+        change-on-select/>
+      <el-select v-model="sc_source" class="filter-item" filterable clearable placeholder="请选择工单来源">
+        <el-option
+          v-for="item in sourceOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"/>
+      </el-select>
+      <el-select v-model="sc_type" class="filter-item" filterable clearable placeholder="请选择工单类型">
+        <el-option
+          v-for="item in typeOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"/>
+      </el-select>
+      <el-date-picker
+        v-model="searchDate"
+        :picker-options="pickerOptions"
+        class="filter-item"
+        type="daterange"
+        format="yyyy年MM月dd日"
+        value-format="yyyy-MM-dd"
+        align="left"
+        unlink-panels
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"/>
+      <el-input v-model="sc_tel" placeholder="请输入电话号码" class="filter-item"/>
+      <el-input v-model="sc_ordercode" placeholder="请输入工单编号" class="filter-item"/>
+      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
+      <el-button v-permission="'HY_add'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="dataLists" border stripe>
+      <el-table-column type="index" label="编号" align="center" fixed width="80"/>
+      <el-table-column prop="ordercode" label="工单编号" align="center" min-width="140"/>
+      <el-table-column prop="sourcename" label="工单来源" align="center" min-width=""/>
+      <el-table-column prop="typename" label="工单类型" align="center" min-width=""/>
+      <el-table-column prop="provincename" label="所在省" align="center"/>
+      <el-table-column prop="cityname" label="所在市" align="center"/>
+      <el-table-column prop="address" label="具体地址" align="center"/>
+      <el-table-column label="工单内容" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.content | formatterContent }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" align="center"/>
+      <el-table-column prop="phone" label="电话" align="center"/>
+      <el-table-column prop="sex" label="性别" align="center"/>
+      <el-table-column prop="createuser" label="创建人" align="center"/>
+      <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"/>
+      <el-table-column label="操作" width="220" align="center" class-name="oparate_btn" fixed="right">
+        <template slot-scope="scope">
+          <el-button v-permission="'HY_detail'" size="mini" plain type="primary" @click="btn_detail(scope.row.ordercode)">详情</el-button>
+          <el-button v-permission="'HY_edit'" size="mini" plain type="primary" @click="btn_edit(scope.row.ordercode)">编辑</el-button>
+          <el-button v-permission="'HY_delete'" size="mini" plain type="danger" @click="btn_delete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="pageParams.total > 0"
+      :total="pageParams.total"
+      :pageindex.sync="pageParams.pageindex"
+      :pagesize.sync="pageParams.pagesize"
+      class="pagination"
+      @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { getOrderLists, deleteOrder } from '@/api/order/orderSearch'
+import addOrEdit from './addOrEdit'
+import detail from './detail'
+import { pickerOptions, formatterContent } from '@/utils'
+import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
+
+export default {
+  name: 'OrderSearch',
+  components: {
+    Pagination
+  },
+  filters: {
+    OrderTextFilter(status) {
+      const statusMap = {
+        0: '暂时',
+        1: '永久',
+        2: '已取消'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: {// 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sc_source: '', // 工单来源
+      sourceOptions: [], // 工单来源下拉数据
+      sc_type: '', // 工单类型
+      typeOptions: [], // 工单类型下拉数据
+      searchDate: '', // 日期
+      pickerOptions, // 日期数据
+      sc_tel: '', // 电话号码
+      sc_ordercode: '', // 工单编号
+      pageParams: {
+        pageindex: 1, // 当前第几页
+        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
+        total: 0 // 总共多少数据
+      },
+      dataLists: [] // 列表数据
+    }
+  },
+  created() {
+    this.getProCity()
+    this.getOrderSource()
+    this.getOrderType()
+    this.getList()
+    document.onkeyup = (e) => {
+      if (e.keyCode === 13) {
+        this.getList()
+      }
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      return new Promise(resolve => {
+        const params = {
+          pageindex: this.pageParams.pageindex, // int 第几页
+          pagesize: this.pageParams.pagesize, // int 每页几条信息
+          stime: this.searchDate && this.searchDate[0], // 开始时间
+          etime: this.searchDate && this.searchDate[1], // 结束时间
+          ordercode: this.sc_ordercode, //	否	string	模糊查询（工单编号）
+          phone: this.sc_tel, //	否	string	模糊查询（号码）
+          province: this.provinceCity && this.provinceCity[0], //	否	string	省code
+          city: this.provinceCity && this.provinceCity[1], //	否	string	市code
+          sourceid: this.sc_source, //	否	string	来源id
+          typeid: this.sc_type //	否	string	类型id
+        }
+        getOrderLists(params).then(response => {
+          this.loading = false
+          if (response.state.toLowerCase() === 'success') {
+            this.pageParams.total = response.data.total
+            this.dataLists = response.data.rows
+          }
+        })
+        resolve()
+      })
+    },
+    btn_search() {
+      this.pageParams.pageindex = 1
+      this.getList()
+    },
+    btn_add() {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
+        },
+        area: ['80%', '90%'],
+        title: '添加工单'
+      })
+    },
+    btn_edit(editId) {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId }// props
+        },
+        area: ['80%', '90%'],
+        title: '编辑工单'
+      })
+    },
+    btn_detail(editId) {
+      this.$layer.iframe({
+        content: {
+          content: detail, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId }// props
+        },
+        area: ['80%', '90%'],
+        title: '工单详情'
+      })
+    },
+    btn_delete(editId) {
+      this.$confirm('您确定要将此工单删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteOrder(editId).then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.getList()
+            this.$message.success('删除成功!')
+          }
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/components/addOrEdit.vue

@@ -0,0 +1,699 @@
+<template>
+  <div v-loading="loading" class="creat_order">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="order_form">
+      <el-row :gutter="24" class="clearfix">
+        <el-col :lg="24" :xl="24" class="col_item">
+          <el-form-item label="工单类型" prop="typeid">
+            <el-radio-group v-model="ruleForm.typeid" @change="changeOrderType">
+              <el-radio v-for="item in typeOptions" :key="item.id" :label="item.id" border>{{ item.name }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col v-show="businIs" :lg="12" :xl="12" class="col_item">
+          <el-form-item :label="`业务办理`" prop="businesstype">
+            <el-select v-model="ruleForm.businesstype" :placeholder="`请选择业务办理`" class="form_select" filterable clearable>
+              <el-option v-for="item in busineData" :key="item.name" :label="item.name" :value="item.name"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12" :xl="12" class="col_item">
+          <el-form-item label="客户姓名" prop="name">
+            <el-input v-model="ruleForm.name" placeholder="请输入客户姓名"/>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12" :xl="12" class="col_item">
+          <el-form-item label="客户电话" prop="phone">
+            <el-input v-model="ruleForm.phone" placeholder="请输入客户电话"/>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12" :xl="12" class="col_item">
+          <el-form-item label="来电电话" prop="callintel">
+            <el-input v-model="ruleForm.callintel" placeholder="请输入客户来电电话"/>
+          </el-form-item>
+        </el-col>
+        <div v-show="afterSale">
+          <el-col v-if="afterSale" :lg="12" :xl="12" class="col_item">
+            <el-form-item label="售后来源" prop="sourceid">
+              <el-select v-model="ruleForm.sourceid" class="form_select" filterable clearable placeholder="请选择售后来源">
+                <el-option v-for="item in sourceOptions" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xl="12" class="col_item">
+            <el-form-item label="单位名称" prop="company">
+              <el-input v-model="ruleForm.company" placeholder="请输入客户单位名称"/>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xl="12" class="col_item">
+            <el-form-item label="项目名称" prop="proid">
+              <el-select v-model="ruleForm.proid" class="form_select" filterable clearable placeholder="请选择项目" @change="selectGet">
+                <el-option v-for="item in proData" :key="item.id" :label="item.project_name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xl="12" class="col_item">
+            <el-form-item label="所在地" prop="provinceCity">
+              <el-cascader
+                v-model="provinceCity"
+                :options="provinceCityDatas"
+                :props="props"
+                placeholder="请选择省市"
+                class="form_select"
+                clearable
+                filterable
+                change-on-select/>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xl="12" class="col_item">
+            <el-form-item label="具体地址" prop="address">
+              <el-input v-model="ruleForm.address" placeholder="请输入具体地址"/>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="12" :xl="12" class="col_item">
+            <el-form-item label="故障设备" prop="faulty_equipment">
+              <el-input v-model="ruleForm.faulty_equipment" placeholder="请输入故障设备"/>
+            </el-form-item>
+          </el-col>
+          <el-col :lg="24" :xl="24" class="col_item">
+            <el-form-item label="故障类型">
+              <el-row>
+                <el-col :lg="11">
+                  <el-select v-model="ruleForm.faulty_typeid" class="form_select" filterable clearable placeholder="请选择故障类型" @change="faultSelect">
+                    <el-option v-for="item in faultyTypeData" :key="item.id" :label="item.name" :value="item.id"/>
+                  </el-select>
+                </el-col>
+                <el-col :lg="2" class="text_center">——</el-col>
+                <el-col :lg="11">
+                  <el-select v-model="ruleForm.faulty_type2id" class="form_select" filterable clearable placeholder="请选择二级故障">
+                    <el-option v-for="item in faultyTypeData2" :key="item.id" :label="item.name" :value="item.id"/>
+                  </el-select>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-col>
+        </div>
+        <el-col v-show="ruleForm.isdesignate === '0'" :lg="12" :xl="8" class="col_item">
+          <el-form-item :label="`${deptContent.deptname}部门`" prop="deptid">
+            <el-select v-model="ruleForm.deptid" :placeholder="`请选择${deptContent.deptname}部门`" class="form_select" filterable clearable @change="deptChange">
+              <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-show="ruleForm.isdesignate === '0'" :lg="12" :xl="12">
+          <el-form-item label="接收人" prop="touser" >
+            <el-select v-model="ruleForm.touser" class="form_select" filterable clearable placeholder="请选择接收人">
+              <el-option v-for="item in touserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.usercode"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item :label="`${deptContent.contentName}内容`" prop="content" >
+            <el-input :autosize="{ minRows: 4}" v-model="ruleForm.content" :placeholder="`请输入${deptContent.contentName}内容`" type="textarea"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col v-show="afterSale" :lg="24" :xl="24" class="col_item">
+          <el-form-item label="处理时效" prop="productive">
+            <el-radio-group v-model="ruleForm.productive">
+              <el-radio v-for="item in productiveData" :key="item.id" :label="item.id" border>{{ item.name }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :xl="24">
+          <el-form-item label="工单有效性" prop="iseffective">
+            <el-radio-group v-model="ruleForm.iseffective">
+              <el-radio label="0">无效</el-radio>
+              <el-radio label="1">有效</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :xl="24">
+          <el-form-item label="是否指派" prop="isdesignate">
+            <el-radio-group v-model="ruleForm.isdesignate">
+              <el-radio label="0">是</el-radio>
+              <el-radio label="1">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :xl="24">
+          <el-form-item label="立即处理" prop="dealinstantly">
+            <el-radio-group v-model="ruleForm.dealinstantly">
+              <el-radio label="0">否</el-radio>
+              <el-radio label="1">是</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <!-- <el-form-item label="附件" prop="files">
+								<el-upload
+									ref="upload"
+									class="uploadFiles"
+									list-type="picture"
+									multiple
+									:action= uploadData.uploadUrl
+									:data = uploadData.uploaderFiles
+									:on-success="uploadSuccess"
+									:on-error="uploadError"
+									:on-remove="uploadRemove">
+									<el-button size="small" type="primary">点击上传</el-button>
+								</el-upload>
+							</el-form-item> -->
+        <el-col :lg="24" :xl="24">
+          <el-form-item>
+            <el-button type="primary" @click="submitForm">保存</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary, getPro } from '@/api/commonAPI'
+import { getOrder, addOrder, editOrder } from '@/api/order/orderSearchHY'
+import { getUserSelects } from '@/api/systemSetup/roleSetting/userManage'
+import { validateTel } from '@/utils/validate'
+import { delFiles, filterContent } from '@/utils'
+
+const validateTelRule = (rule, value, callback) => {
+  if (!validateTel(value)) {
+    callback(new Error('请输入有效的客户电话!'))
+  } else {
+    callback()
+  }
+}
+export default {
+  name: 'AddOrEditOrder',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    callid: {
+      type: String,
+      default: ''
+    },
+    callinNum: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    },
+    isCallin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      uploadData: {
+        // 文件上传数据
+        uploadUrl:
+          this.$store.getters.serverConfig.BASE_API +
+          'fileserverapi/Api/Upload',
+        uploaderFiles: {
+          // 上传文件的参数 //是	string	模块code，如：test
+          uploadtype: 'orderFiles'
+        }
+      },
+      consultation: false, // 是否是咨询
+      afterSale: false, // 是否是售后
+      // iseffective: false,
+      // dealinstantly: false,
+      complaint: false, // 是否是投诉
+      businIs: false,
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: { // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sourceOptions: [], // 售后来源下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      busineData: [], // 业务办理类型下拉
+      touserOptions: [], // 接收人下拉数据
+      faultyTypeData: [], // 故障类型下拉数据
+      faultyTypeData2: [], // 故障类型2级下拉数据
+      productiveData: [], // 处理时效下拉数据
+      proData: [], // 项目下拉数据
+      deptData: [], // 咨询部门下拉数据
+      ruleForm: {
+        unique_id: '', // 通话唯一ID
+        ordercode: '', //
+        typeid: '5bf522f45a10b06b7a35a503', //	否	string	类型id 咨询
+        phone: this.callinNum, //	是	string	客户联系电话
+        name: '', //	否	string	客户姓名
+        callintel: this.callinNum, // 来电电话
+        businesstype: '',
+        iseffective: '1',
+        dealinstantly: '1',
+        isdesignate: '1',
+        touser: '', // 指派给的坐席工号
+        deptid: '', // 咨询部门id
+        content: '', //	是	string	故障内容
+        sourceid: '', //	否	string	售后来源id
+        company: '', // 单位名称
+        projectname: '', // 项目名称
+        proid: '', // 客户项目id
+        province: '', //	否	string	省code
+        city: '', //	否	string	市code
+        address: '', //	否	string	地址
+        faulty_equipment: '', // 故障设备
+        faulty_typeid: '', // 故障类型
+        faulty_type2id: '', // 故障类型2级
+        productive: '' // 处理时效
+        // files: [], //否	list	附件json
+      },
+      rules: {
+        sourceid: [
+          {
+            required: true,
+            message: '请选择售后来源',
+            trigger: 'blur'
+          }
+        ],
+        typeid: [
+          {
+            required: true,
+            message: '请选择工单类型',
+            trigger: 'blur'
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: '请输入客户姓名',
+            trigger: 'blur'
+          }
+        ],
+        phone: [
+          {
+            required: true,
+            trigger: 'blur',
+            validator: validateTelRule
+          }
+        ]
+      },
+      loading: false
+    }
+  },
+  computed: {
+    // 处理部门和内容的名字
+    deptContent() {
+      const deptCotentName = {
+        deptname: '接收',
+        contentName: '咨询'
+      }
+      // 咨询
+      if (this.consultation) {
+        deptCotentName.deptname = '接收'
+        deptCotentName.contentName = '咨询'
+      }
+      // 售后
+      if (this.afterSale) {
+        deptCotentName.deptname = '接收'
+        deptCotentName.contentName = '故障'
+      }
+      // 投诉
+      if (this.complaint) {
+        deptCotentName.deptname = '接收'
+        deptCotentName.contentName = '投诉'
+      }
+      return deptCotentName
+    }
+  },
+  created() {
+    if (this.callid) {
+      this.ruleForm.unique_id = this.callid
+    }
+    Promise.all([
+      this.getOrderType(), // 获取工单类型
+      this.getDeptData(), // 获取部门
+      this.getBusineData() // 获取业务类型
+    ]).then(() => {
+      if (this.rowid) {
+        this.ruleForm.ordercode = this.rowid
+        this.getDetail(this.rowid)
+      }
+    })
+  },
+  methods: {
+    submitForm() {
+      if (this.consultation || this.complaint) {
+        this.resetSale()
+      }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.ruleForm.province = this.provinceCity && this.provinceCity[0]
+          this.ruleForm.city = this.provinceCity && this.provinceCity[1]
+          this.ruleForm.content = filterContent.delHtmlTag(
+            this.ruleForm.content
+          ) // 保存内容时去掉 html 标签
+          this.loading = true
+          if (!this.rowid) {
+            addOrder(this.ruleForm)
+              .then(response => {
+                this.loading = false
+                if (response.state.toLowerCase() === 'success') {
+                  this.$parent.$layer.close(this.layerid)
+                  if (this.callid) {
+                    this.$parent.getOrderList() // 重新加载来电弹屏工单记录
+                  } else {
+                    this.$parent.getList() // 重新加载父级数据
+                  }
+                  this.$message.success('恭喜你，工单信息添加成功!')
+                }
+              })
+              .catch(() => {
+                this.loading = false
+              })
+            return
+          }
+          // 编辑
+          editOrder(this.ruleForm)
+            .then(response => {
+              this.loading = false
+              if (response.state.toLowerCase() === 'success') {
+                this.$parent.$layer.close(this.layerid)
+                if (this.isCallin) {
+                  this.$parent.getDetails(this.rowid) // 来电弹屏 工单列表详情工单动态
+                } else {
+                  this.$parent.getList() // 重新加载父级数据
+                }
+                this.$message.success('恭喜你，工单信息编辑成功!')
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        } else {
+          this.$message.error('请输入有效的必填项信息!')
+          return false
+        }
+      })
+    },
+    resetForm() {
+      // if (this.ruleForm.files.length > 0) {
+      //   for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
+      //     delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+      //     this.ruleForm.files.splice(i, 1)
+      //   }
+      // }
+      // this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+
+      this.provinceCity = []
+      this.ruleForm.faulty_typeid = '' // 故障类型
+      this.ruleForm.faulty_type2id = '' // 故障类型二级
+      this.$refs.ruleForm.resetFields()
+      this.consultation = true // 是否是咨询
+      this.afterSale = false // 是否是售后
+      this.complaint = false // 是否是投诉
+    },
+    // 当提交时不是售后的时候清空售后中部分字段的内容
+    resetSale() {
+      this.ruleForm.sourceid = '' //	否	string	售后来源id
+      this.ruleForm.company = '' // 单位名称
+      this.ruleForm.projectname = '' // 项目名称
+      this.ruleForm.proid = '' // 客户项目id
+      this.provinceCity = [] // 省code市code
+      this.ruleForm.address = '' //	否	string	地址
+      this.ruleForm.faulty_equipment = '' // 故障设备
+      this.ruleForm.faulty_typeid = '' // 故障类型
+      this.ruleForm.faulty_type2id = '' // 故障类型2级
+      this.ruleForm.productive = ''// 处理时效
+    },
+    // 获取详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ruleForm.typeid = res.typeid // 类型
+          this.ruleForm.iseffective === res.iseffective // 工单有效性
+          this.ruleForm.dealinstantly === res.dealinstantly // 是否立即处理
+          this.ruleForm.name = res.name // 姓名
+          this.ruleForm.phone = res.phone // 电话
+          this.ruleForm.callintel = res.callintel // 来电电话
+          this.ruleForm.deptid = res.deptid // 接收部门id
+          this.ruleForm.touser = res.touser // 接收人
+          this.ruleForm.content = res.content // 故障内容
+          if (res.typeid === '5bf522f45a10b06b7a35a503') { // 咨询
+            this.consultation = true // 是否是咨询
+          } else if (res.typeid === '5bf523015a10b06b7a35a504') { // 售后
+            this.afterSale = true
+            this.getOrderSource().then(() => {
+              this.ruleForm.sourceid = res.sourceid // 来源
+            })
+            this.ruleForm.company = res.company // 单位名称
+            this.getPros().then(() => {
+              this.ruleForm.proid = res.proid // 客户项目id
+              this.ruleForm.projectname = res.projectname // 客户项目名称
+            })
+            this.getProCity().then(() => {
+              this.provinceCity = [res.province, res.city] // 所在地
+            })
+            this.ruleForm.address = res.address // 具体地址
+            this.ruleForm.faulty_equipment = res.faulty_equipment // 故障设备
+            this.getFaultyType()
+              .then(() => {
+                this.ruleForm.faulty_typeid = res.faulty_typeid // 故障类型
+                const itemObj = this.faultyTypeData.find(item => item.id === res.faulty_typeid)
+                this.getFaultyType2(itemObj && itemObj.describe).then(() => {
+                  this.ruleForm.faulty_type2id = res.faulty_type2id // 故障类型
+                })
+              })
+            this.getProductive().then(() => {
+              this.ruleForm.productive = res.productive // 处理时效
+            })
+          } else if (res.typeid === '5c47d83fd2bc5f5d5907f296') { // 投诉
+            this.complaint = true
+          } else if (res.typeid === '5d0c9e21156ef38d2086d941') {
+            this.businIs = true // 是否是业务类型
+            this.getBusineData().then(() => {
+              this.businesstype = res.businesstype// 业务办理
+              // alert(this.businesstype)
+              this.ruleForm.businesstype = res.businesstype // 客户项目名称
+            })
+          }
+        }
+      })
+    },
+    // 工单类型改变的事件
+    changeOrderType(val) {
+      switch (val) {
+        case '5bf522f45a10b06b7a35a503': // 咨询
+          this.consultation = true // 是否是咨询
+          this.afterSale = false // 是否是售后
+          this.complaint = false // 是否是投诉
+          this.businIs = false // 是否是业务类型
+          break
+        case '5bf523015a10b06b7a35a504':// 售后
+          this.consultation = false
+          this.afterSale = true
+          this.complaint = false
+          this.getOrderSource() // 获取工单来源
+          this.getPros() // 获取项目下拉
+          this.getFaultyType() // 获取故障类型
+          this.getProCity() // 获取省市下拉数据
+          this.getProductive() // 获取处理时效
+          this.businIs = false // 是否是业务类型
+          break
+        case '5d0c9e21156ef38d2086d941':// 售后
+          this.businIs = true // 是否是业务类型
+          break
+        case '5c47d83fd2bc5f5d5907f296':// 投诉
+          this.consultation = false
+          this.afterSale = false
+          this.complaint = true
+          this.businIs = false // 是否是业务类型
+          break
+        default:
+          this.consultation = false
+          this.afterSale = false
+          this.complaint = false
+          this.businIs = false // 是否是业务类型
+          break
+      }
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('SHLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('HYGDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取接收人
+    getUserDatas(code) {
+      return new Promise(resolve => {
+        getUserSelects(code).then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.touserOptions = response.data
+          }
+        })
+      })
+    },
+    // 部门改变
+    deptChange(vId) {
+      this.ruleForm.touser = ''
+      if (vId) {
+        this.getUserDatas(vId)
+      } else {
+        this.touserOptions = []
+      }
+    },
+    // 获取故障类型一级数据
+    getFaultyType() {
+      return new Promise(resolve => {
+        getDictionary('HYGZLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.faultyTypeData = response.data
+            resolve(response.data)
+          }
+        })
+      })
+    },
+    // 获取故障类型二级数据
+    getFaultyType2(code) {
+      return new Promise(resolve => {
+        getDictionary(code).then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.faultyTypeData2 = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    faultSelect(vId) {
+      this.ruleForm.faulty_type2id = ''
+      if (vId) {
+        const itemObj = this.faultyTypeData.find(item => item.id === vId)
+        this.getFaultyType2(itemObj && itemObj.describe)
+      } else {
+        this.faultyTypeData2 = []
+      }
+    },
+    // 获取咨询部门数据
+    getDeptData() {
+      return new Promise(resolve => {
+        getDictionary('HYZXBM').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.deptData = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取业务办理类型
+    getBusineData() {
+      return new Promise(resolve => {
+        getDictionary('YWBL').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.busineData = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取处理时效
+    getProductive() {
+      return new Promise(resolve => {
+        getDictionary('CLSX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.productiveData = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取项目下拉
+    getPros() {
+      return new Promise(resolve => {
+        getPro().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.proData = response.data.rows
+          }
+        })
+        resolve()
+      })
+    },
+    selectGet(vId) {
+      if (vId) {
+        const projectName = this.proData.find(item => item.id === vId)
+        this.ruleForm.projectname = projectName.project_name
+      } else {
+        this.ruleForm.projectname = ''
+      }
+    },
+    // 文件上传
+    uploadSuccess(response, file, fileList) {
+      if (response.state.toLowerCase() === 'success') {
+        this.ruleForm.files.push(response.data[0])
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    uploadRemove(file, fileList) {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
+          if (this.ruleForm.files[i].filename === file.name) {
+            delFiles(
+              this.ruleForm.files[i].filesmallurl,
+              this.ruleForm.files[i].fileurl
+            )
+            this.ruleForm.files.splice(i, 1)
+            return
+          }
+        }
+      }
+    },
+    uploadError(err, file, fileList) {
+      // console.log(err)
+      this.$message.error(err)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_form .form_select{
+		width: 100%;
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.creat_order{
+		margin-top: 20px;
+    // padding-top: 40px;
+    .col_item{
+			height: 51px;
+		}
+	}
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/components/deal.vue

@@ -0,0 +1,136 @@
+<template>
+  <div v-loading="loading" class="dealOrder">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="order_form">
+      <el-row :gutter="24" class="clearfix">
+        <el-col :lg="24" :xl="24">
+          <el-form-item label="处理内容" prop="result" >
+            <el-input :autosize="{ minRows: 4}" v-model="ruleForm.result" placeholder="请输入处理内容" type="textarea"/>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item label="增加协助人" prop="helper" >
+            <el-select v-model="ruleForm.helper" class="form_select" filterable clearable multiple placeholder="请选择要增加的协助人">
+              <el-option v-for="item in helperOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item label="协助内容" prop="helpcontent" >
+            <el-input :autosize="{ minRows: 4}" v-model="ruleForm.helpcontent" placeholder="请输入协助内容" type="textarea"/>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item>
+            <el-button type="primary" @click="submitForm">保存</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { dealOrderOperate } from '@/api/order/orderSearchHY'
+import { getUserSelects } from '@/api/systemSetup/roleSetting/userManage'
+import { filterContent } from '@/utils'
+
+export default {
+  name: 'DealOrder',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    },
+    isCallin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      helperOptions: [], // 增加协助人下拉数据
+      ruleForm: {
+        result: '', // 处理内容
+        helper: [], // 增加协助人
+        helpcontent: ''// 协助内容
+      },
+      rules: {
+        result: [{
+          required: true,
+          message: '请输入处理内容',
+          trigger: 'blur'
+        }]
+        // helper: [{
+        //   required: true,
+        //   message: '请选择增加的协助人',
+        //   trigger: 'blur'
+        // }],
+        // helpcontent: [{
+        //   required: true,
+        //   message: '请输入协助内容',
+        //   trigger: 'blur'
+        // }]
+      }
+    }
+  },
+  created() {
+    if (this.rowid) {
+      this.getHelpUser()
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = {
+            ordercode: this.rowid, // 工单编号
+            result: filterContent.delHtmlTag(this.ruleForm.result), // 保存内容时去掉 html 标签
+            helpcontent: filterContent.delHtmlTag(this.ruleForm.helpcontent), // 保存内容时去掉 html 标签
+            helper: this.ruleForm.helper.join(','),
+            dealtype: 2 // 操作，值为0时指派，为1时接单，为2时处理，3为撤回，4为退回
+          }
+          this.loading = true
+          dealOrderOperate(params)
+            .then(response => {
+              this.loading = false
+              if (response.state.toLowerCase() === 'success') {
+                this.$parent.$layer.close(this.layerid)
+                if (this.isCallin) {
+                  this.$parent.getDetails(this.rowid)// 来电弹屏 工单列表详情 工单动态
+                } else {
+                  this.$parent.getList() // 重新加载父级数据
+                }
+                this.$message.success('恭喜你，工单处理成功!')
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.ruleForm.resetFields()
+    },
+    // 获取协助人
+    getHelpUser() {
+      return new Promise(resolve => {
+        getUserSelects().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.helperOptions = response.data
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>
+

fuwaiCallCenterWeb.UI/src/views/appointment/components/detail.vue

@@ -0,0 +1,506 @@
+<template>
+  <div class="order_detail">
+    <el-row :gutter="20">
+      <el-col :md="24" class="order_detail_body">
+        <el-card shadow="hover">
+          <el-col :md="24">
+            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />工单编号：{{ ordercode }}</h1>
+            <p class="title_sub"><span class="green">{{ createuser }}</span> 	河南阜外华中心血管病医院 {{ createtime }}</p>
+            <p class="title_sub">
+              工单类型：<span class="red">{{ typename }} </span>
+              工单状态：
+              <el-tag :type="orderState | orderStateTypeFilter" size="mini" disable-transitions>
+                {{ orderState | orderStateFilter }}
+              </el-tag>
+            </p>
+          </el-col>
+          <el-col :md="24" class="order_detail_content">
+            <el-col :md="6" class="order_detail_item">
+              客户姓名：{{ name }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              联系电话：{{ phone }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              来电电话：{{ callintel }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              {{ deptContent.deptname }}部门：{{ deptname }}
+            </el-col>
+
+            <template v-if="typeid === '5bf523015a10b06b7a35a504'">
+              <el-col :md="6" class="order_detail_item">
+                售后来源：{{ sourcename }}
+              </el-col>
+              <el-col :md="6" class="order_detail_item">
+                单位名称：{{ company }}
+              </el-col>
+              <el-col :md="12" class="order_detail_item">
+                项目名称：{{ projectname }}
+              </el-col>
+              <el-col :md="6" class="order_detail_item">
+                时效：{{ productivename }}
+              </el-col>
+              <el-col :md="12" class="order_detail_item">
+                地址：{{ address }}
+              </el-col>
+              <el-col :md="6" class="order_detail_item">
+                故障设备：{{ faulty_equipment }}
+              </el-col>
+              <el-col :md="12" class="order_detail_item">
+                故障类型：{{ faulty_typename }} <span v-if="faulty_typename2"> {{ faulty_typename2 }}</span>
+              </el-col>
+            </template>
+
+            <el-col :md="24" class="order_detail_item">
+              {{ deptContent.contentName }}内容：
+              <div class="order_content" v-html="content"/>
+            </el-col>
+            <el-col v-if="isCallin" :md="6" :offset="18">
+              <!-- 0待指派： 编辑 转派 处理
+              2待接单： 接单 退回 撤回
+              3待处理： 转派 处理 -->
+              <el-button v-if="orderState === 0 && createusercode === usercode" size="mini" plain type="primary" @click="btn_edit(ordercode)">编辑</el-button>
+
+              <template v-if="orderState === 0 || orderState === 3">
+                <el-button size="mini" plain type="primary" @click="btn_transfer(ordercode)">转派</el-button>
+                <el-button size="mini" plain type="primary" @click="btn_deal(ordercode)">处理</el-button>
+              </template>
+
+              <template v-if="orderState === 2">
+                <el-button size="mini" plain type="primary" @click="btn_receipt(ordercode)">接单</el-button>
+                <el-button size="mini" plain type="primary" @click="btn_return(ordercode)">退回</el-button>
+                <el-button v-if="zpusercode === usercode" size="mini" plain type="primary" @click="btn_withdraw(ordercode)">撤回</el-button>
+              </template>
+
+            </el-col>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col v-if="orderItems.length" :md="24">
+        <el-card shadow="hover">
+          <div slot="header" class="clearfix">
+            <span>工单动态</span>
+          </div>
+          <div class="order_steps">
+            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
+              <el-step
+                v-for="(activity, index) in orderItems"
+                :key="index"
+                :description="`${activity.timestamp} ${activity.content}`"
+                :title="activity.state | orderStateFilter"/>
+            </el-steps>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { filterContent } from '@/utils'
+import { orderStateFilter, orderStateTypeFilter } from '@/filters'
+import { getOrder, getOrderDynamic, dealOrderOperate } from '@/api/order/orderSearchHY'
+import addOrEdit from './addOrEdit'
+import dealOrder from './deal'
+import transferOrder from './transfer'
+
+export default {
+  name: 'Detail',
+  filters: {},
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    },
+    callid: {
+      type: String,
+      default: ''
+    },
+    isCallin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      orderState: 0, // 工单状态
+      ordercode: '', // 工单编号
+      name: '', // 姓名
+      phone: '', // 电话
+      callintel: '', // 来电电话
+      typename: '', // 工单类型
+      typeid: '', // 工单类型id
+      sourcename: '', // 售后来源
+      company: '', // 单位名称
+      projectname: '', // 项目名称
+      address: '', // 地址
+      productivename: '', // 时效
+      faulty_equipment: '', // 故障设备
+      content: '', // 故障内容
+      faulty_typename: '', // 故障类型id(一级
+      faulty_typename2: '', // 故障类型(二级
+      deptname: '', // 咨询部门
+      createtime: '', // 创建时间
+      createuser: '', // 创建人
+      createusercode: '', // 创建人code
+      zpusercode: '', // 指派人
+      orderItems: [] // 工单流程
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'avatar',
+      'usercode' // 工号
+    ]),
+    // 处理部门和内容的名字
+    deptContent() {
+      const deptCotentName = {
+        deptname: '咨询',
+        contentName: '咨询'
+      }
+      switch (this.typeid) {
+        case '5bf522f45a10b06b7a35a503': // 咨询
+          deptCotentName.deptname = '咨询'
+          deptCotentName.contentName = '咨询'
+          break
+        case '5bf523015a10b06b7a35a504':// 售后
+          deptCotentName.deptname = '咨询'
+          deptCotentName.contentName = '故障'
+          break
+        case '5c47d83fd2bc5f5d5907f296':// 投诉
+          deptCotentName.deptname = '投诉'
+          deptCotentName.contentName = '投诉'
+          break
+        default:
+          deptCotentName.deptname = '咨询'
+          deptCotentName.contentName = '咨询'
+          break
+      }
+      return deptCotentName
+    }
+  },
+  created() {
+    if (this.rowid) {
+      this.getDetails(this.rowid)
+    }
+  },
+  methods: {
+    getDetails(code) {
+      this.getDetail(code) // 获取详情
+      this.getDynamicList(code) // 获取工单动态
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          if (res) {
+            this.ordercode = res.ordercode // 工单编号
+            this.createusercode = res.createuser // 创建人code
+            this.createuser = res.createuser + '-' + res.createusername // 创建人
+            this.createtime = res.createtime // 创建时间
+            this.typename = res.typename// 工单类型
+            this.typeid = res.typeid// 工单类型id
+            this.orderState = res.state // 工单状态
+            this.name = res.name // 姓名
+            this.phone = res.phone // 电话
+            this.callintel = res.callintel // 电话
+            this.deptname = res.deptname // 咨询部门
+            this.content = filterContent.content(res.content) // 工单内容
+            this.sourcename = res.sourcename// 售后来源
+            this.company = res.company// 单位名称
+            this.projectname = res.projectname// 项目名称
+            this.productivename = res.productivename// 时效
+            res.provincename = res.provincename === null ? '' : res.provincename
+            res.cityname = res.cityname === null ? '' : res.cityname
+            res.address = res.address === null ? '' : res.address
+            this.address = res.provincename + res.cityname + res.address // 地址
+            this.faulty_equipment = res.faulty_equipment// 故障设备
+            res.faulty_typename2 = res.faulty_typename2 === null ? '' : res.faulty_typename2
+            this.faulty_typename = res.faulty_typename // 故障类型id(一级
+            this.faulty_typename2 = res.faulty_typename2 // 故障类型(二级
+            this.zpusercode = res.zpusercode // 指派人
+          }
+        }
+      })
+    },
+    // 获取工单动态
+    getDynamicList(rid) {
+      getOrderDynamic(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const resItems = response.data
+          if (resItems && resItems.length) {
+            this.orderItems = []
+            resItems.forEach(element => {
+              if (element.detail) {
+                this.orderItems.unshift({
+                  content: element.detail,
+                  timestamp: element.createtime,
+                  state: element.state
+                })
+              }
+            })
+          }
+        }
+      })
+    },
+    // 编辑
+    btn_edit(editId) {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId, 'isCallin': this.isCallin, 'callid': this.callid }// props
+        },
+        area: ['80%', '90%'],
+        title: '编辑工单'
+      })
+    },
+    // 处理
+    btn_deal(editId) {
+      this.$layer.iframe({
+        content: {
+          content: dealOrder, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId, 'isCallin': this.isCallin }// props
+        },
+        area: ['40%', '50%'],
+        title: '处理工单'
+      })
+    },
+    // 转派
+    btn_transfer(editId) {
+      this.$layer.iframe({
+        content: {
+          content: transferOrder, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId, 'isCallin': this.isCallin } // props
+        },
+        area: ['40%', '50%'],
+        title: '转派工单'
+      })
+    },
+    // 接单
+    btn_receipt(editId) {
+      this.$confirm('您确定要接单吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          const data = {
+            ordercode: editId, // 工单编号
+            dealtype: 1 // 操作，值为0时指派，为1时接单，为2时处理，3为撤回，4为退回
+          }
+          dealOrderOperate(data).then(res => {
+            if (res.state.toLowerCase() === 'success') {
+              this.getDetails(this.rowid)
+              this.$message.success('接单操作成功！')
+            }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消接单操作！')
+        })
+    },
+    // 退回
+    btn_return(editId) {
+      this.$confirm('您确定要将此工单退回吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          const data = {
+            ordercode: editId, // 工单编号
+            dealtype: 4 // 操作，值为0时指派，为1时接单，为2时处理，3为撤回，4为退回
+          }
+          dealOrderOperate(data).then(res => {
+            if (res.state.toLowerCase() === 'success') {
+              this.getDetails(this.rowid)
+              this.$message.success('退回操作成功！')
+            }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消退回操作！')
+        })
+    },
+    // 撤回
+    btn_withdraw(editId) {
+      this.$confirm('您确定要将此工单撤回吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          const data = {
+            ordercode: editId, // 工单编号
+            dealtype: 3 // 操作，值为0时指派，为1时接单，为2时处理，3为撤回，4为退回
+          }
+          dealOrderOperate(data).then(res => {
+            if (res.state.toLowerCase() === 'success') {
+              this.getDetails(this.rowid)
+              this.$message.success('撤回操作成功！')
+            }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消撤回操作！')
+        })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_detail{
+		.el-col{
+			margin-bottom: 20px;
+		}
+		.el-icon-time{
+			color: #d81e06;
+		}
+		.el-card__header{
+			padding-top: 14px;
+			padding-bottom: 14px;
+			background-color: #F5F5F6;
+		}
+		.order_file{
+			.el-card__body{
+				padding: 22px 0 0 0;
+				text-align: center;
+			}
+		}
+		.order_steps{
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+		.order_record {
+			.el-card__body{
+				padding: 0;
+			}
+			.el-tabs__header{
+				padding: 0px 20px;
+				background-color: #F5F5F6;
+					.el-tabs__item{
+						font-size: 16px;
+						height: 47px;
+						line-height: 47px;
+					}
+			}
+		}
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.order_detail{
+		.order_detail_body{
+			margin-bottom: 20px;
+			.round_img{
+				width: 90px;
+				height: 90px;
+				border-radius: 50%;
+				overflow: hidden;
+				margin: 14px;
+				img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title{
+				font-size: 20px;
+				.title_icon{
+					color: #d81e06;
+					font-size: 16px;
+					margin-right: 20px;
+				}
+			}
+			.title_sub{
+				font-size: 14px;
+				color: #666666;
+			}
+			.order_detail_content{
+				background-color: #F5F5F6;
+				padding-top: 20px;
+				color: #4c4c4c;
+				font-size: 14px;
+				.order_detail_item{
+					margin-bottom: 10px;
+					.order_content{
+						margin-top: 10px;
+					}
+					.order_file {
+						position: relative;
+						cursor: pointer;
+						.img_mask {
+							display: none;
+							position: absolute;
+							left: 0px;
+							top: 0px;
+							background-color: rgba(0, 0, 0, 0.3);
+							width: 100%;
+							height: 22px;
+							text-align: right;
+							z-index: 1;
+							i {
+								font-size: 20px;
+								line-height: 22px;
+								display: inline-block;
+								margin-right: 15px;
+								color: #fff;
+							}
+						}
+						p {
+							margin-top: 5px;
+							padding-left: 14px;
+							padding-right: 14px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+						.file_icon{
+							height: 68px;
+							line-height: 68px;
+							font-size: 68px;
+							color: #409EFF;
+						}
+					}
+					.order_file:hover .img_mask {
+						display: block;
+					}
+				}
+			}
+		}
+		.green {
+			color: #00c1de;
+		}
+		.done {
+			color: #198120;
+		}
+		.red {
+			color: #d81e06;
+		}
+		.yellow{
+			color: #e6a23c;
+		}
+		.order_steps{
+			// height: 240px;
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+
+		.tab_body{
+			padding: 0 20px 20px 20px;
+		}
+	}
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/components/searchFilter.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="filter-container">
+    <el-date-picker
+      v-model="searchDatas.searchDate"
+      :picker-options="pickerOptions"
+      class="filter-item"
+      type="daterange"
+      format="yyyy年MM月dd日"
+      value-format="yyyy-MM-dd"
+      align="left"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期" />
+    <el-select v-model="searchDatas.sc_type" class="filter-item" filterable clearable placeholder="请选择工单类型">
+      <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
+    </el-select>
+    <el-select v-model="searchDatas.sc_deptid" class="filter-item" filterable clearable placeholder="请选择咨询/投诉部门">
+      <el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id" />
+    </el-select>
+    <el-cascader
+      v-model="searchDatas.provinceCity"
+      :options="provinceCityDatas"
+      :props="props"
+      placeholder="请选择省市"
+      class="filter-item"
+      clearable
+      filterable
+      change-on-select />
+    <el-input v-model="searchDatas.sc_ordercode" placeholder="请输入工单编号" class="filter-item" />
+    <el-input v-model="searchDatas.sc_tel" placeholder="请输入电话号码" class="filter-item" />
+    <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
+    <el-button v-permission="'HY_add'" v-if="showadd" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
+    <el-button v-permission="'HY_deletes'" v-if="showdeletes" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deletes">批量删除</el-button>
+    <el-button type="primary" class="filter-item" icon="el-icon-upload2" @click="btn_export()">导出</el-button>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { pickerOptions } from '@/utils'
+import addOrEdit from './addOrEdit'
+
+export default {
+  name: 'SearchFilter',
+  props: {
+    searchDatas: {
+      required: true,
+      type: Object,
+      default() {
+        return {
+          provinceCity: [], // 省市下拉绑定的值
+          sc_deptid: '', // 咨询/投诉部门
+          sc_type: '', // 工单类型
+          searchDate: '', // 日期
+          sc_tel: '', // 电话号码
+          sc_ordercode: '' // 工单编号
+        }
+      }
+    },
+    // 是否显示 添加
+    showadd: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示 批量删除
+    showdeletes: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      provinceCityDatas: [], // 省市下拉数据
+      props: {
+        // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      deptOptions: [], // 咨询/投诉下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      pickerOptions // 日期数据
+    }
+  },
+  created() {
+    this.getProCity()
+    this.getOrderType()
+    this.getDeptData()// 获取咨询/投诉部门
+  },
+  methods: {
+    btn_search() {
+      this.$emit('search', this.searchDatas)
+    },
+    btn_export() {
+      this.$emit('export', this.searchDatas)
+    },
+    btn_deletes() {
+      this.$emit('delorders')
+    },
+    btn_add() {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { rowid: '' } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
+        },
+        area: ['80%', '90%'],
+        title: '添加工单'
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('HYGDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取咨询/投诉部门
+    getDeptData() {
+      return new Promise(resolve => {
+        getDictionary('HYZXBM').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.deptOptions = response.data
+          }
+        })
+        resolve()
+      })
+    }
+  }
+}
+</script>

fuwaiCallCenterWeb.UI/src/views/appointment/components/transfer.vue

@@ -0,0 +1,158 @@
+<template>
+  <div v-loading="loading" class="transfer">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="order_form">
+      <el-row :gutter="24" class="clearfix">
+        <el-col :lg="24" :xl="24">
+          <el-form-item label="接收部门" prop="todept" >
+            <el-select v-model="ruleForm.todept" class="form_select" filterable clearable placeholder="请选择接收部门" @change="deptChange">
+              <el-option v-for="item in todeptOptions" :key="item.id" :label="item.name" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item label="接收人" prop="touser" >
+            <el-select v-model="ruleForm.touser" class="form_select" filterable clearable placeholder="请选择接收人">
+              <el-option v-for="item in touserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.usercode"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item label="处理内容" prop="result" >
+            <el-input :autosize="{ minRows: 4}" v-model="ruleForm.result" placeholder="请输入处理内容" type="textarea"/>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24" :xl="24">
+          <el-form-item>
+            <el-button type="primary" @click="submitForm">保存</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { dealOrderOperate } from '@/api/order/orderSearchHY'
+import { getDictionary } from '@/api/commonAPI'
+import { getUserSelects } from '@/api/systemSetup/roleSetting/userManage'
+import { filterContent } from '@/utils'
+
+export default {
+  name: 'TransferOrder',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    },
+    isCallin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      todeptOptions: [], // 接收部门下拉数据
+      touserOptions: [], // 接收人下拉数据
+      ruleForm: {
+        ordercode: '', // 工单编号
+        todept: '', // 指派给部门
+        touser: '', // 指派给的坐席工号
+        result: '', // 处理结果
+        dealtype: 0 // 操作，值为0时指派，为1时接单，为2时处理，3为撤回，4为退回
+      },
+      rules: {
+        todept: [{
+          required: true,
+          message: '请选择接收部门',
+          trigger: 'blur'
+        }],
+        touser: [{
+          required: true,
+          message: '请选择接收人',
+          trigger: 'blur'
+        }],
+        result: [{
+          required: true,
+          message: '请输入处理内容',
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  created() {
+    if (this.rowid) {
+      this.ruleForm.ordercode = this.rowid
+      this.getDeptDatas()
+      this.getUserDatas()
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.ruleForm.result = filterContent.delHtmlTag(this.ruleForm.result)
+          this.loading = true
+          dealOrderOperate(this.ruleForm)
+            .then(response => {
+              this.loading = false
+              if (response.state.toLowerCase() === 'success') {
+                this.$parent.$layer.close(this.layerid)
+                if (this.isCallin) {
+                  this.$parent.getDetails(this.rowid)// 来电弹屏 工单列表详情 工单动态
+                } else {
+                  this.$parent.getList() // 重新加载父级数据
+                }
+                this.$message.success('恭喜你，工单转派成功!')
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.ruleForm.resetFields()
+    },
+    // 获取部门
+    getDeptDatas() {
+      return new Promise(resolve => {
+        getDictionary('HYZXBM').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.todeptOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取接收人
+    getUserDatas(code) {
+      return new Promise(resolve => {
+        getUserSelects(code).then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.touserOptions = response.data
+          }
+        })
+      })
+    },
+    // 部门改变
+    deptChange(vId) {
+      this.ruleForm.touser = ''
+      if (vId) {
+        this.getUserDatas(vId)
+      } else {
+        this.touserOptions = []
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>
+

fuwaiCallCenterWeb.UI/src/views/appointment/departmentVisits/addOrEdit.vue

@@ -0,0 +1,327 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
+      <el-form-item label="工单来源" prop="sourceid">
+        <el-select v-model="ruleForm.sourceid" class="form_select" filterable clearable placeholder="请选择工单来源">
+          <el-option v-for="item in sourceOptions" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工单类型" prop="typeid">
+        <el-select v-model="ruleForm.typeid" class="form_select" filterable clearable placeholder="请选择工单类型">
+          <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户姓名" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入客户姓名"/>
+      </el-form-item>
+      <el-form-item label="客户电话" prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入客户电话"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="ruleForm.sex">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="所在地" prop="provinceCity">
+        <el-cascader
+          v-model="provinceCity"
+          :options="provinceCityDatas"
+          :props="props"
+          placeholder="请选择省市"
+          class="form_select"
+          clearable
+          filterable
+          change-on-select/>
+      </el-form-item>
+      <el-form-item label="具体地址" prop="address">
+        <el-input v-model="ruleForm.address" placeholder="请输入具体地址"/>
+      </el-form-item>
+      <el-form-item label="工单内容" prop="content">
+        <el-input v-model="ruleForm.content" type="textarea" autosize placeholder="请输入工单内容"/>
+      </el-form-item>
+      <el-form-item label="附件" prop="files">
+        <el-upload
+          ref="upload"
+          :file-list="uploadData.fileList"
+          :action= "uploadData.uploadUrl"
+          :data = "uploadData.uploaderFiles"
+          :on-success="uploadSuccess"
+          :on-error="uploadError"
+          :on-remove="uploadRemove"
+          class="uploadFiles"
+          list-type="picture"
+          multiple>
+          <el-button size="small" type="primary">点击上传</el-button>
+          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+          <!-- <i class="el-icon-plus"></i> -->
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm">保存</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { getOrder, addOrder, editOrder } from '@/api/order/orderSearch'
+import { validateTel } from '@/utils/validate'
+import { delFiles, filterContent } from '@/utils'
+
+const validateTelRule = (rule, value, callback) => {
+  if (!validateTel(value)) {
+    callback(new Error('请输入有效的客户电话!'))
+  } else {
+    callback()
+  }
+}
+
+export default {
+  name: 'AddOrEdit',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    callid: {
+      type: Number,
+      default: 0
+    },
+    layerid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      uploadData: {// 文件上传数据
+        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
+        uploaderFiles: {// 上传文件的参数 //是	string	模块code，如：test
+          uploadtype: 'orderFiles'
+        },
+        fileList: [] // 展示文件的数据
+      },
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: { // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sourceOptions: [], // 工单来源下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      ruleForm: {
+        unique_id: '', //		否	string	callid
+        ordercode: '',
+        sourceid: '', //	否	string	来源id
+        typeid: '', //	否	string	类型id
+        name: '', //	否	string	姓名
+        phone: '', //	是	string	号码
+        sex: '男', //	否	string	性别
+        province: '', //	否	string	省code
+        city: '', //	否	string	市code
+        address: '', //	否	string	地址
+        // deptid: '', //	否	string	部门id
+        content: '', //	是	string	工单内容
+        files: [] // 否	list	附件json
+      },
+      rules: {
+        sourceid: [{
+          required: true,
+          message: '请选择工单来源',
+          trigger: 'blur'
+        }],
+        typeid: [{
+          required: true,
+          message: '请选择工单类型',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入客户姓名',
+          trigger: 'blur'
+        }],
+        phone: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateTelRule
+        }]
+      },
+      loading: false
+    }
+  },
+  created() {
+    if (this.callid) {
+      this.ruleForm.unique_id = this.callid
+    }
+    Promise.all([this.getOrderSource(), this.getOrderType(), this.getProCity()])
+      .then(() => {
+        if (this.rowid) {
+          this.ruleForm.ordercode = this.rowid
+          this.getDetail(this.rowid)
+        }
+      })
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.ruleForm.province = this.provinceCity && this.provinceCity[0]
+          this.ruleForm.city = this.provinceCity && this.provinceCity[1]
+          this.ruleForm.content = filterContent.delHtmlTag(this.ruleForm.content)// 保存内容时去掉 html 标签
+          this.loading = true
+          // 添加
+          if (!this.rowid) {
+            addOrder(this.ruleForm).then(response => {
+              this.loading = false
+              if (response.state.toLowerCase() === 'success') {
+                this.$parent.$layer.close(this.layerid)
+                if (this.callid) {
+                  this.$parent.getOrderRecord() // 重新加载来电弹屏工单记录
+                } else {
+                  this.$parent.getList() // 重新加载父级数据
+                }
+                this.$message.success('恭喜你，工单信息添加成功!')
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+            return
+          }
+          // 编辑
+          editOrder(this.ruleForm).then(response => {
+            this.loading = false
+            if (response.state.toLowerCase() === 'success') {
+              this.$parent.$layer.close(this.layerid)
+              this.$parent.getList() // 重新加载父级数据
+              this.$message.success('恭喜你，工单信息编辑成功!')
+            }
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          this.$message.error('请输入有效的必填项信息!')
+          return false
+        }
+      })
+    },
+    resetForm() {
+      if (!this.rowid) {
+        if (this.ruleForm.files.length > 0) {
+          for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+          }
+        }
+        this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+      }
+      this.provinceCity = []
+      this.$refs.ruleForm.resetFields()
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ruleForm.sourceid = res.sourceid // 来源
+          this.ruleForm.typeid = res.typeid // 类型
+          this.ruleForm.name = res.name // 姓名
+          this.ruleForm.phone = res.phone // 电话
+          this.ruleForm.sex = res.sex // 性别
+          this.provinceCity = [res.province, res.city]
+          this.ruleForm.address = res.address // 具体地址
+          this.ruleForm.content = res.content // 内容
+
+          // 附件
+          if (res.files) {
+            for (let i = 0, len = res.files.length; i < len; i++) {
+              this.uploadData.fileList.push({
+                'name': res.files[i].filename,
+                'url': res.files[i].fileurl
+              })
+            }
+            this.ruleForm.files = res.files
+          }
+        }
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 文件上传
+    uploadSuccess(response, file, fileList) {
+      if (response.state.toLowerCase() === 'success') {
+        this.ruleForm.files.push(response.data[0])
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    uploadRemove(file, fileList) {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
+          if (this.ruleForm.files[i].filename === file.name) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+            return
+          }
+        }
+      }
+    },
+    uploadError(err, file, fileList) {
+      // console.log(err)
+      this.$message.error(err)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.order_form .form_select{
+	width: 100%;
+}
+.order_form .uploadFiles .el-upload-list--picture{
+	margin-right: -1%;
+}
+.order_form .el-upload-list--picture li{
+	width: 24%;
+	margin-right: 1%;
+	float: left;
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/departmentVisits/detail.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="order_detail">
+    <el-row :gutter="20">
+      <el-col :md="24" class="order_detail_body">
+        <el-card shadow="hover">
+          <el-col :md="3">
+            <div class="round_img">
+              <img :src="avatar" alt="头像">
+            </div>
+          </el-col>
+          <el-col :md="21">
+            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />工单编号：{{ ordercode }}</h1>
+            <!-- <p class="title_sub"><span class="green">{{ name }}</span> {{ createtime }}</p> -->
+            <p class="title_sub"><span class="green">{{ name }}</span> 	河南阜外华中心血管病医院 {{ createtime }}</p>
+            <p class="title_sub">催单次数：<span class="red">10</span>次 | 工单状态： <span class="done">已完成</span></p>
+          </el-col>
+          <el-col :md="24" class="order_detail_content">
+            <el-col :md="6" class="order_detail_item">
+              客户电话：{{ phone }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              客户性别：{{ sex }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              工单来源：{{ sourcename }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              工单类型：{{ sourcetype }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              地址：{{ address }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              创建人：{{ createuser }}
+            </el-col>
+            <el-col :md="24" class="order_detail_item">
+              工单内容：
+              <div class="order_content" v-html="content"/>
+            </el-col>
+            <el-col v-if="fileList.length > 0" :md="24" class="order_detail_item">
+              <p>附件：<span class="yellow">（可以下载查看）</span></p>
+
+              <el-col v-for="(item, index) in fileList" :md="3" :key="index">
+                <el-card class="order_file">
+                  <span class="img_mask">
+                    <a :href="item.fileurl" download="filename" title="点击下载">
+                      <i class="el-icon-download"/>
+                    </a>
+                  </span>
+                  <img v-if="item.filesmallurl" :src="item.filesmallurl" :large="item.fileurl" :preview-text="item.filename" preview="0" height="68" width="80%">
+                  <i v-else class="el-icon-document file_icon"/>
+                  <p :title="item.filename"> {{ item.filename }} </p>
+                </el-card>
+              </el-col>
+
+            </el-col>
+            <el-col :md="6">
+              <i class="el-icon-time"/>
+              已持续 <span class="red">20</span> 小时 <span class="red">20</span> 分 <span class="red">20</span> 秒
+            </el-col>
+            <el-col :md="6" :offset="12">
+              <el-button type="primary" size="mini" plain>催单</el-button>
+              <el-button type="primary" size="mini" plain>转派</el-button>
+              <el-button type="primary" size="mini" plain>完成</el-button>
+            </el-col>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col :md="12">
+        <el-card shadow="hover">
+          <div slot="header" class="clearfix">
+            <span>工单动态</span>
+          </div>
+          <div class="order_steps">
+            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
+              <el-step title="已完成" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+              <el-step title="已转派" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+              <el-step title="已创建" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+            </el-steps>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="12">
+        <el-card shadow="hover" class="order_record">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="催单记录(2)" name="first">
+              <div class="tab_body">
+                催单记录
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="录音记录(3)" name="second">
+              <div class="tab_body">
+                录音记录
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getOrder } from '@/api/order/orderSearch'
+import { mapGetters } from 'vuex'
+import { filterContent } from '@/utils'
+
+export default {
+  name: 'Detail',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      activeName: 'first',
+      ordercode: '', // 工单编号
+      name: '', // 姓名
+      phone: '', // 电话
+      sex: '', // 性别
+      address: '', // 地址
+      sourcename: '', // 工单来源
+      sourcetype: '', // 工单类型
+      content: '', // 工单内容
+      createtime: '', // 创建时间
+      createuser: '', // 创建人
+      fileList: [] // 附件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'avatar'
+    ])
+  },
+  created() {
+    if (this.rowid) {
+      this.getDetail(this.rowid)
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ordercode = res.ordercode // 工单编号
+          this.name = res.name // 姓名
+          this.phone = res.phone // 电话
+          this.sex = res.sex // 性别
+          res.provincename = res.provincename === null ? '' : res.provincename
+          res.cityname = res.cityname === null ? '' : res.cityname
+          res.address = res.address === null ? '' : res.address
+          this.address = res.provincename + res.cityname + res.address // 地址
+          this.sourcename = res.sourcename // 工单来源
+          this.sourcetype = res.typename // 工单类型
+          this.content = filterContent.content(res.content) // 工单内容
+          this.createtime = res.createtime // 创建时间
+          this.createuser = res.createuser + '-' + res.createusername // 创建人
+          // 附件
+          if (res.files) {
+            this.fileList = res.files
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_detail{
+		.el-col{
+			margin-bottom: 20px;
+		}
+		.el-icon-time{
+			color: #d81e06;
+		}
+		.el-card__header{
+			padding-top: 14px;
+			padding-bottom: 14px;
+			background-color: #F5F5F6;
+		}
+		.order_file{
+			.el-card__body{
+				padding: 22px 0 0 0;
+				text-align: center;
+			}
+		}
+		.order_steps{
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+		.order_record {
+			.el-card__body{
+				padding: 0;
+			}
+			.el-tabs__header{
+				padding: 0px 20px;
+				background-color: #F5F5F6;
+					.el-tabs__item{
+						font-size: 16px;
+						height: 47px;
+						line-height: 47px;
+					}
+			}
+		}
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.order_detail{
+		.order_detail_body{
+			margin-bottom: 20px;
+			.round_img{
+				width: 90px;
+				height: 90px;
+				border-radius: 50%;
+				overflow: hidden;
+				margin: 14px;
+				img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title{
+				font-size: 20px;
+				.title_icon{
+					color: #d81e06;
+					font-size: 16px;
+					margin-right: 20px;
+				}
+			}
+			.title_sub{
+				font-size: 14px;
+				color: #666666;
+			}
+			.order_detail_content{
+				background-color: #F5F5F6;
+				padding-top: 20px;
+				color: #4c4c4c;
+				font-size: 14px;
+				.order_detail_item{
+					margin-bottom: 10px;
+					.order_content{
+						margin-top: 10px;
+					}
+					.order_file {
+						position: relative;
+						cursor: pointer;
+						.img_mask {
+							display: none;
+							position: absolute;
+							left: 0px;
+							top: 0px;
+							background-color: rgba(0, 0, 0, 0.3);
+							width: 100%;
+							height: 22px;
+							text-align: right;
+							z-index: 1;
+							i {
+								font-size: 20px;
+								line-height: 22px;
+								display: inline-block;
+								margin-right: 15px;
+								color: #fff;
+							}
+						}
+						p {
+							margin-top: 5px;
+							padding-left: 14px;
+							padding-right: 14px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+						.file_icon{
+							height: 68px;
+							line-height: 68px;
+							font-size: 68px;
+							color: #409EFF;
+						}
+					}
+					.order_file:hover .img_mask {
+						display: block;
+					}
+				}
+			}
+		}
+		.green {
+			color: #00c1de;
+		}
+		.done {
+			color: #198120;
+		}
+		.red {
+			color: #d81e06;
+		}
+		.yellow{
+			color: #e6a23c;
+		}
+		.order_steps{
+			// height: 240px;
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+
+		.tab_body{
+			padding: 0 20px 20px 20px;
+		}
+	}
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/departmentVisits/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-cascader
+        v-model="provinceCity"
+        :options="provinceCityDatas"
+        :props="props"
+        placeholder="请选择省市"
+        class="filter-item"
+        clearable
+        filterable
+        change-on-select/>
+      <el-select v-model="sc_source" class="filter-item" filterable clearable placeholder="请选择工单来源">
+        <el-option
+          v-for="item in sourceOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"/>
+      </el-select>
+      <el-select v-model="sc_type" class="filter-item" filterable clearable placeholder="请选择工单类型">
+        <el-option
+          v-for="item in typeOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"/>
+      </el-select>
+      <el-date-picker
+        v-model="searchDate"
+        :picker-options="pickerOptions"
+        class="filter-item"
+        type="daterange"
+        format="yyyy年MM月dd日"
+        value-format="yyyy-MM-dd"
+        align="left"
+        unlink-panels
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"/>
+      <el-input v-model="sc_tel" placeholder="请输入电话号码" class="filter-item"/>
+      <el-input v-model="sc_ordercode" placeholder="请输入工单编号" class="filter-item"/>
+      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
+      <el-button v-permission="'HY_add'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="dataLists" border stripe>
+      <el-table-column type="index" label="编号" align="center" fixed width="80"/>
+      <el-table-column prop="ordercode" label="工单编号" align="center" min-width="140"/>
+      <el-table-column prop="sourcename" label="工单来源" align="center" min-width=""/>
+      <el-table-column prop="typename" label="工单类型" align="center" min-width=""/>
+      <el-table-column prop="provincename" label="所在省" align="center"/>
+      <el-table-column prop="cityname" label="所在市" align="center"/>
+      <el-table-column prop="address" label="具体地址" align="center"/>
+      <el-table-column label="工单内容" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.content | formatterContent }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" align="center"/>
+      <el-table-column prop="phone" label="电话" align="center"/>
+      <el-table-column prop="sex" label="性别" align="center"/>
+      <el-table-column prop="createuser" label="创建人" align="center"/>
+      <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"/>
+      <el-table-column label="操作" width="220" align="center" class-name="oparate_btn" fixed="right">
+        <template slot-scope="scope">
+          <el-button v-permission="'HY_detail'" size="mini" plain type="primary" @click="btn_detail(scope.row.ordercode)">详情</el-button>
+          <el-button v-permission="'HY_edit'" size="mini" plain type="primary" @click="btn_edit(scope.row.ordercode)">编辑</el-button>
+          <el-button v-permission="'HY_delete'" size="mini" plain type="danger" @click="btn_delete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="pageParams.total > 0"
+      :total="pageParams.total"
+      :pageindex.sync="pageParams.pageindex"
+      :pagesize.sync="pageParams.pagesize"
+      class="pagination"
+      @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { getOrderLists, deleteOrder } from '@/api/order/orderSearch'
+import addOrEdit from './addOrEdit'
+import detail from './detail'
+import { pickerOptions, formatterContent } from '@/utils'
+import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
+
+export default {
+  name: 'OrderSearch',
+  components: {
+    Pagination
+  },
+  filters: {
+    OrderTextFilter(status) {
+      const statusMap = {
+        0: '暂时',
+        1: '永久',
+        2: '已取消'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: {// 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sc_source: '', // 工单来源
+      sourceOptions: [], // 工单来源下拉数据
+      sc_type: '', // 工单类型
+      typeOptions: [], // 工单类型下拉数据
+      searchDate: '', // 日期
+      pickerOptions, // 日期数据
+      sc_tel: '', // 电话号码
+      sc_ordercode: '', // 工单编号
+      pageParams: {
+        pageindex: 1, // 当前第几页
+        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
+        total: 0 // 总共多少数据
+      },
+      dataLists: [] // 列表数据
+    }
+  },
+  created() {
+    this.getProCity()
+    this.getOrderSource()
+    this.getOrderType()
+    this.getList()
+    document.onkeyup = (e) => {
+      if (e.keyCode === 13) {
+        this.getList()
+      }
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      return new Promise(resolve => {
+        const params = {
+          pageindex: this.pageParams.pageindex, // int 第几页
+          pagesize: this.pageParams.pagesize, // int 每页几条信息
+          stime: this.searchDate && this.searchDate[0], // 开始时间
+          etime: this.searchDate && this.searchDate[1], // 结束时间
+          ordercode: this.sc_ordercode, //	否	string	模糊查询（工单编号）
+          phone: this.sc_tel, //	否	string	模糊查询（号码）
+          province: this.provinceCity && this.provinceCity[0], //	否	string	省code
+          city: this.provinceCity && this.provinceCity[1], //	否	string	市code
+          sourceid: this.sc_source, //	否	string	来源id
+          typeid: this.sc_type //	否	string	类型id
+        }
+        getOrderLists(params).then(response => {
+          this.loading = false
+          if (response.state.toLowerCase() === 'success') {
+            this.pageParams.total = response.data.total
+            this.dataLists = response.data.rows
+          }
+        })
+        resolve()
+      })
+    },
+    btn_search() {
+      this.pageParams.pageindex = 1
+      this.getList()
+    },
+    btn_add() {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
+        },
+        area: ['80%', '90%'],
+        title: '添加工单'
+      })
+    },
+    btn_edit(editId) {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId }// props
+        },
+        area: ['80%', '90%'],
+        title: '编辑工单'
+      })
+    },
+    btn_detail(editId) {
+      this.$layer.iframe({
+        content: {
+          content: detail, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId }// props
+        },
+        area: ['80%', '90%'],
+        title: '工单详情'
+      })
+    },
+    btn_delete(editId) {
+      this.$confirm('您确定要将此工单删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteOrder(editId).then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.getList()
+            this.$message.success('删除成功!')
+          }
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/doctorVisits/addOrEdit.vue

@@ -0,0 +1,327 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
+      <el-form-item label="工单来源" prop="sourceid">
+        <el-select v-model="ruleForm.sourceid" class="form_select" filterable clearable placeholder="请选择工单来源">
+          <el-option v-for="item in sourceOptions" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工单类型" prop="typeid">
+        <el-select v-model="ruleForm.typeid" class="form_select" filterable clearable placeholder="请选择工单类型">
+          <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户姓名" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入客户姓名"/>
+      </el-form-item>
+      <el-form-item label="客户电话" prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入客户电话"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="ruleForm.sex">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="所在地" prop="provinceCity">
+        <el-cascader
+          v-model="provinceCity"
+          :options="provinceCityDatas"
+          :props="props"
+          placeholder="请选择省市"
+          class="form_select"
+          clearable
+          filterable
+          change-on-select/>
+      </el-form-item>
+      <el-form-item label="具体地址" prop="address">
+        <el-input v-model="ruleForm.address" placeholder="请输入具体地址"/>
+      </el-form-item>
+      <el-form-item label="工单内容" prop="content">
+        <el-input v-model="ruleForm.content" type="textarea" autosize placeholder="请输入工单内容"/>
+      </el-form-item>
+      <el-form-item label="附件" prop="files">
+        <el-upload
+          ref="upload"
+          :file-list="uploadData.fileList"
+          :action= "uploadData.uploadUrl"
+          :data = "uploadData.uploaderFiles"
+          :on-success="uploadSuccess"
+          :on-error="uploadError"
+          :on-remove="uploadRemove"
+          class="uploadFiles"
+          list-type="picture"
+          multiple>
+          <el-button size="small" type="primary">点击上传</el-button>
+          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+          <!-- <i class="el-icon-plus"></i> -->
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm">保存</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { getOrder, addOrder, editOrder } from '@/api/order/orderSearch'
+import { validateTel } from '@/utils/validate'
+import { delFiles, filterContent } from '@/utils'
+
+const validateTelRule = (rule, value, callback) => {
+  if (!validateTel(value)) {
+    callback(new Error('请输入有效的客户电话!'))
+  } else {
+    callback()
+  }
+}
+
+export default {
+  name: 'AddOrEdit',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    callid: {
+      type: Number,
+      default: 0
+    },
+    layerid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      uploadData: {// 文件上传数据
+        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
+        uploaderFiles: {// 上传文件的参数 //是	string	模块code，如：test
+          uploadtype: 'orderFiles'
+        },
+        fileList: [] // 展示文件的数据
+      },
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: { // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sourceOptions: [], // 工单来源下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      ruleForm: {
+        unique_id: '', //		否	string	callid
+        ordercode: '',
+        sourceid: '', //	否	string	来源id
+        typeid: '', //	否	string	类型id
+        name: '', //	否	string	姓名
+        phone: '', //	是	string	号码
+        sex: '男', //	否	string	性别
+        province: '', //	否	string	省code
+        city: '', //	否	string	市code
+        address: '', //	否	string	地址
+        // deptid: '', //	否	string	部门id
+        content: '', //	是	string	工单内容
+        files: [] // 否	list	附件json
+      },
+      rules: {
+        sourceid: [{
+          required: true,
+          message: '请选择工单来源',
+          trigger: 'blur'
+        }],
+        typeid: [{
+          required: true,
+          message: '请选择工单类型',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入客户姓名',
+          trigger: 'blur'
+        }],
+        phone: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateTelRule
+        }]
+      },
+      loading: false
+    }
+  },
+  created() {
+    if (this.callid) {
+      this.ruleForm.unique_id = this.callid
+    }
+    Promise.all([this.getOrderSource(), this.getOrderType(), this.getProCity()])
+      .then(() => {
+        if (this.rowid) {
+          this.ruleForm.ordercode = this.rowid
+          this.getDetail(this.rowid)
+        }
+      })
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.ruleForm.province = this.provinceCity && this.provinceCity[0]
+          this.ruleForm.city = this.provinceCity && this.provinceCity[1]
+          this.ruleForm.content = filterContent.delHtmlTag(this.ruleForm.content)// 保存内容时去掉 html 标签
+          this.loading = true
+          // 添加
+          if (!this.rowid) {
+            addOrder(this.ruleForm).then(response => {
+              this.loading = false
+              if (response.state.toLowerCase() === 'success') {
+                this.$parent.$layer.close(this.layerid)
+                if (this.callid) {
+                  this.$parent.getOrderRecord() // 重新加载来电弹屏工单记录
+                } else {
+                  this.$parent.getList() // 重新加载父级数据
+                }
+                this.$message.success('恭喜你，工单信息添加成功!')
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+            return
+          }
+          // 编辑
+          editOrder(this.ruleForm).then(response => {
+            this.loading = false
+            if (response.state.toLowerCase() === 'success') {
+              this.$parent.$layer.close(this.layerid)
+              this.$parent.getList() // 重新加载父级数据
+              this.$message.success('恭喜你，工单信息编辑成功!')
+            }
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          this.$message.error('请输入有效的必填项信息!')
+          return false
+        }
+      })
+    },
+    resetForm() {
+      if (!this.rowid) {
+        if (this.ruleForm.files.length > 0) {
+          for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+          }
+        }
+        this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+      }
+      this.provinceCity = []
+      this.$refs.ruleForm.resetFields()
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ruleForm.sourceid = res.sourceid // 来源
+          this.ruleForm.typeid = res.typeid // 类型
+          this.ruleForm.name = res.name // 姓名
+          this.ruleForm.phone = res.phone // 电话
+          this.ruleForm.sex = res.sex // 性别
+          this.provinceCity = [res.province, res.city]
+          this.ruleForm.address = res.address // 具体地址
+          this.ruleForm.content = res.content // 内容
+
+          // 附件
+          if (res.files) {
+            for (let i = 0, len = res.files.length; i < len; i++) {
+              this.uploadData.fileList.push({
+                'name': res.files[i].filename,
+                'url': res.files[i].fileurl
+              })
+            }
+            this.ruleForm.files = res.files
+          }
+        }
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 文件上传
+    uploadSuccess(response, file, fileList) {
+      if (response.state.toLowerCase() === 'success') {
+        this.ruleForm.files.push(response.data[0])
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    uploadRemove(file, fileList) {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
+          if (this.ruleForm.files[i].filename === file.name) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+            return
+          }
+        }
+      }
+    },
+    uploadError(err, file, fileList) {
+      // console.log(err)
+      this.$message.error(err)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.order_form .form_select{
+	width: 100%;
+}
+.order_form .uploadFiles .el-upload-list--picture{
+	margin-right: -1%;
+}
+.order_form .el-upload-list--picture li{
+	width: 24%;
+	margin-right: 1%;
+	float: left;
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/doctorVisits/detail.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="order_detail">
+    <el-row :gutter="20">
+      <el-col :md="24" class="order_detail_body">
+        <el-card shadow="hover">
+          <el-col :md="3">
+            <div class="round_img">
+              <img :src="avatar" alt="头像">
+            </div>
+          </el-col>
+          <el-col :md="21">
+            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />工单编号：{{ ordercode }}</h1>
+            <!-- <p class="title_sub"><span class="green">{{ name }}</span> {{ createtime }}</p> -->
+            <p class="title_sub"><span class="green">{{ name }}</span> 	河南阜外华中心血管病医院 {{ createtime }}</p>
+            <p class="title_sub">催单次数：<span class="red">10</span>次 | 工单状态： <span class="done">已完成</span></p>
+          </el-col>
+          <el-col :md="24" class="order_detail_content">
+            <el-col :md="6" class="order_detail_item">
+              客户电话：{{ phone }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              客户性别：{{ sex }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              工单来源：{{ sourcename }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              工单类型：{{ sourcetype }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              地址：{{ address }}
+            </el-col>
+            <el-col :md="6" class="order_detail_item">
+              创建人：{{ createuser }}
+            </el-col>
+            <el-col :md="24" class="order_detail_item">
+              工单内容：
+              <div class="order_content" v-html="content"/>
+            </el-col>
+            <el-col v-if="fileList.length > 0" :md="24" class="order_detail_item">
+              <p>附件：<span class="yellow">（可以下载查看）</span></p>
+
+              <el-col v-for="(item, index) in fileList" :md="3" :key="index">
+                <el-card class="order_file">
+                  <span class="img_mask">
+                    <a :href="item.fileurl" download="filename" title="点击下载">
+                      <i class="el-icon-download"/>
+                    </a>
+                  </span>
+                  <img v-if="item.filesmallurl" :src="item.filesmallurl" :large="item.fileurl" :preview-text="item.filename" preview="0" height="68" width="80%">
+                  <i v-else class="el-icon-document file_icon"/>
+                  <p :title="item.filename"> {{ item.filename }} </p>
+                </el-card>
+              </el-col>
+
+            </el-col>
+            <el-col :md="6">
+              <i class="el-icon-time"/>
+              已持续 <span class="red">20</span> 小时 <span class="red">20</span> 分 <span class="red">20</span> 秒
+            </el-col>
+            <el-col :md="6" :offset="12">
+              <el-button type="primary" size="mini" plain>催单</el-button>
+              <el-button type="primary" size="mini" plain>转派</el-button>
+              <el-button type="primary" size="mini" plain>完成</el-button>
+            </el-col>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col :md="12">
+        <el-card shadow="hover">
+          <div slot="header" class="clearfix">
+            <span>工单动态</span>
+          </div>
+          <div class="order_steps">
+            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
+              <el-step title="已完成" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+              <el-step title="已转派" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+              <el-step title="已创建" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
+            </el-steps>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="12">
+        <el-card shadow="hover" class="order_record">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="催单记录(2)" name="first">
+              <div class="tab_body">
+                催单记录
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="录音记录(3)" name="second">
+              <div class="tab_body">
+                录音记录
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getOrder } from '@/api/order/orderSearch'
+import { mapGetters } from 'vuex'
+import { filterContent } from '@/utils'
+
+export default {
+  name: 'Detail',
+  props: {
+    rowid: {
+      type: String,
+      default: ''
+    },
+    layerid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      activeName: 'first',
+      ordercode: '', // 工单编号
+      name: '', // 姓名
+      phone: '', // 电话
+      sex: '', // 性别
+      address: '', // 地址
+      sourcename: '', // 工单来源
+      sourcetype: '', // 工单类型
+      content: '', // 工单内容
+      createtime: '', // 创建时间
+      createuser: '', // 创建人
+      fileList: [] // 附件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'avatar'
+    ])
+  },
+  created() {
+    if (this.rowid) {
+      this.getDetail(this.rowid)
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 详情
+    getDetail(rid) {
+      getOrder(rid).then(response => {
+        if (response.state.toLowerCase() === 'success') {
+          const res = response.data.model
+          this.ordercode = res.ordercode // 工单编号
+          this.name = res.name // 姓名
+          this.phone = res.phone // 电话
+          this.sex = res.sex // 性别
+          res.provincename = res.provincename === null ? '' : res.provincename
+          res.cityname = res.cityname === null ? '' : res.cityname
+          res.address = res.address === null ? '' : res.address
+          this.address = res.provincename + res.cityname + res.address // 地址
+          this.sourcename = res.sourcename // 工单来源
+          this.sourcetype = res.typename // 工单类型
+          this.content = filterContent.content(res.content) // 工单内容
+          this.createtime = res.createtime // 创建时间
+          this.createuser = res.createuser + '-' + res.createusername // 创建人
+          // 附件
+          if (res.files) {
+            this.fileList = res.files
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_detail{
+		.el-col{
+			margin-bottom: 20px;
+		}
+		.el-icon-time{
+			color: #d81e06;
+		}
+		.el-card__header{
+			padding-top: 14px;
+			padding-bottom: 14px;
+			background-color: #F5F5F6;
+		}
+		.order_file{
+			.el-card__body{
+				padding: 22px 0 0 0;
+				text-align: center;
+			}
+		}
+		.order_steps{
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+		.order_record {
+			.el-card__body{
+				padding: 0;
+			}
+			.el-tabs__header{
+				padding: 0px 20px;
+				background-color: #F5F5F6;
+					.el-tabs__item{
+						font-size: 16px;
+						height: 47px;
+						line-height: 47px;
+					}
+			}
+		}
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.order_detail{
+		.order_detail_body{
+			margin-bottom: 20px;
+			.round_img{
+				width: 90px;
+				height: 90px;
+				border-radius: 50%;
+				overflow: hidden;
+				margin: 14px;
+				img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title{
+				font-size: 20px;
+				.title_icon{
+					color: #d81e06;
+					font-size: 16px;
+					margin-right: 20px;
+				}
+			}
+			.title_sub{
+				font-size: 14px;
+				color: #666666;
+			}
+			.order_detail_content{
+				background-color: #F5F5F6;
+				padding-top: 20px;
+				color: #4c4c4c;
+				font-size: 14px;
+				.order_detail_item{
+					margin-bottom: 10px;
+					.order_content{
+						margin-top: 10px;
+					}
+					.order_file {
+						position: relative;
+						cursor: pointer;
+						.img_mask {
+							display: none;
+							position: absolute;
+							left: 0px;
+							top: 0px;
+							background-color: rgba(0, 0, 0, 0.3);
+							width: 100%;
+							height: 22px;
+							text-align: right;
+							z-index: 1;
+							i {
+								font-size: 20px;
+								line-height: 22px;
+								display: inline-block;
+								margin-right: 15px;
+								color: #fff;
+							}
+						}
+						p {
+							margin-top: 5px;
+							padding-left: 14px;
+							padding-right: 14px;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+						.file_icon{
+							height: 68px;
+							line-height: 68px;
+							font-size: 68px;
+							color: #409EFF;
+						}
+					}
+					.order_file:hover .img_mask {
+						display: block;
+					}
+				}
+			}
+		}
+		.green {
+			color: #00c1de;
+		}
+		.done {
+			color: #198120;
+		}
+		.red {
+			color: #d81e06;
+		}
+		.yellow{
+			color: #e6a23c;
+		}
+		.order_steps{
+			// height: 240px;
+			.el-step__icon-inner{
+				display: none;
+			}
+		}
+
+		.tab_body{
+			padding: 0 20px 20px 20px;
+		}
+	}
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/doctorVisits/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-cascader
+        v-model="provinceCity"
+        :options="provinceCityDatas"
+        :props="props"
+        placeholder="请选择省市"
+        class="filter-item"
+        clearable
+        filterable
+        change-on-select/>
+      <el-select v-model="sc_source" class="filter-item" filterable clearable placeholder="请选择工单来源">
+        <el-option
+          v-for="item in sourceOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"/>
+      </el-select>
+      <el-select v-model="sc_type" class="filter-item" filterable clearable placeholder="请选择工单类型">
+        <el-option
+          v-for="item in typeOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"/>
+      </el-select>
+      <el-date-picker
+        v-model="searchDate"
+        :picker-options="pickerOptions"
+        class="filter-item"
+        type="daterange"
+        format="yyyy年MM月dd日"
+        value-format="yyyy-MM-dd"
+        align="left"
+        unlink-panels
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"/>
+      <el-input v-model="sc_tel" placeholder="请输入电话号码" class="filter-item"/>
+      <el-input v-model="sc_ordercode" placeholder="请输入工单编号" class="filter-item"/>
+      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
+      <el-button v-permission="'HY_add'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="dataLists" border stripe>
+      <el-table-column type="index" label="编号" align="center" fixed width="80"/>
+      <el-table-column prop="ordercode" label="工单编号" align="center" min-width="140"/>
+      <el-table-column prop="sourcename" label="工单来源" align="center" min-width=""/>
+      <el-table-column prop="typename" label="工单类型" align="center" min-width=""/>
+      <el-table-column prop="provincename" label="所在省" align="center"/>
+      <el-table-column prop="cityname" label="所在市" align="center"/>
+      <el-table-column prop="address" label="具体地址" align="center"/>
+      <el-table-column label="工单内容" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.content | formatterContent }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" align="center"/>
+      <el-table-column prop="phone" label="电话" align="center"/>
+      <el-table-column prop="sex" label="性别" align="center"/>
+      <el-table-column prop="createuser" label="创建人" align="center"/>
+      <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"/>
+      <el-table-column label="操作" width="220" align="center" class-name="oparate_btn" fixed="right">
+        <template slot-scope="scope">
+          <el-button v-permission="'HY_detail'" size="mini" plain type="primary" @click="btn_detail(scope.row.ordercode)">详情</el-button>
+          <el-button v-permission="'HY_edit'" size="mini" plain type="primary" @click="btn_edit(scope.row.ordercode)">编辑</el-button>
+          <el-button v-permission="'HY_delete'" size="mini" plain type="danger" @click="btn_delete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="pageParams.total > 0"
+      :total="pageParams.total"
+      :pageindex.sync="pageParams.pageindex"
+      :pagesize.sync="pageParams.pagesize"
+      class="pagination"
+      @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { getOrderLists, deleteOrder } from '@/api/order/orderSearch'
+import addOrEdit from './addOrEdit'
+import detail from './detail'
+import { pickerOptions, formatterContent } from '@/utils'
+import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
+
+export default {
+  name: 'OrderSearch',
+  components: {
+    Pagination
+  },
+  filters: {
+    OrderTextFilter(status) {
+      const statusMap = {
+        0: '暂时',
+        1: '永久',
+        2: '已取消'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: {// 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sc_source: '', // 工单来源
+      sourceOptions: [], // 工单来源下拉数据
+      sc_type: '', // 工单类型
+      typeOptions: [], // 工单类型下拉数据
+      searchDate: '', // 日期
+      pickerOptions, // 日期数据
+      sc_tel: '', // 电话号码
+      sc_ordercode: '', // 工单编号
+      pageParams: {
+        pageindex: 1, // 当前第几页
+        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
+        total: 0 // 总共多少数据
+      },
+      dataLists: [] // 列表数据
+    }
+  },
+  created() {
+    this.getProCity()
+    this.getOrderSource()
+    this.getOrderType()
+    this.getList()
+    document.onkeyup = (e) => {
+      if (e.keyCode === 13) {
+        this.getList()
+      }
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      return new Promise(resolve => {
+        const params = {
+          pageindex: this.pageParams.pageindex, // int 第几页
+          pagesize: this.pageParams.pagesize, // int 每页几条信息
+          stime: this.searchDate && this.searchDate[0], // 开始时间
+          etime: this.searchDate && this.searchDate[1], // 结束时间
+          ordercode: this.sc_ordercode, //	否	string	模糊查询（工单编号）
+          phone: this.sc_tel, //	否	string	模糊查询（号码）
+          province: this.provinceCity && this.provinceCity[0], //	否	string	省code
+          city: this.provinceCity && this.provinceCity[1], //	否	string	市code
+          sourceid: this.sc_source, //	否	string	来源id
+          typeid: this.sc_type //	否	string	类型id
+        }
+        getOrderLists(params).then(response => {
+          this.loading = false
+          if (response.state.toLowerCase() === 'success') {
+            this.pageParams.total = response.data.total
+            this.dataLists = response.data.rows
+          }
+        })
+        resolve()
+      })
+    },
+    btn_search() {
+      this.pageParams.pageindex = 1
+      this.getList()
+    },
+    btn_add() {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
+        },
+        area: ['80%', '90%'],
+        title: '添加工单'
+      })
+    },
+    btn_edit(editId) {
+      this.$layer.iframe({
+        content: {
+          content: addOrEdit, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId }// props
+        },
+        area: ['80%', '90%'],
+        title: '编辑工单'
+      })
+    },
+    btn_detail(editId) {
+      this.$layer.iframe({
+        content: {
+          content: detail, // 传递的组件对象
+          parent: this, // 当前的vue对象
+          data: { 'rowid': editId }// props
+        },
+        area: ['80%', '90%'],
+        title: '工单详情'
+      })
+    },
+    btn_delete(editId) {
+      this.$confirm('您确定要将此工单删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteOrder(editId).then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.getList()
+            this.$message.success('删除成功!')
+          }
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/orderCreate/index.1.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="24">
+      <el-col :span="20" :offset="1" class="creat_order">
+        <!-- <el-card shadow="hover"> -->
+        <div v-loading="loading">
+          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
+            <el-form-item label="工单来源" prop="sourceid">
+              <el-select v-model="ruleForm.sourceid" class="form_select" filterable clearable placeholder="请选择工单来源">
+                <el-option v-for="item in sourceOptions" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="工单类型" prop="typeid">
+              <el-select v-model="ruleForm.typeid" class="form_select" filterable clearable placeholder="请选择工单类型">
+                <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="客户姓名" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="请输入客户姓名"/>
+            </el-form-item>
+            <el-form-item label="客户电话" prop="phone">
+              <el-input v-model="ruleForm.phone" placeholder="请输入客户电话"/>
+            </el-form-item>
+            <el-form-item label="性别" prop="sex">
+              <el-radio-group v-model="ruleForm.sex">
+                <el-radio label="男">男</el-radio>
+                <el-radio label="女">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="所在地" prop="provinceCity">
+              <el-cascader
+                v-model="provinceCity"
+                :options="provinceCityDatas"
+                :props="props"
+                placeholder="请选择省市"
+                class="form_select"
+                clearable
+                filterable
+                change-on-select/>
+            </el-form-item>
+            <el-form-item label="具体地址" prop="address">
+              <el-input v-model="ruleForm.address" placeholder="请输入具体地址"/>
+            </el-form-item>
+            <el-form-item label="工单内容" prop="content">
+              <el-input :autosize="{ minRows: 4}" v-model="ruleForm.content" type="textarea" placeholder="请输入工单内容"/>
+            </el-form-item>
+            <el-form-item label="附件" prop="files">
+              <el-upload
+                ref="upload"
+                :http-request="upload"
+                :on-success="uploadSuccess"
+                :on-error="uploadError"
+                :on-remove="uploadRemove"
+                class="uploadFiles"
+                list-type="picture"
+                action="string"
+                multiple>
+                <!-- 								<el-upload
+									ref="upload"
+									class="uploadFiles"
+									list-type="picture"
+									multiple
+									:action= uploadData.uploadUrl
+									:data = uploadData.uploaderFiles
+									:on-success="uploadSuccess"
+									:on-error="uploadError"
+									:on-remove="uploadRemove"> -->
+                <el-button size="small" type="primary">点击上传</el-button>
+                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+                <!-- <i class="el-icon-plus"></i> -->
+              </el-upload>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm">保存</el-button>
+              <el-button @click="resetForm">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!-- </el-card> -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary, uploadFile } from '@/api/commonAPI'
+import { addOrder } from '@/api/order/orderSearch'
+import { validateTel } from '@/utils/validate'
+import { delFiles, filterContent } from '@/utils'
+
+const validateTelRule = (rule, value, callback) => {
+  if (!validateTel(value)) {
+    callback(new Error('请输入有效的客户电话!'))
+  } else {
+    callback()
+  }
+}
+
+export default {
+  name: 'OrderCreate',
+  data() {
+    return {
+      uploadData: {// 文件上传数据
+        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
+        uploaderFiles: {// 上传文件的参数 //是	string	模块code，如：test
+          uploadtype: 'orderFiles'
+        }
+      },
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: { // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sourceOptions: [], // 工单来源下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      ruleForm: {
+        ordercode: '',
+        sourceid: '', //	否	string	来源id
+        typeid: '', //	否	string	类型id
+        name: '', //	否	string	姓名
+        phone: '', //	是	string	号码
+        sex: '男', //	否	string	性别
+        province: '', //	否	string	省code
+        city: '', //	否	string	市code
+        address: '', //	否	string	地址
+        // deptid: '', //	否	string	部门id
+        content: '', //	是	string	工单内容
+        files: [] // 否	list	附件json
+      },
+      rules: {
+        sourceid: [{
+          required: true,
+          message: '请选择工单来源',
+          trigger: 'blur'
+        }],
+        typeid: [{
+          required: true,
+          message: '请选择工单类型',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入客户姓名',
+          trigger: 'blur'
+        }],
+        phone: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateTelRule
+        }]
+      },
+      loading: false
+    }
+  },
+  created() {
+    this.getOrderSource()
+    this.getOrderType()
+    this.getProCity()
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.ruleForm.province = this.provinceCity && this.provinceCity[0]
+          this.ruleForm.city = this.provinceCity && this.provinceCity[1]
+          this.ruleForm.content = filterContent.delHtmlTag(this.ruleForm.content)// 保存内容时去掉 html 标签
+          this.loading = true
+          addOrder(this.ruleForm).then(response => {
+            this.loading = false
+            if (response.state.toLowerCase() === 'success') {
+              this.ruleForm.files = []
+              this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+              this.provinceCity = []
+              this.$refs.ruleForm.resetFields()
+              this.$message.success('恭喜你，工单信息添加成功!')
+            }
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          this.$message.error('请输入有效的必填项信息!')
+          return false
+        }
+      })
+    },
+    resetForm() {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
+          delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+          this.ruleForm.files.splice(i, 1)
+        }
+      }
+      this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+      this.provinceCity = []
+      this.$refs.ruleForm.resetFields()
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 文件上传
+    uploadSuccess(response, file, fileList) {
+      if (response.state.toLowerCase() === 'success') {
+        this.ruleForm.files.push(response.data[0])
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    uploadRemove(file, fileList) {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
+          if (this.ruleForm.files[i].filename === file.name) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+            return
+          }
+        }
+      }
+    },
+    uploadError(err, file, fileList) {
+      // console.log(err)
+      this.$message.error(err)
+    },
+
+    upload(item) {
+      debugger
+
+      const formData = new FormData()
+      formData.append('file', item.file)
+      formData.append('uploadtype', 'orderFiles')
+
+      console.dir(formData)
+
+      console.log('上传图片接口-参数', item.file)
+      uploadFile({
+        file: item.file,
+        uploadtype: 'orderFiles'
+      }).then(res => {
+        console.log('上传图片接口-数据', res)
+      }).catch(err => {
+        this.$message.error('上传失败，请重新上传')
+        console.log('报错', err)
+      })
+    }
+
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_form .form_select{
+		width: 100%;
+	}
+	.order_form .uploadFiles .el-upload-list--picture{
+		margin-right: -1%;
+	}
+	.order_form .el-upload-list--picture li{
+		width: 24%;
+		margin-right: 1%;
+		float: left;
+	}
+	.creat_order .el-card__body{
+		padding-top: 60px;
+    padding-bottom: 60px;
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.creat_order{
+		margin-top: 20px;
+		padding-top: 40px;
+	}
+</style>

fuwaiCallCenterWeb.UI/src/views/appointment/orderCreate/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="24">
+      <el-col :span="20" :offset="1" class="creat_order">
+        <!-- <el-card shadow="hover"> -->
+        <div v-loading="loading">
+          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="order_form">
+            <el-form-item label="工单来源" prop="sourceid">
+              <el-select v-model="ruleForm.sourceid" class="form_select" filterable clearable placeholder="请选择工单来源">
+                <el-option v-for="item in sourceOptions" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="工单类型" prop="typeid">
+              <el-select v-model="ruleForm.typeid" class="form_select" filterable clearable placeholder="请选择工单类型">
+                <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="客户姓名" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="请输入客户姓名"/>
+            </el-form-item>
+            <el-form-item label="客户电话" prop="phone">
+              <el-input v-model="ruleForm.phone" placeholder="请输入客户电话"/>
+            </el-form-item>
+            <el-form-item label="性别" prop="sex">
+              <el-radio-group v-model="ruleForm.sex">
+                <el-radio label="男">男</el-radio>
+                <el-radio label="女">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="所在地" prop="provinceCity">
+              <el-cascader
+                v-model="provinceCity"
+                :options="provinceCityDatas"
+                :props="props"
+                placeholder="请选择省市"
+                class="form_select"
+                clearable
+                filterable
+                change-on-select/>
+            </el-form-item>
+            <el-form-item label="具体地址" prop="address">
+              <el-input v-model="ruleForm.address" placeholder="请输入具体地址"/>
+            </el-form-item>
+            <el-form-item label="工单内容" prop="content">
+              <el-input :autosize="{ minRows: 4}" v-model="ruleForm.content" type="textarea" placeholder="请输入工单内容"/>
+            </el-form-item>
+            <el-form-item label="附件" prop="files">
+              <el-upload
+                ref="upload"
+                :action= "uploadData.uploadUrl"
+                :data = "uploadData.uploaderFiles"
+                :on-success="uploadSuccess"
+                :on-error="uploadError"
+                :on-remove="uploadRemove"
+                class="uploadFiles"
+                list-type="picture"
+                multiple>
+                <el-button size="small" type="primary">点击上传</el-button>
+                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+                <!-- <i class="el-icon-plus"></i> -->
+              </el-upload>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm">保存</el-button>
+              <el-button @click="resetForm">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!-- </el-card> -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getProviceCity, getDictionary } from '@/api/commonAPI'
+import { addOrder } from '@/api/order/orderSearch'
+import { validateTel } from '@/utils/validate'
+import { delFiles, filterContent } from '@/utils'
+
+const validateTelRule = (rule, value, callback) => {
+  if (!validateTel(value)) {
+    callback(new Error('请输入有效的客户电话!'))
+  } else {
+    callback()
+  }
+}
+
+export default {
+  name: 'OrderCreate',
+  data() {
+    return {
+      uploadData: {// 文件上传数据
+        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
+        uploaderFiles: {// 上传文件的参数 //是	string	模块code，如：test
+          uploadtype: 'orderFiles'
+        }
+      },
+      provinceCity: [], // 省市下拉绑定的值
+      provinceCityDatas: [], // 省市下拉数据
+      props: { // 自定义省市下拉数据的key值
+        value: 'code',
+        label: 'name',
+        children: 'entityJson'
+      },
+      sourceOptions: [], // 工单来源下拉数据
+      typeOptions: [], // 工单类型下拉数据
+      ruleForm: {
+        ordercode: '',
+        sourceid: '', //	否	string	来源id
+        typeid: '', //	否	string	类型id
+        name: '', //	否	string	姓名
+        phone: '', //	是	string	号码
+        sex: '男', //	否	string	性别
+        province: '', //	否	string	省code
+        city: '', //	否	string	市code
+        address: '', //	否	string	地址
+        // deptid: '', //	否	string	部门id
+        content: '', //	是	string	工单内容
+        files: [] // 否	list	附件json
+      },
+      rules: {
+        sourceid: [{
+          required: true,
+          message: '请选择工单来源',
+          trigger: 'blur'
+        }],
+        typeid: [{
+          required: true,
+          message: '请选择工单类型',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入客户姓名',
+          trigger: 'blur'
+        }],
+        phone: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateTelRule
+        }]
+      },
+      loading: false
+    }
+  },
+  created() {
+    this.getOrderSource()
+    this.getOrderType()
+    this.getProCity()
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.ruleForm.province = this.provinceCity && this.provinceCity[0]
+          this.ruleForm.city = this.provinceCity && this.provinceCity[1]
+          this.ruleForm.content = filterContent.delHtmlTag(this.ruleForm.content)// 保存内容时去掉 html 标签
+          this.loading = true
+          addOrder(this.ruleForm).then(response => {
+            this.loading = false
+            if (response.state.toLowerCase() === 'success') {
+              this.ruleForm.files = []
+              this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+              this.provinceCity = []
+              this.$refs.ruleForm.resetFields()
+              this.$message.success('恭喜你，工单信息添加成功!')
+            }
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          this.$message.error('请输入有效的必填项信息!')
+          return false
+        }
+      })
+    },
+    resetForm() {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
+          delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+          this.ruleForm.files.splice(i, 1)
+        }
+      }
+      this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
+      this.provinceCity = []
+      this.$refs.ruleForm.resetFields()
+    },
+    // 获取省市下拉数据
+    getProCity() {
+      return new Promise(resolve => {
+        getProviceCity().then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.provinceCityDatas = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单来源
+    getOrderSource() {
+      return new Promise(resolve => {
+        getDictionary('GDLY').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.sourceOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 获取工单类型
+    getOrderType() {
+      return new Promise(resolve => {
+        getDictionary('GDLX').then(response => {
+          if (response.state.toLowerCase() === 'success') {
+            this.typeOptions = response.data
+          }
+        })
+        resolve()
+      })
+    },
+    // 文件上传
+    uploadSuccess(response, file, fileList) {
+      if (response.state.toLowerCase() === 'success') {
+        this.ruleForm.files.push(response.data[0])
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    uploadRemove(file, fileList) {
+      if (this.ruleForm.files.length > 0) {
+        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
+          if (this.ruleForm.files[i].filename === file.name) {
+            delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
+            this.ruleForm.files.splice(i, 1)
+            return
+          }
+        }
+      }
+    },
+    uploadError(err, file, fileList) {
+      // console.log(err)
+      this.$message.error(err)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+	.order_form .form_select{
+		width: 100%;
+	}
+	.order_form .uploadFiles .el-upload-list--picture{
+		margin-right: -1%;
+	}
+	.order_form .el-upload-list--picture li{
+		width: 24%;
+		margin-right: 1%;
+		float: left;
+	}
+	.creat_order .el-card__body{
+		padding-top: 60px;
+    padding-bottom: 60px;
+	}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.creat_order{
+		margin-top: 20px;
+		padding-top: 40px;
+	}
+</style>

fuwaiCallCenterWeb.UI/static/config/serverConfig.json

@@ -1,9 +1,9 @@
 {
   "NODE_ENV": "development",
-  "BASE_API": "http://192.168.5.42:28000/",
+  "BASE_API": "http://192.168.5.60:28000/",
   "SOCKET_IP": "192.168.5.41",
   "SOCKET_PORT": "28822",
-  "LineChat_SOCKET_IP": "192.168.5.42",
+  "LineChat_SOCKET_IP": "192.168.5.60",
   "LineChat_SOCKET_PORT": "28300",
   "PAGESIZES": "[10, 20, 50, 100]",
   "PAGESIZE": "10",