safajscomponent

Safa javascript component's Design by MehrdadM

کامپوننت های صفا رایانه

Demo

You can see a demo and examples in this page: Demo & examples

Instalation

$ npm install safajscomponent

How to use

 
Add code to main.js
import SJC from 'safajscomponent/src'
Vue.use(SJC)
 
فرم پایه
BaseForm :

Properties

Property	Type	Default	Description
nidForm	GUID	not set	کد فرم
title	String	not set	عنوان فرم

---

تاریخ
ClsDate :

Properties

Property	Type	Default	Description
notitle	Boolean	false	نمایش / عدم نمایش عنوان تاریخ
placeholder	String	not set	عنوان داخل تاریخ

Events

event	description
selectionChanged	انتخاب تاریخ

---

---

تکس باکس
ClsTextbox :

Properties

Property	Type	Default	Description
rules	String		اعتبار سنجی
mask	String		برای فرمت ورودی

Events

event	description

---

دکمه
ClsButton :

Properties

Property	Type	Default	Description

Events

event	description

---

 
تیک
ClsCheckbox :

Properties

Property	Type	Default	Description

Events

event	description

---

 
کمبو
ClsCombo :

Properties

Property	Type	Default	Description
showTextbox	Boolean		نمایش/عدم نمایش تکس باکس
DomainName	String		دامنه
DtoName	String		نام جدول

Events

event	description
selectionChanged	انتخاب

---

 
توضیحات
ClsComment :

Properties

Property	Type	Default	Description
rows	Number		تعداد سطر
cols	Number		تعداد ستون

Events

| event | description |

---

 
گرید
ClsGrid :

Properties

Property	Type	Default	Description
data	Array	null	دیتا مورد نظر
height	Number	not set	طول گرید
pageSize	Number	20	تعداد سطر در صفحه
scrollable	Boolean	true	اسکرول شود / خیر
reorderable	Boolean	true	جابجایی ستون ها
sortable	Boolean	true	قابلیت سورت بر روی ستون ها
filterable	Boolean	true	قابلیت فیلتر کردن
resizable	Boolean	true	تغییر اندازه ستون ها
groupable	Boolean	false	گروه بندی ستون ها
pageable	Boolean	false	نمایش پیجینگ
autoSync	Boolean	false	ست کردن دیتا بصورت async

Events

event	description
selectionChanged	انتخاب سطر
dataBound	لود ستون ها
dataBinding	درحال لود ستون ها
sort	سورت کردن
filter	فیلتر کردن
group	گروه بندی کردن
page	انتخاب صفحه
groupExpand	بازکزدن گروه
groupCollapse	بستن گروه

---

 
گرید سکوریتی
ClsSecurityGrid :

Properties

Property	Type	Default	Description
securityId	GUID	not set	کد سکوریتی

Events

event	description

نحوه استفاده You may use these components in your project

 
<BaseForm ref="نم فرم برای دسترسی در سطح برنامه"  nidForm='کد فرم که باید "جی آی دی " باشد'>
  <header>
    <h3>عنوان فرم ...</h3>
  </header>
 
  در صورت استفاده از این کنترل
  <ClsSecurityGrid securityId="GUID" label="عنوان">
 
    <ClsCheckbox :rules="[v => !!v || 'باید تیک بزنید']" required label="جنسیت - مرد/زن" id="chMale" :disabled="disabled" v-model="IsMale" />
 
    <ClsCombo :rules="[v => !!v || 'لطفا یک گزینه را انتخاب کنید']" required :disabled="disabled" :selectionChanged="onChange" DomainName="دامنه" DtoName="اسم جدول" v-model="فیلد برای بایندیگ" />
 
    <ClsComment securityId="GUID" label="گرید نوسازی" rows="5" :disabled="disabled" v-model="فیلد برای بایندینگ" />
 
    <ClsDate :disabled="disabled" v-model="فیلد برای بایندینگ" />
 
    <ClsTextbox :rules="[v => !!v || 'نام را وارد نمایید']" required label="عنوان" :disabled="disabled" maxlength="10" type="string" v-model="فیلد برای بایندینگ" />
 
    <ClsTextbox label="سن" :disabled="disabled" mask="###" type="number" v-model="Age" />
 
  </ClsSecurityGrid>
 
  <ClsGrid securityId="GUID"  label="عنوان" :disabled="disabled" ref="grid" :sort="sort" :selectionChanged="grid_selectionChanged" :data="فیدل برای بایندینگ">
    <ClsGridColumn selectable="true" width="40px"></ClsGridColumn>
    <ClsGridColumn securityId="GUID" field="نام فیلد"  label="عنوان"></ClsGridColumn>
    <ClsGridColumn width="200px" field="نام فیلد"  label="عنوان" template="<div  style='background-color: skyblue;'>تست #: Name #</div>"></ClsGridColumn>
    <ClsGridColumn width="200px"  controlType="date" field="StartDate" label="تاریخ شروع"></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان" type="number" ></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان"  format="{0:n0}" type="number" ></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان"  type="boolean"></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان" width="200px" controlType="Combo" DomainName="نام دامنه" DtoName="نام جدول"></ClsGridColumn>
  </ClsGrid>
 
  <footer>
    <ClsButton securityId="GUID" label="عنوان" v-on:click="Edit" />
    <ClsButton v-on:click="Save">عنوان</ClsButton>
  </footer>
</BaseForm>
 

 
export default {
 
  data: () => ({
    selecteditems: null,
    Name: 'شایان',
    Family: 'خوش آئین',
    Age: 32,
    disabled: true,
    IsMale: true,
    Comment: "پسر خوب",
    CI_...: null,
    BirthDate: "1300/01/01",
    gridData: [{
      Name: 'علی',
      Family: 'رضایی',
      UnitPrice: 2500,
      UnitsInStock: 1500,
      Discontinued: false,
      CI_SideCode: 4,
      StartDate: '1300/10/10'
    }]
  }),
  methods: {
    Edit(event) {
      .
      .
      .
      this.disabled = false;
    },
    Save(event) {
      this.$refs.frmRequest.validation();
    },
    Cancel(event) {
      .
      .
      .
      this.disabled = true;
    },
    onChange(item) {
      .
      .
      .
    },
    grid_selectionChanged(a) {
      this.selecteditems = a;
    },
    sort(a) {
      .
      .
      .
    }
  }
}