Guest User

Untitled

a guest
May 23rd, 2018
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.64 KB | None | 0 0
  1. 1. `UserApi.js`
  2. ```javascript
  3. import axios from "axios"
  4.  
  5. export default {
  6. getAllExtraCompanies: function (cb, errorCB) {
  7. let url = '/api/backend/extra_companies'
  8. this._sendRequestToDelivery(url, {}, 'get', cb, errorCB)
  9. },
  10.  
  11. createExtraCompany: function (params, cb, errorCB) {
  12. let url = '/api/backend/extra_companies'
  13. this._sendRequestToDelivery(url, params, 'post', cb, errorCB)
  14. },
  15.  
  16. updateExtraCompany: function (id, params, cb, errorCB) {
  17. let url = '/api/backend/extra_companies/' + id
  18. this._sendRequestToDelivery(url, params, 'patch', cb, errorCB)
  19. },
  20.  
  21. deleteExtraCompanies: function (params, cb, errorCB) {
  22. let url = '/api/backend/extra_companies/delete_extra_companies'
  23. this._sendRequestToDelivery(url, params, 'post', cb, errorCB)
  24. },
  25.  
  26. _sendRequestToDelivery: function (url, data, method, cb, errorCB) {
  27. axios({
  28. url: url,
  29. method: method,
  30. responseType: 'json',
  31. data: data
  32. })
  33. .then((response) => {
  34. cb(response.data);
  35. }, (error) => {
  36. errorCB(error)
  37. });
  38. },
  39. }
  40. ```
  41.  
  42. 2. `users.js` store
  43.  
  44. ```javascript
  45. import UserApi from '../../api/user'
  46. import * as types from '../mutation_types'
  47.  
  48. const state = {
  49. all: [],
  50. userDetail: {
  51. sales_office: {},
  52. branch_office: {}
  53. },
  54. userLoggedInDetail: {},
  55. createdPropertyOwner: {},
  56. officeOptions: [],
  57. approveUsersData: {
  58. users: [],
  59. officeName: ''
  60. },
  61.  
  62. accessLogsData: {
  63. }
  64. }
  65.  
  66. const getters = {
  67. allUsers: state => state.all,
  68. userDetail: state => state.userDetail,
  69. officeOptions: state => state.officeOptions,
  70. userLoggedInDetail: state => state.userLoggedInDetail,
  71. approveUsersData: state => state.approveUsersData,
  72. accessLogsData: state => state.accessLogsData
  73. }
  74.  
  75. const actions = {
  76. getAllUsers ({ commit }) {
  77. UserApi.getListUsers(users =>{
  78. commit(types.SET_LIST_USERS, {users})
  79. })
  80. },
  81.  
  82. getUserDetail ({ commit }, id) {
  83. UserApi.getUserDetail(id, user =>{
  84. commit(types.SET_USER_DETAIL, {user})
  85. })
  86. },
  87.  
  88. getUserLoggedInDetail ({ commit }, id) {
  89. UserApi.getUserDetail(id, response =>{
  90. commit(types.SET_USER_LOGGED_IN_DETAIL, { user: response.user})
  91. })
  92. },
  93.  
  94. getUserPassword ({ commit }, id) {
  95. UserApi.getUserPassword(id, password => {
  96. commit(types.SET_USER_DETAIL_PASSWORD, password)
  97. })
  98. },
  99.  
  100. getOfficeOptions ({ commit }, type) {
  101. UserApi.getOfficeOPtions(type, offices => {
  102. commit(types.SET_OFFICE_OPTIONS, offices)
  103. })
  104. },
  105. }
  106.  
  107. const mutations = {
  108. [types.SET_LIST_USERS] (state, { users }) {
  109. state.all = users
  110. },
  111.  
  112. [types.SET_OFFICE_OPTIONS] (state, offices) {
  113. state.officeOptions = offices
  114. },
  115.  
  116. [types.REMOVE_OFFICE_OPTIONS] (state) {
  117. state.officeOptions = []
  118. },
  119.  
  120. [types.SET_USER_DETAIL] (state, { user }) {
  121. state.userDetail = user
  122. },
  123.  
  124. [types.SET_USER_LOGGED_IN_DETAIL] (state, { user }) {
  125. state.userLoggedInDetail = user
  126. },
  127.  
  128. [types.DELETE_USER] (state, { userId }) {
  129. state.all = state.all.filter(user => user.id != parseInt(userId))
  130. },
  131.  
  132. [types.SET_USER_DETAIL_PASSWORD] (state, password ) {
  133. state.userDetail = { ...state.userDetail, password: password }
  134. },
  135.  
  136. [types.CREATED_PROPERTY_OWNER_DATA] (state, user ) {
  137. state.createdPropertyOwner = user
  138. }
  139. }
  140.  
  141. export default {
  142. state,
  143. getters,
  144. actions,
  145. mutations
  146. }
  147.  
  148. ```
  149.  
  150. 3. `property_component.vue`
  151.  
  152. ```vue
  153. <template>
  154. <div class="col-xs-12 new-property no-padding">
  155. <div class="modal" id="UpdatePropertyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  156. <div class="modal-dialog" role="document">
  157. <div class="modal-content">
  158. <div class="modal-body">
  159. <form @submit.prevent='submitPropertyForm' id="UpdatePropertyFormData">
  160. <div class="form-group">
  161. <label for="">物件オーナー</label>
  162. <v-select placeholder="選択して下さい" v-model="selectedManager" label='name' :options="listUsers">
  163. <span slot="no-options">検索結果が見つかりませんでした。</span>
  164. </v-select>
  165. <input :value="selectedManager && selectedManager.id" type="hidden" name="property[manager_user_id]">
  166. </div>
  167. <div class="form-group">
  168. <label for="">物件名</label>
  169. <input :value="property.name" v-validate="'required'" type="text" name="property[name]" class="form-control" :class="{'input': true, 'is-danger': errors.has('property[name]') }">
  170. <span v-show="errors.has('property[name]')" class="help is-danger">物件名は必須入力項目です</span>
  171. </div>
  172. <div class="form-group">
  173. <label for="">郵便番号</label>
  174. <input v-model="property.postal_code" type="text" name="property[postal_code]" v-validate="'required'" class="form-control" :class="{'input': true, 'is-danger': errors.has('property[postal_code]') }" >
  175. <span v-show="errors.has('property[postal_code]')" class="help is-danger">郵便番号は必須入力項目です</span>
  176. </div>
  177. <div class="form-group">
  178. <label for="">住所</label>
  179. <input v-model="property.address" v-validate="'required'" type="text" name="property[address]" class="form-control">
  180. <span v-show="errors.has('property[address]')" class="help is-danger">住所号は必須入力項目です</span>
  181. </div>
  182. <div class="form-group">
  183. <label for="">電話番号</label>
  184. <input :value="property.phone" type="text" name="property[phone]" class="form-control">
  185. </div>
  186. <div class="form-group">
  187. <label for="">Box Id</label>
  188. <input name="box[id]" type="hidden" class="form-control" v-if="property.box" :value="property.box.id">
  189. <input readonly name="box[box_id]" type="text" class="form-control" v-if="property.box" :value="property.box.box_id">
  190. </div>
  191. <div class="form-group">
  192. <label for="">Box 設置日</label>
  193. <input readonly name="box[installed_at]" type="text" class="form-control" v-if="property.box" :value="property.box.installed_at">
  194. </div>
  195. <div class="form-group">
  196. <label for="">空室日</label>
  197. <Datepicker :value='property.room_empty_at' name="property[room_empty_at]" :placeholder="'年/月/日'" :format="'yyyy/MM/dd'" :input-class="'form-control date-time-input room-empty-at'"></Datepicker>
  198. </div>
  199. <div class="form-group">
  200. <label for="">満室日</label>
  201. <Datepicker :value='property.no_vacancy_at' name="property[no_vacancy_at]" :placeholder="'年/月/日'" :format="'yyyy/MM/dd'" :input-class="'form-control date-time-input no-vacancy-at'"></Datepicker>
  202. </div>
  203. <div class="new-property-of-owner center">
  204. <button type="submit" class="btn btn-sm btn-primary">確定</button>
  205. <span class="btn btn-sm btn-warning" @click='closeModalForm'>キャンセル</span>
  206. <span class="btn btn-sm btn-danger" @click='deleteProperty(property.id)'> 削除</span>
  207. </div>
  208. </form>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </template>
  215.  
  216. <script>
  217. import { mapGetters } from 'vuex'
  218. import * as mutationTypes from '../../../store/mutation_types'
  219. import PropertyApi from '../../../api/property'
  220. import Datepicker from 'vuejs-datepicker'
  221. import moment from 'moment'
  222. import property from '../../../api/property'
  223. import ApiUser from '../../../api/user'
  224.  
  225. export default {
  226. name: 'newPropertyOfOwnerComponent',
  227. props: ['property'],
  228.  
  229. components: {
  230. Datepicker
  231. },
  232.  
  233. data: function () {
  234. return {
  235. room_empty_at: this.formatDate(this.property.room_empty_at),
  236. no_vacancy_at: this.formatDate(this.property.no_vacancy_at),
  237. listUsers: [],
  238. selectedManager: null
  239. }
  240. },
  241.  
  242. watch: {
  243. property: function (newData, oldData) {
  244. this.selectedManager = this.listUsers.filter(user => newData.manager_user_id == user.id)[0]
  245. }
  246. },
  247.  
  248. methods: {
  249. formatDate: function (date) {
  250. return moment(date).format('YYYY/MM/DD')
  251. },
  252.  
  253. submitPropertyForm: function () {
  254. this.$validator.validateAll().then((result) => {
  255. if (!result) {
  256. return;
  257. }
  258. PropertyApi.updateProperty(this.property.id, $('#UpdatePropertyFormData').serialize(), response => {
  259. this._updateListProperties(response.property)
  260. }, error =>{
  261. swal('更新時にエラーが発生しました。もう一度お試しください')
  262. })
  263. })
  264. },
  265.  
  266. closeModalForm: function() {
  267. $('#UpdatePropertyModal').modal('hide')
  268. },
  269.  
  270. _updateListProperties: function (property) {
  271. this.$store.commit(mutationTypes.UPDATE_PROPERTY_DATA, property)
  272.  
  273. swal('選択した物件情報を更新しました')
  274. .then(() => {
  275. this.closeModalForm()
  276. })
  277. },
  278.  
  279. deleteProperty: function (id) {
  280. swal({
  281. title: "物件を削除しますか?",
  282. buttons: ['キャンセル', '確定'],
  283. dangerMode: true,
  284. })
  285. .then((sure) => {
  286. if(!sure) { return }
  287. PropertyApi.deleteProperty(id, data => {
  288. this.$store.commit(mutationTypes.DELETE_PROPERTY_OF_SALES, id)
  289. this.closeModalForm()
  290. }, error => {
  291. swal('物件削除が失敗しました。')
  292. })
  293. })
  294. }
  295. },
  296.  
  297. mounted: function () {
  298. ApiUser.usersForProperty(this.$store.getters.userLoggedIn.sales_office_id, users => {
  299. this.listUsers = users
  300. }, error => {
  301. })
  302. }
  303. }
  304. </script>
  305.  
  306. ```
Add Comment
Please, Sign In to add comment