CarDataAdd.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  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="appraise-box">
  78. <el-form-item label="有相关的车辆资质" prop="QualificationScore" label-width="130px">
  79. <template>
  80. <el-radio v-model="addData.QualificationScore" label="A" style="margin-right: 10px">A</el-radio>
  81. <el-radio v-model="addData.QualificationScore" label="B" style="margin-right: 10px">B</el-radio>
  82. <el-radio v-model="addData.QualificationScore" label="C" style="margin-right: 10px">C</el-radio>
  83. </template>
  84. </el-form-item>
  85. <el-form-item label="车辆2-4年新,VIP及以上需要2年新" prop="CarAgeScore" label-width="260px">
  86. <template>
  87. <el-radio v-model="addData.CarAgeScore" label="A" style="margin-right: 10px">A</el-radio>
  88. <el-radio v-model="addData.CarAgeScore" label="B" style="margin-right: 10px">B</el-radio>
  89. <el-radio v-model="addData.CarAgeScore" label="C" style="margin-right: 10px">C</el-radio>
  90. </template>
  91. </el-form-item>
  92. <el-form-item label="车身干净,无文字图片等" prop="CleanImgScore" label-width="170px">
  93. <template>
  94. <el-radio v-model="addData.CleanImgScore" label="A" style="margin-right: 10px">A</el-radio>
  95. <el-radio v-model="addData.CleanImgScore" label="B" style="margin-right: 10px">B</el-radio>
  96. <el-radio v-model="addData.CleanImgScore" label="C" style="margin-right: 10px">C</el-radio>
  97. </template>
  98. </el-form-item>
  99. <el-form-item label="车内整洁、无异味" prop="SmellScore" label-width="130px">
  100. <template>
  101. <el-radio v-model="addData.SmellScore" label="A" style="margin-right: 10px">A</el-radio>
  102. <el-radio v-model="addData.SmellScore" label="B" style="margin-right: 10px">B</el-radio>
  103. <el-radio v-model="addData.SmellScore" label="C" style="margin-right: 10px">C</el-radio>
  104. </template>
  105. </el-form-item>
  106. <el-form-item label="提前备水,纸巾等" prop="WaterPaperScore" label-width="260px">
  107. <template>
  108. <el-radio v-model="addData.WaterPaperScore" label="A" style="margin-right: 10px">A</el-radio>
  109. <el-radio v-model="addData.WaterPaperScore" label="B" style="margin-right: 10px">B</el-radio>
  110. <el-radio v-model="addData.WaterPaperScore" label="C" style="margin-right: 10px">C</el-radio>
  111. </template>
  112. </el-form-item>
  113. <el-form-item label="车辆配置高(皮座椅等)" prop="HardwareScore" label-width="170px">
  114. <template>
  115. <el-radio v-model="addData.HardwareScore" label="A" style="margin-right: 10px">A</el-radio>
  116. <el-radio v-model="addData.HardwareScore" label="B" style="margin-right: 10px">B</el-radio>
  117. <el-radio v-model="addData.HardwareScore" label="C" style="margin-right: 10px">C</el-radio>
  118. </template>
  119. </el-form-item>
  120. <el-form-item label="时间概念强" prop="TimeScore" label-width="130px">
  121. <template>
  122. <el-radio v-model="addData.TimeScore" label="A" style="margin-right: 10px">A</el-radio>
  123. <el-radio v-model="addData.TimeScore" label="B" style="margin-right: 10px">B</el-radio>
  124. <el-radio v-model="addData.TimeScore" label="C" style="margin-right: 10px">C</el-radio>
  125. </template>
  126. </el-form-item>
  127. <el-form-item label="安全意识高" prop="SafetyScore" label-width="260px">
  128. <template>
  129. <el-radio v-model="addData.SafetyScore" label="A" style="margin-right: 10px">A</el-radio>
  130. <el-radio v-model="addData.SafetyScore" label="B" style="margin-right: 10px">B</el-radio>
  131. <el-radio v-model="addData.SafetyScore" label="C" style="margin-right: 10px">C</el-radio>
  132. </template>
  133. </el-form-item>
  134. <el-form-item label="司机驾龄时间长,提前熟悉路线" prop="DrivingAgeScore" label-width="210px">
  135. <template>
  136. <el-radio v-model="addData.DrivingAgeScore" label="A" style="margin-right: 10px">A</el-radio>
  137. <el-radio v-model="addData.DrivingAgeScore" label="B" style="margin-right: 10px">B</el-radio>
  138. <el-radio v-model="addData.DrivingAgeScore" label="C" style="margin-right: 10px">C</el-radio>
  139. </template>
  140. </el-form-item>
  141. </div>
  142. <el-form-item>
  143. <div style="margin-left: 60%;">
  144. <el-button type="primary" @click="addBtn">保存</el-button>
  145. <router-link to='/home/CarData'>
  146. <el-button>取消</el-button>
  147. </router-link>
  148. </div>
  149. </el-form-item>
  150. </el-form>
  151. </template>
  152. </div>
  153. </template>
  154. <script>
  155. export default {
  156. data() {
  157. // var isnumber = (rule, value, callback) => {
  158. // debugger
  159. // var reg = /^1[3456789]\d{9}$/;//小数点左边最高16位,小数点右边最多4位
  160. // if (reg.test(value)) {
  161. // callback();
  162. // } else
  163. // callback(new Error("请输入正确的手机号"));
  164. // };
  165. return {
  166. rules: {
  167. UnitArea: [
  168. { required: true, message: '请输入单位地区', trigger: 'blur' },
  169. { required: true, message: '请输入单位地区', trigger: 'change' },
  170. ],
  171. UnitName: [
  172. { required: true, message: '请输入单位名称', trigger: 'blur' },
  173. ],
  174. Contact: [
  175. { required: true, message: '请输入单位联系人', trigger: 'blur' },
  176. ],
  177. ContactTel: [
  178. { required: true, message: '请输入单位联系人电话', trigger: 'blur' },
  179. ],
  180. },
  181. loading: false,
  182. tableData: [],
  183. currentPage: 1, // 当前页码
  184. pageSize: 15,// 每页的数据条数
  185. input: '',
  186. token: '',
  187. userId: 0,
  188. addData: {
  189. UnitArea: '',
  190. UnitName: '',
  191. Address: '',
  192. Contact: '',
  193. ContactTel: '',
  194. ContactEmail: '',
  195. ContactFax: '',
  196. CarDes: '',
  197. CarPicPaths: '',
  198. OtherInfo: '',
  199. Score: '5',
  200. QualificationScore: 'A',
  201. CarAgeScore: 'A',
  202. CleanImgScore: 'A',
  203. SmellScore: 'A',
  204. WaterPaperScore: 'A',
  205. HardwareScore: 'A',
  206. TimeScore: 'A',
  207. SafetyScore: 'A',
  208. DrivingAgeScore: 'A',
  209. CreateUserId: 0,
  210. Remark: ''
  211. },
  212. unitAreas: [],
  213. restaurants: [],
  214. }
  215. },
  216. methods: {
  217. carData() {
  218. var url = "/api/Resource/QueryCarData"
  219. var that = this
  220. this.$axios({
  221. method: 'post',
  222. url: url,
  223. headers: {
  224. Authorization: 'Bearer ' + this.token
  225. },
  226. data: {
  227. portType: 1,
  228. pageIndex: 0,
  229. pageSize: 0,
  230. unitName: "",
  231. unitArea: "",
  232. contact: "",
  233. contactTel: ""
  234. }
  235. }).then(function (res) {
  236. console.log(res)
  237. debugger
  238. if (res.data.code == 200) {
  239. debugger
  240. that.tableData = res.data.data;
  241. that.tableData.forEach(function (item, index) {
  242. that.unitAreas.push({
  243. value: item.unitArea,
  244. });
  245. });
  246. }
  247. })
  248. },
  249. handleSelect(item) {
  250. console.log(item);
  251. },
  252. addBtn() {
  253. const that = this;
  254. debugger
  255. this.addData.CreateUserId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
  256. this.addData.Remark = this.addData.OtherInfo
  257. that.$refs.addData.validate((valid) => {
  258. if (valid) {
  259. var url = "/api/Resource/AddCarData"
  260. that.$axios({
  261. method: 'post',
  262. url: url,
  263. headers: {
  264. Authorization: 'Bearer ' + that.token
  265. },
  266. data: that.addData
  267. }).then(function (res) {
  268. console.log(res)
  269. debugger
  270. if (res.data.code == 200) {
  271. that.$message({
  272. message: '添加成功',
  273. type: 'success'
  274. });
  275. that.loading = true;
  276. setTimeout(() => {
  277. that.$router.push('/home/CarData')
  278. }, 3000);
  279. } else {
  280. that.$message.error(res.data.msg);
  281. }
  282. })
  283. } else {
  284. this.$message.error('请完善信息在保存!');
  285. return false;
  286. }
  287. })
  288. },
  289. querySearch(queryString, cb) {
  290. var arr = this.unitAreas;
  291. for (var i = 0; i < arr.length - 1; i++) {
  292. for (var j = i + 1; j < arr.length; j++) {
  293. if (arr[i].value == arr[j].value) {
  294. arr.splice(j, 1);
  295. //因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
  296. j--;
  297. }
  298. }
  299. }
  300. var restaurants = arr;
  301. var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
  302. // 调用 callback 返回建议列表的数据
  303. cb(results);
  304. },
  305. createFilter(queryString) {
  306. return (restaurant) => {
  307. return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  308. };
  309. },
  310. },
  311. mounted() {
  312. debugger
  313. this.token = JSON.parse(localStorage.getItem('userinif')).token;
  314. this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
  315. this.carData();
  316. }
  317. }
  318. </script>
  319. <style>
  320. .communal-list {
  321. background-color: #fff;
  322. padding: 10px;
  323. box-shadow: 0 0 5px #0005;
  324. border-radius: 10px;
  325. }
  326. .car_add .communal-title {
  327. display: flex;
  328. font-size: 17px;
  329. font-weight: 600;
  330. color: #555;
  331. margin-bottom: 20px;
  332. justify-content: space-between;
  333. align-items: center;
  334. }
  335. .appraise-box {
  336. display: flex;
  337. flex-wrap: wrap;
  338. justify-content: space-between;
  339. margin: 50px 0;
  340. }
  341. .appraise-box>div {
  342. width: 30%;
  343. }
  344. .communal-box {
  345. display: flex;
  346. }
  347. .communal-box>button {
  348. margin-left: 10px;
  349. padding: 8px 20px;
  350. }
  351. .car_add {
  352. background-color: #fff;
  353. padding: 20px;
  354. box-shadow: 0 0 5px #0005;
  355. border-radius: 10px;
  356. }
  357. @media screen and (max-width: 1700px) {
  358. .appraise-box>div {
  359. width: 48%;
  360. }
  361. .appraise-box>div el-form-item__content {
  362. width: 260px !important;
  363. }
  364. }
  365. </style>