LocalGuideOperation.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. <template>
  2. <div v-loading="loading" element-loading-text="跳转中..." class="car_add">
  3. <div class="communal-title">
  4. <div>添加导游地接资料资料</div>
  5. </div>
  6. <template>
  7. <el-form :model="addData" :rules="rules" ref="addData" label-width="100px" class="demo-ruleForm">
  8. <el-row>
  9. <el-col :span="8">
  10. <el-form-item label="服务评分" prop="Score">
  11. <el-select v-model="addData.Score" placeholder="服务评分">
  12. <el-option key="1" label="1分" value="1"></el-option>
  13. <el-option key="2" label="2分" value="2"></el-option>
  14. <el-option key="3" label="3分" value="3"></el-option>
  15. <el-option key="4" label="4分" value="4"></el-option>
  16. <el-option key="5" label="5分" value="5"></el-option>
  17. </el-select>
  18. </el-form-item>
  19. </el-col>
  20. <el-col :span="8">
  21. <el-form-item label="单位地区" prop="UnitArea">
  22. <el-autocomplete class="inline-input" v-model="addData.UnitArea"
  23. :fetch-suggestions="querySearch" placeholder="请输入单位地区" @select="handleSelect"
  24. style="width: 290px;"></el-autocomplete>
  25. </el-form-item>
  26. </el-col>
  27. <el-col :span="8">
  28. <el-form-item label="单位名称" prop="UnitName">
  29. <el-input placeholder="单位名称" v-model="addData.UnitName">
  30. </el-input>
  31. </el-form-item>
  32. </el-col>
  33. </el-row>
  34. <el-row>
  35. <el-col :span="24">
  36. <el-form-item label="单位地址" prop="Address">
  37. <el-input placeholder="单位地址" v-model="addData.Address">
  38. </el-input>
  39. </el-form-item>
  40. </el-col>
  41. </el-row>
  42. <el-row>
  43. <el-col :span="8">
  44. <el-form-item label="联系人" prop="Contact">
  45. <el-input placeholder="联系人" v-model="addData.Contact">
  46. </el-input>
  47. </el-form-item>
  48. </el-col>
  49. <el-col :span="8">
  50. <el-form-item label="联系方式" prop="ContactTel">
  51. <el-input placeholder="联系方式" v-model="addData.ContactTel">
  52. </el-input>
  53. </el-form-item>
  54. </el-col>
  55. <el-col :span="8">
  56. <el-form-item label="电子邮箱" prop="ContactEmail">
  57. <el-input placeholder="电子邮箱" v-model="addData.ContactEmail">
  58. </el-input>
  59. </el-form-item>
  60. </el-col>
  61. </el-row>
  62. <el-row>
  63. <el-col :span="8">
  64. <el-form-item label="传 真" prop="ContactFax">
  65. <el-input placeholder="传 真" v-model="addData.ContactFax">
  66. </el-input>
  67. </el-form-item>
  68. </el-col>
  69. </el-row>
  70. <el-row>
  71. <el-col :span="23">
  72. <el-form-item label="其他信息" prop="OtherInfo">
  73. <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addData.OtherInfo"></el-input>
  74. </el-form-item>
  75. </el-col>
  76. </el-row>
  77. <div class="communal-title">导游评分</div>
  78. <div class="appraise-box">
  79. <div style="float: left;">
  80. <el-form-item label="着装得体" prop="SuitScore" label-width="210px">
  81. <template>
  82. <el-radio v-model="addData.SuitScore" label="A" style="margin-right: 10px">A</el-radio>
  83. <el-radio v-model="addData.SuitScore" label="B" style="margin-right: 10px">B</el-radio>
  84. <el-radio v-model="addData.SuitScore" label="C" style="margin-right: 10px">C</el-radio>
  85. </template>
  86. </el-form-item>
  87. <el-form-item label="服务意识强度" prop="ServeScore" label-width="210px">
  88. <template>
  89. <el-radio v-model="addData.ServeScore" label="A" style="margin-right: 10px">A</el-radio>
  90. <el-radio v-model="addData.ServeScore" label="B" style="margin-right: 10px">B</el-radio>
  91. <el-radio v-model="addData.ServeScore" label="C" style="margin-right: 10px">C</el-radio>
  92. </template>
  93. </el-form-item>
  94. </div>
  95. <div style="float: left;">
  96. <el-form-item label="时间概念强度" prop="TimeScore" label-width="210px">
  97. <template>
  98. <el-radio v-model="addData.TimeScore" label="A" style="margin-right: 10px">A</el-radio>
  99. <el-radio v-model="addData.TimeScore" label="B" style="margin-right: 10px">B</el-radio>
  100. <el-radio v-model="addData.TimeScore" label="C" style="margin-right: 10px">C</el-radio>
  101. </template>
  102. </el-form-item>
  103. <el-form-item label="讲解水平专业" prop="TalkProScore" label-width="210px">
  104. <template>
  105. <el-radio v-model="addData.TalkProScore" label="A" style="margin-right: 10px">A</el-radio>
  106. <el-radio v-model="addData.TalkProScore" label="B" style="margin-right: 10px">B</el-radio>
  107. <el-radio v-model="addData.TalkProScore" label="C" style="margin-right: 10px">C</el-radio>
  108. </template>
  109. </el-form-item>
  110. </div>
  111. <div>
  112. <el-form-item label="配合能力强,服从安排" prop="FitScore" label-width="210px">
  113. <template>
  114. <el-radio v-model="addData.FitScore" label="A" style="margin-right: 10px">A</el-radio>
  115. <el-radio v-model="addData.FitScore" label="B" style="margin-right: 10px">B</el-radio>
  116. <el-radio v-model="addData.FitScore" label="C" style="margin-right: 10px">C</el-radio>
  117. </template>
  118. </el-form-item>
  119. <el-form-item label="应变能力强" prop="StrainScore" label-width="210px">
  120. <template>
  121. <el-radio v-model="addData.StrainScore" label="A" style="margin-right: 10px">A</el-radio>
  122. <el-radio v-model="addData.StrainScore" label="B" style="margin-right: 10px">B</el-radio>
  123. <el-radio v-model="addData.StrainScore" label="C" style="margin-right: 10px">C</el-radio>
  124. </template>
  125. </el-form-item>
  126. </div>
  127. <div style="float: left;">
  128. <el-form-item label="当地语言和中文表达流畅" prop="LocalAndChineseScore" label-width="210px">
  129. <template>
  130. <el-radio v-model="addData.LocalAndChineseScore" label="A"
  131. style="margin-right: 10px">A</el-radio>
  132. <el-radio v-model="addData.LocalAndChineseScore" label="B"
  133. style="margin-right: 10px">B</el-radio>
  134. <el-radio v-model="addData.LocalAndChineseScore" label="C"
  135. style="margin-right: 10px">C</el-radio>
  136. </template>
  137. </el-form-item>
  138. </div>
  139. </div>
  140. <el-form-item>
  141. <div style="margin-left: 60%;">
  142. <el-button type="primary" @click="addBtn">保存</el-button>
  143. <router-link to='/home/CarData'>
  144. <el-button>取消</el-button>
  145. </router-link>
  146. </div>
  147. </el-form-item>
  148. </el-form>
  149. </template>
  150. </div>
  151. </template>
  152. <script>
  153. export default {
  154. data() {
  155. // var isnumber = (rule, value, callback) => {
  156. // debugger
  157. // var reg = /^1[3456789]\d{9}$/;//小数点左边最高16位,小数点右边最多4位
  158. // if (reg.test(value)) {
  159. // callback();
  160. // } else
  161. // callback(new Error("请输入正确的手机号"));
  162. // };
  163. return {
  164. rules: {
  165. UnitArea: [
  166. { required: true, message: '请输入单位地区', trigger: 'blur' },
  167. { required: true, message: '请输入单位地区', trigger: 'change' },
  168. ],
  169. UnitName: [
  170. { required: true, message: '请输入单位名称', trigger: 'blur' },
  171. ],
  172. Contact: [
  173. { required: true, message: '请输入单位联系人', trigger: 'blur' },
  174. ],
  175. ContactTel: [
  176. { required: true, message: '请输入单位联系人电话', trigger: 'blur' },
  177. ],
  178. },
  179. loading: false,
  180. tableData: [],
  181. currentPage: 1, // 当前页码
  182. pageSize: 15,// 每页的数据条数
  183. input: '',
  184. token: '',
  185. userId: 0,
  186. addData: {
  187. Status: '',
  188. Id: 0,
  189. UnitArea: '',
  190. UnitName: '',
  191. Address: '',
  192. Contact: '',
  193. ContactTel: '',
  194. ContactEmail: '',
  195. ContactFax: '',
  196. OtherInfo: '',
  197. Score: '5',
  198. SuitScore: 'A',
  199. ServeScore: 'A',
  200. TalkProScore: 'A',
  201. TimeScore: 'A',
  202. FitScore: 'A',
  203. StrainScore: 'A',
  204. LocalAndChineseScore: 'A',
  205. CreateUserId: '',
  206. Remark: '',
  207. },
  208. unitAreas: [],
  209. restaurants: [],
  210. LocalGuideData: {}
  211. }
  212. },
  213. methods: {
  214. LocalGuide() {
  215. var url = "/api/Resource/QueryLocalGuide"
  216. var that = this
  217. this.$axios({
  218. method: 'post',
  219. url: url,
  220. headers: {
  221. Authorization: 'Bearer ' + this.token
  222. },
  223. data: {
  224. portType: 1,
  225. pageIndex: 0,
  226. pageSize: 0,
  227. unitName: "",
  228. unitArea: "",
  229. contact: "",
  230. contactTel: ""
  231. }
  232. }).then(function (res) {
  233. if (res.data.code == 200) {
  234. debugger
  235. that.tableData = res.data.data;
  236. that.tableData.forEach(function (item, index) {
  237. that.unitAreas.push({
  238. value: item.unitArea,
  239. });
  240. });
  241. that.addData.Id = that.$route.query.id;
  242. if (that.addData.Id == undefined || that.addData.Id == null) {
  243. //添加
  244. that.addData.Status = 1
  245. } else {
  246. //编辑
  247. that.upData();
  248. }
  249. }
  250. }).catch(function (error) {
  251. that.$message.error("网络错误,请稍后重试");
  252. });
  253. },
  254. handleSelect(item) {
  255. console.log(item);
  256. },
  257. addBtn() {
  258. const that = this;
  259. debugger
  260. that.addData.CreateUserId = that.userId
  261. that.addData.Remark = that.addData.OtherInfo
  262. debugger
  263. that.$refs.addData.validate((valid) => {
  264. if (valid) {
  265. debugger
  266. console.log(that.addData)
  267. var url = "/api/Resource/OperationLocalGuide"
  268. that.$axios({
  269. method: 'post',
  270. url: url,
  271. headers: {
  272. Authorization: 'Bearer ' + that.token
  273. },
  274. data: that.addData
  275. }).then(function (res) {
  276. console.log(res)
  277. debugger
  278. if (res.data.code == 200) {
  279. that.$message({
  280. message: res.data.msg,
  281. type: 'success'
  282. });
  283. that.loading = true;
  284. setTimeout(() => {
  285. that.$router.push('/home/LocalGuide')
  286. }, 3000);
  287. } else {
  288. that.$message.error(res.data.msg);
  289. }
  290. })
  291. } else {
  292. this.$message.error('请完善信息在保存!');
  293. return false;
  294. }
  295. })
  296. },
  297. querySearch(queryString, cb) {
  298. var arr = this.unitAreas;
  299. for (var i = 0; i < arr.length - 1; i++) {
  300. for (var j = i + 1; j < arr.length; j++) {
  301. if (arr[i].value == arr[j].value) {
  302. arr.splice(j, 1);
  303. //因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
  304. j--;
  305. }
  306. }
  307. }
  308. var restaurants = arr;
  309. var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
  310. // 调用 callback 返回建议列表的数据
  311. cb(results);
  312. },
  313. createFilter(queryString) {
  314. return (restaurant) => {
  315. return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  316. };
  317. },
  318. upData() {
  319. debugger
  320. for (var i = 0; i < this.tableData.length; i++) {
  321. if (this.tableData[i].id == parseInt(this.addData.Id)) {
  322. debugger
  323. this.LocalGuideData = this.tableData[i];
  324. break;
  325. }
  326. }
  327. this.addData.Status = 2;
  328. this.addData.Id = this.LocalGuideData.id;
  329. this.addData.UnitArea = this.LocalGuideData.unitArea;
  330. this.addData.UnitName = this.LocalGuideData.unitName;
  331. this.addData.Address = this.LocalGuideData.address;
  332. this.addData.Contact = this.LocalGuideData.contact;
  333. this.addData.ContactTel = this.LocalGuideData.contactTel;
  334. this.addData.ContactEmail = this.LocalGuideData.contactEmail;
  335. this.addData.ContactFax = this.LocalGuideData.contactFax;
  336. this.addData.OtherInfo = this.LocalGuideData.otherInfo;
  337. this.addData.Score = this.LocalGuideData.score;
  338. this.addData.SuitScore = this.LocalGuideData.suitScore;
  339. this.addData.ServeScore = this.LocalGuideData.serveScore;
  340. this.addData.TalkProScore = this.LocalGuideData.talkProScore;
  341. this.addData.TimeScore = this.LocalGuideData.timeScore;
  342. this.addData.FitScore = this.LocalGuideData.fitScore;
  343. this.addData.StrainScore = this.LocalGuideData.strainScore;
  344. this.addData.LocalAndChineseScore = this.LocalGuideData.localAndChineseScore;
  345. this.addData.CreateUserId = this.LocalGuideData.createUserId;
  346. this.addData.Remark = this.LocalGuideData.remark;
  347. },
  348. },
  349. mounted() {
  350. debugger
  351. this.token = JSON.parse(localStorage.getItem('userinif')).token;
  352. this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
  353. this.LocalGuide();
  354. console.log(this.tableData)
  355. }
  356. }
  357. </script>
  358. <style>
  359. .communal-list {
  360. background-color: #fff;
  361. padding: 10px;
  362. box-shadow: 0 0 5px #0005;
  363. border-radius: 10px;
  364. }
  365. .car_add .communal-title {
  366. display: flex;
  367. font-size: 17px;
  368. font-weight: 600;
  369. color: #555;
  370. margin-bottom: 20px;
  371. justify-content: space-between;
  372. align-items: center;
  373. }
  374. .appraise-box {
  375. display: flex;
  376. flex-wrap: wrap;
  377. justify-content: space-between;
  378. margin: 50px 0;
  379. }
  380. .appraise-box>div {
  381. width: 30%;
  382. }
  383. .communal-box {
  384. display: flex;
  385. }
  386. .communal-box>button {
  387. margin-left: 10px;
  388. padding: 8px 20px;
  389. }
  390. .car_add {
  391. background-color: #fff;
  392. padding: 20px;
  393. box-shadow: 0 0 5px #0005;
  394. border-radius: 10px;
  395. }
  396. @media screen and (max-width: 1700px) {
  397. .appraise-box>div {
  398. width: 48%;
  399. }
  400. .appraise-box>div el-form-item__content {
  401. width: 260px !important;
  402. }
  403. }
  404. </style>